Knockout Ignite Pie Chart

by CodeRenaissance

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.datachart.knockout-extensions.js"></script>

<div id="knockoutContainer">
	<div id="chartWidth" data-bind="text:igPieChart.width"></div>
	<div id="chart" data-bind="igDataChart:igPieChart"></div>
</div>

CSS

#chart {
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
    }

JavaScript

$(function () {

            var data = [
                { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
            ];

            var viewmodel = {
              igPieChart:{
                    width: "435px",
                    height: "435px",
                    dataSource: data, //JSON data defined above
                    valueMemberPath: "Pop2008",
                    labelMemberPath: "CountryName",
                    labelsPosition: "bestFit"
              }
            };
            
            ko.applyBindings(viewmodel);

        });