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.