Example of Creating the BubbleChart Component

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:

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:

BubbleChart