Loading Another Pie Chart with onSeriesClick

[LYNN]

I have pie chart that displays user data for all sites.  I want to be able to create another pie chart for only one site depending on the item clicked within the existing pie chart.  When I try to do that, however, I'm only able to load an empty bar chart, which ends up replacing the existing pie chart..

My code looks like this:


  <div id="chart" style="width:50%;"></div>
   <script>
       function createChart() {
           $("#chart").kendoChart({
               dataSource: {
                   transport: {
                       read: {
                           url: "getUserCountsBySite.admin?=siteId" + siteId,
                           dataType: "json"
                       }
                   },                            
               },

            title: {
               position: "top",
               text: "User Distribution by Site"
           },
           chartArea: {
               background: ""
           },                 
               seriesDefaults: {
               
                        type: "pie",
                        labels: {
                     visible: true,
                     template: "#= category # - #= kendo.format('{0:P}', percentage)#"
           }
        },                   
               
               series: [{
                           startAngle: 150,
                            field: "userCount",
                            categoryField: "description",
                          explodeField: "userCount"
                                   
               }],
               
               tooltip: {
                   visible: true,
                   format: "N0",
                   template: "#= category # - #= kendo.format('{0:P}', percentage)#"
               },
               
                seriesClick: onSeriesClick          
           });
       }
   function getDistributionBySubs(siteId) {
             $.ajax({
           type: "GET",
           url: "getUserCountsBySubscription.admin?siteId=" + siteId,
           success: function(response) {
                               
                     $("#chart").kendoChart();

}
 });
}
       function onSeriesClick(e) {
           console.log(kendo.format("Series click :: {0} ({1}): {2}",
               e.series.name, e.category, e.value));
               getDistributionBySubs(siteId);
               
               
       }
   
       $(document).ready(createChart);
 
   </script>
</div>   

[Iliana Dyankova]

Hello Lynn,

The observed issue is caused by the getDistributionBySubs() function actually recreates the chart which is initialized from <div id="chart"...>. In case you would like to create a different chart you should create one more <div> element with different id and initialize the new chart from it. For example:

function onSeriesClick(){
  //....
  getDistributionBySubs();
}

function getDistributionBySubs(){
  $("<div id='chart2'></div>").appendTo('body');
  $("#chart2").kendoChart({
        //new Chart's configuration
  });
}

Regards, Iliana Nikolova
Telerik

[LYNN]

Thank you, Iliana! 

I am facing two more issues that I'd appreciate your assistance with: 

-How can I wrap the text contained within categoryField?
-Is it possible to assign series color to each slice depending on the value?  I am trying seriesColors: ["#99c900", "#ff8517", "#d15b47"], but when I add a fourth color, it's not being accepted! I will get two colors that are exactly the same:

  series: [{
             field: "userCount",
             categoryField: "description",
            dataField: "userCount"

        }],
        
        seriesColors: ["#99c900", "#ff8517", "#d15b47"],



Thanks again

[Hristo Germanov]

Hello LYNN,

1) I am not sure what you want to do. Could you please give me more information about your scenario?
2) You need to build your data before chart binding. For example: http://jsbin.com/idEDAKE/2/edit

Regards,
Hristo Germanov
Telerik