How to explode Kendo pie chart wedge when clicked?

Question

I know how to explode a pie chart wedge initially (simply set explode to true for the relevant data item), but what I want to do is to have the wedge explode when clicked on, in JavaScript (the function bound to the seriesClick event). Naturally, I would want any other exploded wedge to be reset, so that there is only one exploded wedge at a time.

Of course, I could implement this by making an Ajax call to fetch the chart, passing a parameter to indicate the wedge that was clicked on, but this is woefully inefficient, and possibly annoyingly slow, depending on the connection and complexity of the data (and or the crunching required).

I have found one answer for the same question elsewhere, but the proposed solution doesn't work for the Kendo chart (properties are set that are not supported in Kendo).

If anyone has any experience in this regard, I would appreciate any advice you have for me.

Answer 1

I found this post in the Kendo forums that is asking for the same thing, and it looks like there may be a solution in the responses:

http://www.kendoui.com/forums/dataviz/chart/explode-slices-onseriesclick.aspx

The gist of it is that you need to update the "explode" field in your data and then re-draw the chart after clicking on it. This can be done with the "seriesClick" event:

    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();        
    }

I put together a working JSFiddle based on this: http://jsfiddle.net/derickbailey/FXs6b/

HTH