The markup used to create a composite chart control resembles the following:
<div id="wijcompositechart" data-win-control="C1.UI.Chart.CompositeChart" 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 compositechart = document.getElementById("wijcompositechart").winControl;
<!--Add a hint-->
compositechart.hint = {
content: function () {
return this.label + '\n ' + this.y + '';
}
},
<!--Create the seriesList that contains chart data-->
compositechart.seriesList = [{
type: "column",
label: "West",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
}, {
type: "column",
label: "Central",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
}, {
type: "column",
label: "East",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
}, {
type: "line",
label: "Steam1",
legendEntry: true,
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 6, 2, 9, 5]
},
markers: {
visible: true,
type: "circle"
}
}]
}
<!--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>