The markup used to create a line chart control resembles the following:
<div id="wijlinechart" data-win-control="C1.UI.Chart.LineChart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px"
data-win-options="{header:{type:C1.UI.Chart.ChartTitle, text:'World of Warcraft Players by Region'}, showChartLabels:false}">
</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 linechart = document.getElementById("wijlinechart").winControl;
<!--Create the seriesLise that contains chart data-->
linechart.seriesList=[{
label: "North America",
legendEntry: true,
data: {
x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
},
markers: {
visible: true,
type: "circle"
}
},{
label: "Europe",
legendEntry: true,
data: {
x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
},
markers: {
visible: true,
type: "circle"
}
},{
label: "Asia",
legendEntry: true,
data: {
x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
},
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>