Kendo pie chart

4 posts, 1 answers
  1. n/a
    n/a avatar
    40 posts
    Member since:
    Jan 2018

    Posted 26 Dec 2019 Link to this post

    Hi,

    We need the below option to be implemented on the Kendo pie chart.
    1) How do we merge the below 2% series value in other series value? Video link mentioned below for your reference.
    2) We need to show the merged value data in the tool-tip. I have added the video link on the pie chart working and screenshot of the code & data-source. Can you please check and help with this?

    Video link (old&new) ,  screenshot 1 , screenshot 2


  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    844 posts

    Posted 26 Dec 2019 Link to this post

    Hello, Rick,

    Thank you for the provided resources.

    The screenshot of the code snippet demonstrates that the chart is bound to local data. This means that you could programmatically remove the less than 2 percent data series and create a new one combining them all. To display the series values that form it, you can collect them in a variable and use a template as a function, for example:

    https://dojo.telerik.com/@bubblemaster/otowaWeW/3

    var combinedPercentage = [];
            for(var i=0; i < data.length; i++){   
              if(data[i].percentage < 2){
                combinedPercentage.push(data[i].percentage);
                data.splice(i,1);
                i--;
              }
            }
    
            data.push({
              source: "Other",
              percentage:2,
              combinedPercentage: combinedPercentage.join(",")
            });
    
             tooltip: {
                  visible: true,
                  template: function(e){
                    if(e.category !== "Other"){
                      return e.category + " - " + e.value + " %"
                    } else {
                      return "Other - " + e.dataItem.combinedPercentage + " %"
                    }
                  }
                }

    Have a look at the provided runnable example and let me know what you think.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. n/a
    n/a avatar
    40 posts
    Member since:
    Jan 2018

    Posted 30 Dec 2019 in reply to Alex Hajigeorgieva Link to this post

    Hello, Alex Hajigeorgieva,

    Thank you for reply :).

    The provided solution works based on the minimum of data source value. We need the value below  2% after the pie chart % conversion & the values should be loaded in the tool tip screenshot 1 , screenshot 2 and screenshot 3. Screenshot mentioned for your reference. Does the Kendo pie chart have a threshold value option?

  4. Answer
    Preslav
    Admin
    Preslav avatar
    522 posts

    Posted 01 Jan Link to this post

    Hi Rick,

    To achieve the desired outcome we can manually calculate the percentages before the data is assigned. For example:

    var totalCount = 0;
    
    for(var i=0; i < data.length; i++){   
        totalCount += data[i].count;
    };
    
    for(var i=0; i < data.length; i++){   
        var percentage = data[i].count / totalCount * 100;
        if(percentage < 2){
    //...
    The modified Dojo is available here - https://dojo.telerik.com/EReGONiz

    On a side note, at this stage, the Kendo Charts do not support threshold values, and thus, we have to use the above solution.

    I hope this helps.

     

    Regards,
    Preslav
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top