Wijmo UI for the Web
BubbleChart Markup and Scripting
Wijmo User Guide > Widgets > Chart Widgets > BubbleChart > BubbleChart Markup and Scripting

The HTML markup for a wijBubbleChart widget looks like this.

Markup
Copy Code
<div id="wijbubblechart" style="width: 400px; height: 300px"></div>

You can initialize the widget with the following jQuery script.

Script
Copy Code
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>

<script type="text/javascript">
require(["wijmo.wijbubblechart"], function () {
$(document).ready(function () {
    $("#wijbubblechart").wijbubblechart({
        showChartLabels: false,
        axis: {
            y: {text: "Life Expectancy"},
            x: {text: "Income"}
        },
        hint: {
            content: function () {return this.data.label;}
        },
        header: {text: "Wealth and Health of Nations - 2010"},
        seriesList: [
        {
            label: "China",
            data: { y: [73], x: [7931], y1: [1340] },
            markers: {type: "tri"}
        }, {
            label: "India",
            data: { y: [65], x: [2972], y1: [1150] },
            markers: {type: "diamond"}
        }, {
            label: "USA",
            data: { y: [78], x: [42066], y1: [309] },
            markers: {type: "circle"}
        }, {
            label: "Japan",
            data: { y: [83], x: [30866], y1: [126] },
            markers: {type: "cross"}
        }, {
            label: "Russia",
            data: { y: [69], x: [14318], y1: [140] },
            markers: {type: "invertedTri"}
        }, {
            label: "Congo",
            data: { y: [48], x: [374], y1: [72] },
            markers: {type: "box"}
        }]
    });
});
});
</script>

The markup and script featured here results in the following live widget. Mouse over each data point to see the hint for that element, and click a legend item to toggle that series in the chart.

See Also

Reference