Explode slices onSeriesClick

[Sam]

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

[Iliana Dyankova]

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

[Sam]

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.

[Iliana Dyankova]

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: 

function onSeriesClick(e) {
    if (e.category == "valueA") {
    //do something
    }
    else if (e.category == "valueB"){
    //do something
    }
    else if (e.category == "valueC"){
    //do something
    }
}

For more convenience I have created a sample project and attached it.

 

All the best,
Iliana Nikolova
the Telerik team

[Ä m o l]

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

[Jim]

@Amol - thanks!