The markup used to create a pie chart control resembles the following:
<div id="wijpiechart" data-win-control="C1.UI.Chart.PieChart" class="ui-widget ui-widget-content ui-corner-all" data-win-options="{ radius:140}">
</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 piechart = document.getElementById("wijpiechart").winControl;
<!--Create the seriesList that contains chart data-->
piechart.seriesList = [{
label: "MacBook Pro",
legendEntry: true,
data: 46.78,
offset: 15
}, {
label: "iMac",
legendEntry: true,
data: 23.18,
offset: 0
}, {
label: "MacBook",
legendEntry: true,
data: 20.25,
offset: 0
}, {
label: "Mac Pro",
legendEntry: true,
data: 5.41,
offset: 0
}, {
label: "Mac mini",
legendEntry: true,
data: 3.44,
offset: 0
}];
}
<!--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>