MVC Exploding Pie Chart

2 posts, 0 answers
  1. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 16 Jun Link to this post

    I'm trying to add an exploding function to my pie chart. I've been able to locate the follow javascript code to assist from the Kendo UI documentation:

    seriesClick: function(e){
              $.each(e.sender.dataSource.view(), function() {
                // Clean up exploded state
                this.explode = false;
              });

              // Disable animations
              e.sender.options.transitions = false;

              // Explode the current slice
              e.dataItem.explode = true;
              e.sender.refresh();
            }


    Using the MVC version I'm call the series click with:

            .Events(events => events
                .SeriesClick("explodingPie")
            )

    Along with the following Javascript:

    function explodingPie(e) {
        $.each(e.sender.dataSource.view(), function() {
                this.explode = false;
              });
              e.dataItem.explode = true;
              e.sender.refresh();
            }

    I'm unsure why
    $.each(e.sender.dataSource.view(), function() { 
    isn't working properly.

  2. Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 17 Jun Link to this post

    Hi Justin,

    Please take a look at the attached project illustrating an exploding function for a pie chart.  

    The Kendo Chart's ExplodeField is set to the model's IsExploded property.

    .Series(s =>
       {
           s.Pie(
               model => model.Percentage,
               model => model.Source,
               null,
               model => model.IsExploded
           )
           ...
       })

    Here are the steps I took in my explodingpie function:
    1. For each dataItem on my current page (using dataSource.view()), set the ExplodeField to false. 
    2. Turn off the animation using the transitions configuration.
    3. Set the clicked Series's ExplodeField to true.
    4. Refresh the pie chart using .refresh().

    Here is the event handler and function:
    .Events(e => e.SeriesClick("explodingPie"))
     
        function explodingPie(e) {
            $.each(e.sender.dataSource.view(), function () {
                this.IsExploded = false;
            });
            e.sender.options.transitions = false;
            e.dataItem.IsExploded = true;
            e.sender.refresh();
        }

    Hope this helps!

    Regards,
    Patrick
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top