The markup used to create a bar chart control resembles the following:
<div id="wijbarchart" data-win-control="C1.UI.Chart.BarChart" 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:'Total Hardware'}}, header:{type:C1.UI.Chart.ChartTitle, text:'Hardware Distribution'}}">
</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">
function ready(element, options) {
<!--Initialize the control-->
var barchart = document.getElementById("wijbarchart").winControl;
<!--Create the seriesList that contains chart data-->
barchart.seriesList = [{
label: "West",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
}, {
label: "Central",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
}, {
label: "East",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
}];
<!--Add a hint-->
barchart.hint.content = function () {
return this.data.label + '\n ' + this.y + '';
};
}
<!--Call the WinJS.UI.Pages.define function-->
function updateLayout(element, viewState) {
// TODO: Respond to changes in viewState.
}
WinJS.UI.Pages.define("/default.html", {
ready: ready,
updateLayout: updateLayout
});
</script>