Loading Another Pie Chart with onSeriesClick

4 posts, 0 answers
  1. LYNN
    LYNN avatar
    3 posts
    Member since:
    Jun 2013

    Posted 13 Aug 2013 Link to this post

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

    Posted 15 Aug 2013 Link to this post

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

    Posted 16 Aug 2013 Link to this post

    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
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 20 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top