Explode slices onSeriesClick

6 posts, 0 answers
  1. Sam
    Sam avatar
    10 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2012 Link to this post

    Is there a way to make the slices in a pie chart explode onClick event?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sam
    Sam avatar
    10 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2012 Link to this post

    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.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ä m o l
    Ä m o l avatar
    14 posts
    Member since:
    Oct 2008

    Posted 17 May 2012 Link to this post

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



  6. Jim
    Jim avatar
    52 posts
    Member since:
    Apr 2009

    Posted 02 May 2013 Link to this post

    @Amol - thanks! 
Back to Top