This is a migrated thread and some comments may be shown as answers.

Kendo pie chart

3 Answers 49 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Veteran
Dev asked on 26 Dec 2019, 08:41 AM

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


3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 26 Dec 2019, 12:55 PM

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.
0
Dev
Top achievements
Rank 1
Veteran
answered on 30 Dec 2019, 03:14 PM

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?

0
Accepted
Preslav
Telerik team
answered on 01 Jan 2020, 01:05 PM

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.
Tags
Charts
Asked by
Dev
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Dev
Top achievements
Rank 1
Veteran
Preslav
Telerik team
Share this question
or