To execute the example, create an HTML page and execute the following operations:
1. Add links to the following JS and CSS filed in the <head> tag:
PP.js.
PP.GraphicsBase.js.
PP.BubbleChart.js.
resources.ru.js.
PP.css.
2. Then add a scenario creating a bubble chart in the <head> tag:
<script type="text/javascript">
var bubbleChart; // Variable that will be used to store bubble chart instance
// Creates a bubble chart data source
function CreateDataSource() {
// Create an object containing data series for the 'DimX', 'DimY', 'DimR' and 'DimCol' attributes
var data = {
"Series": {
"Serie0_Point0": {
"DimX": {
"Items": ["1000.000000", "2100.000000", "4000.000000", "8000.000000", "16000.000000", "32000.000000", "NULL"]
},
"DimY": {
"Items": ["46.100000", "46.300000", "45.800000", "45.900000", "45.800000", "40.000000", "41.100000"]
},
"DimR": {
"Items": ["7273.000000", "9372.000000", "11630.000000", "15496.000000", "20495.000000", "19832.000000", "7273.000000"]
},
"DimCol": {
"Items": ["7273.000000", "9372.000000", "11630.000000", "15496.000000", "20495.000000", "19832.000000", "7273.000000"]
}
},
"Serie1_Point0": {
"DimX": {
"Items": ["16889.700000", "-12848.000000", "16044.000000", "-16535.400000", "27365.000000", "-27396.000000", "NULL"]
},
"DimY": {
"Items": ["108.500000", "104.000000", "106.700000", "109.000000", "106.600000", "90.700000", "105.800000"]
},
"DimR": {
"Items": ["4951.000000", "6460.000000", "8101.000000", "10574.000000", "13898.000000", "13933.000000", "NULL"]
},
"DimCol": {
"Items": ["4951.000000", "6460.000000", "8101.000000", "10574.000000", "13898.000000", "13933.000000", "NULL"]
}
},
"Serie2_Point0": {
"DimX": {
"Items": ["-8123.000000", "10207.000000", "-12414.000000", "15381.000000", "-20094.000000", "20104.000000", "NULL"]
},
"DimY": {
"Items": ["111.900000", "105.300000", "106.200000", "103.400000", "105.100000", "90.100000", "102.900000"]
},
"DimR": {
"Items": ["4700.000000", "5966.000000", "7328.000000", "9159.000000", "12061.000000", "12145.000000", "NULL"]
},
"DimCol": {
"Items": ["4700.000000", "5966.000000", "7328.000000", "9159.000000", "12061.000000", "12145.000000", "NULL"]
}
},
"Serie3_Point0": {
"DimX": {
"Items": ["4994.000000", "6553.000000", "7687.000000", "10072.000000", "12784.000000", "12225.000000", "NULL"]
},
"DimY": {
"Items": ["119.000000", "103.700000", "103.500000", "112.100000", "106.100000", "86.000000", "98.900000"]
},
"DimR": {
"Items": ["4771.000000", "6285.000000", "7397.000000", "9711.000000", "12340.000000", "11796.000000", "NULL"]
},
"DimCol": {
"Items": ["4771.000000", "6285.000000", "7397.000000", "9711.000000", "12340.000000", "11796.000000", "NULL"]
}
},
"Serie4_Point0": {
"DimX": {
"Items": ["30040.000000", "6666.000000", "52347.000000", "71173.000000", "104687.000000", "93331.000000", "NULL"]
},
"DimY": {
"Items": ["111.000000", "107.300000", "108.000000", "105.300000", "97.300000", "83.500000", "106.600000"]
},
"DimR": {
"Items": ["8609.000000", "11909.000000", "15239.000000", "20868.000000", "30918.000000", "27737.000000", "NULL"]
},
"DimCol": {
"Items": ["8609.000000", "11909.000000", "15239.000000", "20868.000000", "30918.000000", "27737.000000", "NULL"]
}
},
"Serie5_Point0": {
"DimX": {
"Items": ["15890.400000", "58044.000000", "72361.000000", "92093.000000", "117646.000000", "274647.800000", "NULL"]
},
"DimY": {
"Items": ["110.800000", "97.100000", "108.300000", "104.600000", "97.100000", "81.600000", "111.800000"]
},
"DimR": {
"Items": ["9713.000000", "12490.000000", "15725.000000", "20197.000000", "26028.000000", "23137.000000", "NULL"]
},
"DimCol": {
"Items": ["9713.000000", "12490.000000", "15725.000000", "20197.000000", "26028.000000", "23137.000000", "NULL"]
}
},
"Serie6_Point0": {
"DimX": {
"Items": ["5947.000000", "7430.000000", "8784.000000", "11127.000000", "15008.000000", "14731.000000", "NULL"]
},
"DimY": {
"Items": ["115.600000", "101.100000", "103.600000", "105.100000", "104.200000", "88.900000", "111.000000"]
},
"DimR": {
"Items": ["4397.000000", "5554.000000", "6636.000000", "8485.000000", "11545.000000", "11419.000000", "NULL"]
},
"DimCol": {
"Items": ["4397.000000", "5554.000000", "6636.000000", "8485.000000", "11545.000000", "11419.000000", "NULL"]
}
},
"Serie7_Point0": {
"DimX": {
"Items": ["5297.000000", "6700.000000", "8185.000000", "10508.000000", "13208.000000", "12542.000000", "NULL"]
},
"DimY": {
"Items": ["106.400000", "98.500000", "106.600000", "108.200000", "103.900000", "82.100000", "108.200000"]
},
"DimR": {
"Items": ["4238.000000", "5373.000000", "6576.000000", "8452.000000", "10626.000000", "10081.000000", "NULL"]
},
"DimCol": {
"Items": ["4238.000000", "5373.000000", "6576.000000", "8452.000000", "10626.000000", "10081.000000", "NULL"]
}
},
"Serie8_Point0": {
"DimX": {
"Items": ["15255.000000", "19968.000000", "24787.000000", "1111.000000", "11.000000", "37446.000000", "NULL"]
},
"DimY": {
"Items": ["115.600000", "104.600000", "106.100000", "108.500000", "101.300000", "78.900000", "103.600000"]
},
"DimR": {
"Items": ["8093.000000", "10683.000000", "13369.000000", "18022.000000", "23232.000000", "20614.000000", "NULL"]
},
"DimCol": {
"Items": ["8093.000000", "10683.000000", "13369.000000", "18022.000000", "23232.000000", "20614.000000", "NULL"]
}
},
"Serie9_Point0": {
"DimX": {
"Items": ["7311.000000", "9622.000000", "11316.000000", "13916.000000", "17883.000000", "17241.000000", "NULL"]
},
"DimY": {
"Items": ["107.600000", "105.900000", "102.500000", "100.800000", "97.500000", "89.300000", "98.300000"]
},
"DimR": {
"Items": ["5238.000000", "6916.000000", "8157.000000", "10055.000000", "12940.000000", "12485.000000", "NULL"]
},
"DimCol": {
"Items": ["5238.000000", "6916.000000", "8157.000000", "10055.000000", "12940.000000", "12485.000000", "NULL"]
}
},
"Serie10_Point0": {
"DimX": {
"Items": ["11883.000000", "15362.000000", "19188.000000", "26221.000000", "35687.000000", "190140.900000", "NULL"]
},
"DimY": {
"Items": ["109.800000", "107.300000", "108.800000", "105.900000", "104.400000", "89.200000", "105.500000"]
},
"DimR": {
"Items": ["6652.000000", "8673.000000", "10918.000000", "15033.000000", "20593.000000", "21769.000000", "NULL"]
},
"DimCol": {
"Items": ["6652.000000", "8673.000000", "10918.000000", "15033.000000", "20593.000000", "21769.000000", "NULL"]
}
},
"Serie11_Point0": {
"DimX": {
"Items": ["5594.000000", "6877.000000", "8187.000000", "9989.000000", "13961.000000", "13389.000000", "NULL"]
},
"DimY": {
"Items": ["118.900000", "102.400000", "105.100000", "97.900000", "113.700000", "85.800000", "105.000000"]
},
"DimR": {
"Items": ["5122.000000", "6394.000000", "7723.000000", "9546.000000", "13515.000000", "13096.000000", "NULL"]
},
"DimCol": {
"Items": ["5122.000000", "6394.000000", "7723.000000", "9546.000000", "13515.000000", "13096.000000", "NULL"]
}
},
"Serie12_Point0": {
"DimX": {
"Items": ["14672.000000", "19716.000000", "24159.000000", "32280.000000", "42985.000000", "38451.000000", "NULL"]
},
"DimY": {
"Items": ["108.200000", "100.300000", "104.300000", "105.200000", "98.900000", "86.700000", "104.200000"]
},
"DimR": {
"Items": ["5973.000000", "8131.000000", "10085.000000", "13628.000000", "18338.000000", "16562.000000", "NULL"]
},
"DimCol": {
"Items": ["5973.000000", "8131.000000", "10085.000000", "13628.000000", "18338.000000", "16562.000000", "NULL"]
}
},
"Serie13_Point0": {
"DimX": {
"Items": ["13992.000000", "17192.000000", "21486.000000", "27987.000000", "35534.000000", "35955.000000", "NULL"]
},
"DimY": {
"Items": ["105.200000", "98.100000", "108.300000", "105.800000", "100.700000", "88.300000", "101.700000"]
},
"DimR": {
"Items": ["5396.000000", "6657.000000", "8351.000000", "10915.000000", "13902.000000", "14093.000000", "NULL"]
},
"DimCol": {
"Items": ["5396.000000", "6657.000000", "8351.000000", "10915.000000", "13902.000000", "14093.000000", "NULL"]
}
},
"Serie14_Point0": {
"DimX": {
"Items": ["7934.000000", "9553.000000", "11876.000000", "14767.000000", "19410.000000", "20336.000000", "NULL"]
},
"DimY": {
"Items": ["118.100000", "100.100000", "107.100000", "99.500000", "106.900000", "92.500000", "102.100000"]
},
"DimR": {
"Items": ["6424.000000", "7801.000000", "9769.000000", "12227.000000", "16175.000000", "17050.000000", "NULL"]
},
"DimCol": {
"Items": ["6424.000000", "7801.000000", "9769.000000", "12227.000000", "16175.000000", "17050.000000", "NULL"]
}
},
"Serie15_Point0": {
"DimX": {
"Items": ["17029.000000", "126760.600000", "24898.000000", "33116.000000", "46994.000000", "302816.900000", "NULL"]
},
"DimY": {
"Items": ["108.100000", "99.600000", "103.500000", "106.300000", "111.900000", "86.800000", "102.800000"]
},
"DimR": {
"Items": ["7028.000000", "8619.000000", "10379.000000", "13827.000000", "19638.000000", "20341.000000", "NULL"]
},
"DimCol": {
"Items": ["7028.000000", "8619.000000", "10379.000000", "13827.000000", "19638.000000", "20341.000000", "NULL"]
}
},
"Serie16_Point0": {
"DimX": {
"Items": ["13983.000000", "18099.000000", "22179.000000", "28355.000000", "34118.000000", "33629.000000", "NULL"]
},
"DimY": {
"Items": ["116.700000", "99.200000", "108.200000", "105.800000", "94.900000", "86.800000", "110.400000"]
},
"DimR": {
"Items": ["8841.000000", "11574.000000", "14330.000000", "18500.000000", "22476.000000", "22337.000000", "NULL"]
},
"DimCol": {
"Items": ["8841.000000", "11574.000000", "14330.000000", "18500.000000", "22476.000000", "22337.000000", "NULL"]
}
},
"Serie17_Point0": {
"DimX": {
"Items": ["5599.000000", "7263.000000", "8924.000000", "11180.000000", "14074.000000", "13469.000000", "NULL"]
},
"DimY": {
"Items": ["113.100000", "102.100000", "106.900000", "104.500000", "99.500000", "86.500000", "106.100000"]
},
"DimR": {
"Items": ["4817.000000", "6269.000000", "7724.000000", "9695.000000", "12217.000000", "11699.000000", "NULL"]
},
"DimCol": {
"Items": ["4817.000000", "6269.000000", "7724.000000", "9695.000000", "12217.000000", "11699.000000", "NULL"]
}
},
"Serie18_Point0": {
"DimX": {
"Items": ["6275.000000", "8025.000000", "9566.000000", "12341.000000", "16210.000000", "16060.000000", "NULL"]
},
"DimY": {
"Items": ["105.900000", "104.400000", "103.400000", "103.400000", "103.600000", "88.700000", "97.900000"]
},
"DimR": {
"Items": ["5009.000000", "6497.000000", "7848.000000", "10249.000000", "13622.000000", "13631.000000", "NULL"]
},
"DimCol": {
"Items": ["5009.000000", "6497.000000", "7848.000000", "10249.000000", "13622.000000", "13631.000000", "NULL"]
}
},
"Serie19_Point0": {
"DimX": {
"Items": ["3948.000000", "5137.000000", "6452.000000", "8276.000000", "10618.000000", "11173.000000", "NULL"]
},
"DimY": {
"Items": ["106.400000", "102.500000", "110.300000", "108.300000", "105.100000", "94.500000", "97.900000"]
},
"DimR": {
"Items": ["3516.000000", "4603.000000", "5819.000000", "7510.000000", "9688.000000", "10240.000000", "NULL"]
},
"DimCol": {
"Items": ["3516.000000", "4603.000000", "5819.000000", "7510.000000", "9688.000000", "10240.000000", "NULL"]
}
},
"Serie20_Point0": {
"DimX": {
"Items": ["20524.000000", "323943.600000", "32023.000000", "43868.000000", "59389.000000", "246478.900000", "NULL"]
},
"DimY": {
"Items": ["112.200000", "104.800000", "107.500000", "107.200000", "102.100000", "86.300000", "99.900000"]
},
"DimR": {
"Items": ["7182.000000", "9025.000000", "11353.000000", "15645.000000", "21294.000000", "21228.000000", "NULL"]
},
"DimCol": {
"Items": ["7182.000000", "9025.000000", "11353.000000", "15645.000000", "21294.000000", "21228.000000", "NULL"]
}
},
"Serie21_Point0": {
"DimX": {
"Items": ["5200.000000", "6469.000000", "7565.000000", "9034.000000", "13174.000000", "13436.000000", "NULL"]
},
"DimY": {
"Items": ["111.200000", "99.200000", "104.000000", "100.400000", "109.800000", "93.000000", "101.600000"]
},
"DimR": {
"Items": ["4546.000000", "5713.000000", "6744.000000", "8122.000000", "11944.000000", "12256.000000", "NULL"]
},
"DimCol": {
"Items": ["4546.000000", "5713.000000", "6744.000000", "8122.000000", "11944.000000", "12256.000000", "NULL"]
}
},
"Serie22_Point0": {
"DimX": {
"Items": ["6344.000000", "7958.000000", "9603.000000", "12339.000000", "16061.000000", "15758.000000", "NULL"]
},
"DimY": {
"Items": ["112.700000", "103.900000", "104.200000", "104.000000", "99.900000", "90.600000", "99.800000"]
},
"DimR": {
"Items": ["4549.000000", "5764.000000", "7023.000000", "9100.000000", "11932.000000", "11780.000000", "NULL"]
},
"DimCol": {
"Items": ["4549.000000", "5764.000000", "7023.000000", "9100.000000", "11932.000000", "11780.000000", "NULL"]
}
},
"Serie23_Point0": {
"DimX": {
"Items": ["6623.000000", "9014.000000", "10957.000000", "13656.000000", "19101.000000", "18707.000000", "NULL"]
},
"DimY": {
"Items": ["116.900000", "107.000000", "105.600000", "106.500000", "114.900000", "85.500000", "107.400000"]
},
"DimR": {
"Items": ["4853.000000", "6681.000000", "8209.000000", "10331.000000", "14581.000000", "14393.000000", "NULL"]
},
"DimCol": {
"Items": ["4853.000000", "6681.000000", "8209.000000", "10331.000000", "14581.000000", "14393.000000", "NULL"]
}
},
"Serie24_Point0": {
"DimX": {
"Items": ["3277.000000", "4234.000000", "5126.000000", "6672.000000", "8833.000000", "8484.000000", "NULL"]
},
"DimY": {
"Items": ["109.300000", "101.500000", "105.500000", "108.300000", "105.400000", "88.600000", "99.400000"]
},
"DimR": {
"Items": ["3589.000000", "4654.000000", "5650.000000", "7369.000000", "9771.000000", "9383.000000", "NULL"]
},
"DimCol": {
"Items": ["3589.000000", "4654.000000", "5650.000000", "7369.000000", "9771.000000", "9383.000000", "NULL"]
}
},
"Serie25_Point0": {
"DimX": {
"Items": ["6181.000000", "7627.000000", "8950.000000", "11532.000000", "14918.000000", "14636.000000", "NULL"]
},
"DimY": {
"Items": ["110.000000", "100.100000", "103.400000", "106.500000", "102.300000", "89.600000", "98.800000"]
},
"DimR": {
"Items": ["5163.000000", "6474.000000", "7714.000000", "10081.000000", "13213.000000", "13121.000000", "NULL"]
},
"DimCol": {
"Items": ["5163.000000", "6474.000000", "7714.000000", "10081.000000", "13213.000000", "13121.000000", "NULL"]
}
},
"Serie26_Point0": {
"DimX": {
"Items": ["61357.000000", "288732.400000", "95267.000000", "16535.400000", "321088.500000", "176870.700000", "NULL"]
},
"DimY": {
"Items": ["116.800000", "105.800000", "110.700000", "119.700000", "104.400000", "81.700000", "101.300000"]
},
"DimR": {
"Items": ["23130.000000", "28780.000000", "35210.000000", "49795.000000", "61592.000000", "61088.000000", "NULL"]
},
"DimCol": {
"Items": ["23130.000000", "28780.000000", "35210.000000", "49795.000000", "61592.000000", "61088.000000", "NULL"]
}
},
"Serie27_Point0": {
"DimX": {
"Items": ["2213.000000", "2823.000000", "3822.000000", "4916.000000", "6305.000000", "6452.000000", "NULL"]
},
"DimY": {
"Items": ["107.000000", "100.900000", "116.300000", "106.600000", "106.900000", "89.600000", "109.300000"]
},
"DimR": {
"Items": ["5847.000000", "7452.000000", "10079.000000", "12961.000000", "16592.000000", "16966.000000", "NULL"]
},
"DimCol": {
"Items": ["5847.000000", "7452.000000", "10079.000000", "12961.000000", "16592.000000", "16966.000000", "NULL"]
}
}
}
}
// Create and returns data source
var dataSource = new PP.DataSource(data);
return dataSource;
}
// Create a dictionary with bubble chart settings
function generateBubbles(bubblesCount, dataSource, visuals) {
// Set property values in settings dictionary
var baseSettings = {
"Version": "2",
"ShowBubbleHistory": "true",
"ChartArea": {
"Axes": {
"X": {
"Type": "X"
},
"Y": {
"Type": "Y"
}
}
},
"Legends": {
0: {
"Scale": "colorScale",
"Type": "Intervals"
},
1: {
"Scale": "rScale",
"Type": "Size"
}
},
"AreaSelectionAction": "ItemsSelection",
"UseSelectOnRightClick": true
};
// Set properties values for time scale in settings dictionary
baseSettings.Timeline = {
"StepsNames": ["2004", "2005", "2006", "2007", "2008", "2009", "2010"],
"StepDuration": "1000",
"DelayDuration": "500",
"ReturnToInitialState": "true",
"Margin": "0,8,10,8",
"ChartTimeline": undefined
};
// Set properties values for the X axis dimension
if (visuals.X) {
baseSettings.XVisual = {
"CoordinateMapping": {
"DimAttributeId": "DimX",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.NormalizationTransformer"
},
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Set property values for dimension by the X axis
if (visuals.Y) {
baseSettings.YVisual = {
"CoordinateMapping": {
"DimAttributeId": "DimY",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.NormalizationTransformer"
},
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Set property values for dimension by bubble size
if (visuals.R) {
baseSettings.Scales = baseSettings.Scales || {};
baseSettings.Scales['rScale'] = {
"Mode": "Uniform",
"IntervalsCount": "5",
"First": "10",
"Last": "30",
"NoData": "12",
"TypeArguments": "Double"
};
baseSettings.RVisual = {
"NumericMapping": {
"DimAttributeId": "DimR",
"Type": "Scale",
"Scale": "rScale",
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Set properties values for dimension by bubble color
if (visuals.Color) {
baseSettings.Scales = baseSettings.Scales || {};
baseSettings.Scales['colorScale'] = {
"Mode": "Uniform",
"Items": "#FFFF462C #FFEBAF36 #FFFF0900 #FFB1CA40 #FF6A8535",
"NoData": "#FFBFBFBF",
"TypeArguments": "Brush"
};
baseSettings.ColorVisual = {
"ColorMapping": {
"DimAttributeId": "DimCol",
"Scale": "colorScale",
"DataSource": "ds0",
"Type": "Scale",
"AutoSetup": "true"
}
}
}
// Set data source identifier
var ds0;
baseSettings.DataSources = {
'ds0': ds0 = {
'Id': 'ds0'
}
};
// Set dimensions names
var attNames = ds0.AttributesNames = {};
if (visuals['X'])
attNames['DimX'] = "Gross regional product, M. rubles";
if (visuals['Y'])
attNames['DimY'] = "Index of the physical volume of gross regional product, % to previous period";
if (visuals['R'])
attNames['DimR'] = "Gross regional product per capita, rubles";
if (visuals['Color'])
attNames['DimCol'] = "Gross regional product per capita, rubles";
// Get data series from the source
var series = ds0.Series = {};
for (var i = 0; i < bubblesCount; i++) {
var serie = series['Bubble' + i] = dataSource.getSeries()["Serie" + i + "_Point0"];
}
// Set data series settings
var series = baseSettings.Series = [];
var globalIds = baseSettings.GlobalItemsIds = {};
for (var i = 0; i < bubblesCount; i++) {
series[i] = {
'Symbol': {},
'Points': [{
'Value': 'Bubble' + i,
'Id': 'Bubble' + i
}]
};
globalIds['Bubble' + i] = 'Item' + i; } // Return bubble chart settings object return baseSettings; };
// Creates a bubble chart function createChart() { // Specify path to the root folder that contains resources files PP.resourceManager.setRootResourcesFolder("../resources/"); // Determines language settings for resources PP.setCurrentCulture(PP.Cultures.ru) // Get DOM element of the container, where a bubble chart is rendered var container = document.getElementById("bubbleChart"); // Create a bubble chart object bubbleChart = new PP.Ui.BubbleChart({
// Add custom data
CustomData: "Bubble chart 1"
}); // Create data source var ds = CreateDataSource();
// Create dictionary with bubble chart settings
var settings = generateBubbles(28, ds, {
'X': true,
'Y': true,
'R': true,
'Color': true
});
// Determine bubble chart settings
settings = PP.extend(settings, {
HistoryMode: PP.Ui.NoDataHistoryMode.Continue, // Displaying mode of values history for selected bubble chart bubble
ShowBubbleHistory: true, // Allow to display values history for specified series
ShowHistoryMode: PP.HoverMode.MouseOver, // Values history displaying on cursor hovering over
ShowBubblesWithNoData: true, // Allow to display bubble chart bubbles without data
ImagePath: '../build/img/' // Path to the folder with icons for bubble chart
}, true);
// Set bubble chart settings
bubbleChart.setSettings(settings); // Place bubble chart in the <div> block bubbleChart.addToNode(container); // Set bubble chart sizes bubbleChart.setWidth(551); bubbleChart.setHeight(500); // Set time axis step bubbleChart.getTimeline().setCurrentStep(0); } </script>
3. In the <body> tagspecify name of the function, that creates a bubble chart, as value of the onLoad attribute. Within this tag place a block with the bubbleChart identifier that will store the created bubble chart:
<body class="PPNoSelect" onselectstart="return false;" onload="createChart()"> <div id="bubbleChart" style="float:left;border: #CCCCCC 1px solid; padding: 5px; margin: 5px;"></div> </body>
To execute custom scripts for bubble charts, including the examples given in the pages that contain descriptions of properties, methods and events of this component and its constituent parts, place the code after the script specified above or in the browser console.
After the example execution the PP.Ui.BubbleChart component is placed on the HTML page:
See also: