Is there a way to make the slices in a pie chart explode onClick event?

Hi Sam,

Series definition contains information about all of the pieces in Kendo UI Pie Chart and I am not sure why do you need  to hook up onClick event on every slice. Could you please give more details about your scenario?


Greetings,
Iliana Nikolova
the Telerik team

Thanks for your reply, i'm trying to build a custom drill-down chart, so depending on which slice a user clicks it would redirect you to a different report/page etc.

Hello Sam,

You need to define the behavior for the particular slices of Kendo UI Pie Chart using category name in the onSeriesClick function.
For example: 
For more convenience I have created a sample project and attached it.

 

All the best,
Iliana Nikolova
the Telerik team

Hi Sam

Please check the code give below... for exploding.

 $( "#chart" ).kendoChart( {
            theme: "blueOpal",
            title: {
                text: "Testing"
            },
            legend: {
                position: "left"
            },
            dataSource: {
                data: mainData
            },
            seriesDefaults: {
                labels: {
                    visible: true
                }
            },
            series: [{
                type: "pie",
                field: "percentage",
                categoryField: "source",
                explodeField: "explode"
            }],
            tooltip: {
                visible: true,
                template: "${ category } - ${ value }"
            },
            seriesClick: MainChartSeriesClick
        } );
    }

    MainChartSeriesClick = function ( e )
    {
        $( e.sender.dataSource.options.data ).each( function ( i, item )
        {
            if ( item.source != e.category )
            {
                item.explode = false;
            }
            else
            {
                item.explode = true;
            }
        } );
        createChart();
    }

    $( document ).ready( function ()
    {
        setTimeout( function ()
        {
            createChart();
        }, 100 );
    } );

@Amol - thanks!