Kendo UI - Exploding Pie Chart On Click

Exploding a pie chart segment when it is clicked

by derickbailey

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
    
        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
        </div>

CSS

thead {
    border-bottom: 1px solid #ccc;
}

th {
    padding: 5px;
    font-weight: bold;
}

td {
    padding: 5px;
}

JavaScript

var data = [
    {
        "source": "Hydro",
        "percentage": 22,
        "explode": true
    },
    {
        "source": "Solar",
        "percentage": 2
    },
    {
        "source": "Nuclear",
        "percentage": 49
    },
    {
        "source": "Wind",
        "percentage": 27
    }
];

function createChart() {
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: "Break-up of Spain Electricity Production for 2008"
        },
        legend: {
            position: "bottom"
        },
        dataSource: {
            data: data
        },
        series: [{
            type: "pie",
            field: "percentage",
            categoryField: "source",
            explodeField: "explode"
        }],
        tooltip: {
            visible: true,
            template: "${ category } - ${ value }%"
        },
        seriesClick: function(e){
          $( e.sender.dataSource.options.data ).each( function ( i, item )
          {
            if ( item.source != e.category )
            {
                item.explode = false;
            }
            else
            {
                item.explode = true;
            }
          } );
          createChart();        }
    });
}

setTimeout(function() {
    // Initialize the chart with a delay to make sure
    // the initial animation is visible
    createChart();

    $("#example").bind("kendo:skinChange", function(e) {
        createChart();
    });
}, 400);