The markup used to create a bubble chart control resembles the following:
<div id="wijbubblechart" data-win-control="C1.UI.Chart.BubbleChart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;"
data-win-options="{axis:{type:C1.UI.Chart.ChartAxes, y:{type:C1.UI.Chart.ChartAxis, text:'Units Sold in Billions'}}, chartLabel:{type:C1.UI.Chart.BubbleChartLabel, chartLabelFormatString:'c2\'kkk\''}, header:{type:C1.UI.Chart.ChartTitle, text:'Sales Trends in Top-Selling WorldWide Cars'}, minimumSize:3, maximumSize:15}">
</div>
The following script sample contains the script needed to initialize the control and the seriesList option which gives the chart data to render:
<script type="text/javascript">
<!--Initialize the chart-->
function ready(element, options) {
var bubblechart = document.getElementById("wijbubblechart").winControl;
<!--Add a hint to the chart-->
bubblechart.hint = {
content: function () {
return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1;
}
},
<!--Create the seriesList chart data-->
bubblechart.seriesList = [{
label: "Toyota",
legendEntry: true,
data: {
x: [2006, 2007, 2008, 2009, 2010],
y: [5, 6, 8, 7, 8.5], y1: [4, 4.4, 5.1, 5.5, 5.7]
}
}, {
label: "General Motors",
legendEntry: true,
data: {
x: [2006, 2007, 2008, 2009, 2010],
y: [3, 4, 6, 7.5, 8], y1: [2, 2.5, 3, 4, 5]
}
}, {
label: "Volkswagon",
legendEntry: true,
data: {
x: [2006, 2007, 2008, 2009, 2010],
y: [4, 5, 6.5, 7.3, 6.6], y1: [2, 2.5, 4.5, 6, 5.5]
}
}, {
label: "Hyundai",
legendEntry: true,
data: {
x: [2006, 2007, 2008, 2009, 2010],
y: [6, 1, 5, 2, 4], y1: [2, 3, 4.5, 1.5, 1]
}
}, {
label: "Ford",
legendEntry: true,
data: {
x: [2006, 2007, 2008, 2009, 2010],
y: [6, 2, 3, 4.6, 5], y1: [4.5, 4, 3.8, 3, 2]
}
}]
}
<!--Call the WinJS.UI.Page.define function-->
function updateLayout(element, viewState) {
// TODO: Respond to changes in viewState.
}
WinJS.UI.Pages.define("default.html", {
ready: ready,
updateLayout: updateLayout
});
</script>