Doughnut Chart

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.dv.js"></script>
<script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
        <div style="padding: 5px">
            <span id="tooltipValue" style="font-family: Arial; font-size: 11px;">${item.Label}, Budget: $${item.Budget}</span>    
        </div>
</script>

<script id="savingsTooltipTemplate" type="text/x-ig-tmpl">
        <div style="padding: 5px">
            <span id="tooltipValue" style="font-family: Arial; font-size: 11px;">${item.Label}, Saves: $${item.savings}</span>    
        </div>
</script>


            <div id="chart"></div>

JavaScript

$(function () {

        var data = [
                        { "savings": 230, "Budget": 600, "Label": "Adi" },
                        { "savings": 100, "Budget": 400, "Label": "Sam" },
                        { "savings": 250, "Budget": 550, "Label": "Tom" },
                        { "savings": 22, "Budget": 300, "Label": "Mark" },
                        { "savings": 130, "Budget": 650, "Label": "Dave" },
                        { "savings": 54, "Budget": 200, "Label": "Sally" }
        ];

        var array = new Array();
        $("#chart").igDoughnutChart({
            width: "550px",
            height: "550px",
            innerExtent: 10,
            allowSliceExplosion: true,
            allowSliceSelection: true,
            sliceClick: function (e, ui) {
                ui.slice.isSelected = !ui.slice.isSelected;
                ui.slice.isExploded = !ui.slice.isExploded;
                array.push(ui.slice);
                $("#selectedItem").empty();
                for (var i = 0; i < array.length; i++) {
                    if (array[i].isSelected) {
                        $("#selectedItem").append("<p id=" + array[i].item.Label + ">" + array[i].item.Label + " recieves " + array[i].item.Budget + "$ and manage to saves " + array[i].item.savings + "$.</p>");
                    }
                    if (!(array[i].isSelected)){
                        $("#" + array[i].item.Label).remove();
                        
                    }
                }
            },
            series:
                [
                    {
                        name: "Budget",
                        labelMemberPath: "Label",
                        valueMemberPath: "Budget",
                        dataSource: data,
                        labelsPosition: "bestFit",
                        brushes: ["#B284BE", "#5D8AA8", "#C9FFE5", "#7CB9E8", "#F19CBB", "#FAEBD7"],
                        selectedStyle: { fill: "lightpink", stroke: "black" },
             ...