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

Best way to dynamically build Pareto chart

7 Answers 139 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Boyan
Top achievements
Rank 1
Boyan asked on 04 Feb 2020, 09:53 PM

Hi,

I'm trying to implement some kind of logic to dynamic build Pareto chart using kendo jquery. Please find my example here - https://dojo.telerik.com/AhabIZow and a short description how it looks like:

1. configured series outside of the scope - seriesSettings. It should be able to contain more series (not only pareto)

2. depending on the seriesSettings, set the type = column and add a line series

3. handle the datasource change event and add values behind the calculated percent. I used to add the values in the data items behind each category as expect the line chart to take the maximum. 

In the end I face a problem as the columns are not ordered by values descending. Another thing is that the part with the custom aggregation logic may be is not necessary. I tried using the datasource groupage, but it creates a new series per each category. Could you please advise how to fix these problems and is there a better way or event handling to achieve the Pareto requirements.

Thanks, Boyan.

7 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 06 Feb 2020, 12:38 PM

Hi Boyan,

In order to apply a sort that is different from the default one, you would have to set the sort option of the data source. Namely:

       var dataSource = new kendo.data.DataSource({
          data: [
            { name: "Ham", category: "Food", value: 25, anotherValue: 12 },
            { name: "Tea", category: "Beverages", value: 50, anotherValue: 18 },
            { name: "Coffee", category: "Beverages", value: 12, anotherValue: 6 },
          ],
          sort: { field: "value", dir: "desc"},
          change: onChange
        });

As per the aggregate that should be calculated, the Kendo UI Chart is designed to work with flat data. Introducing a group along with the aggregate creates a hierarchical data source, therefore, the data would be not understandable for the chart. 

If you would like to utilize the grouped data source, you should flatten it before passing it to the chart.

I hope you find those clarifications helpful.

 

Regards,
Tsvetomir
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
Boyan
Top achievements
Rank 1
answered on 06 Feb 2020, 03:17 PM

Hi Tzvetomir,

Thanks for your reply. 

The sorting should be made on the aggregated sum instead of the values. So I need somehow to sort the chart columns descending. I found this example https://docs.telerik.com/kendo-ui/controls/charts/how-to/sorting/sort-stacked-series-groups, but it works as redraw in the render event. So it will be too late to calculate the percent values and add the line series as required in the pareto. On the other way, in case of group the datasource, and then set the result of the view() as a chart datasource, it means there is no place for another series using the not grouped datasource. So that's why I preffered to make this eagly flattering on my first example. But I wonder how to sort the datasource to fit the descending order by the sum values. Any idea?

Thanks, Boyan.

0
Accepted
Nikolay
Telerik team
answered on 10 Feb 2020, 03:45 PM

Hi Byan,

My name is Nikolay and I am stepping in while my colleague Tsvetomir is absent.

I could suggest custom comparing the DataSource items with sort.compare on dataBound Chart event. This way the sorting will happen once the Chart is bound to the data from its data source.

dataBound: function(e){
              var data = e.sender.dataSource.data();
              var axis = e.sender.options.categoryAxis;
              axis.categories = axis.categories.sort(function compare(a, b) {
              
                var itemsWithCategoryA = data.map(x=> x.category == a ? x.value: 0).reduce((a, b) => a + b, 0);
                 var itemsWithCategoryB = data.map(x=> x.category == b? x.value:0).reduce((a, b) => a + b, 0);
                if (itemsWithCategoryA > itemsWithCategoryB) {
                  return -1;
                }
                if (itemsWithCategoryA < itemsWithCategoryB ) {
                  return 1;
                }
                return 0;
              });
              }

This could be observed in the following Dojo demo:  https://dojo.telerik.com/ONAjEjUP

Let me know if this resolves the situation.

Regards,
Nikolay
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
Boyan
Top achievements
Rank 1
answered on 10 Feb 2020, 05:12 PM

Hi Nikolay.

I appreciate your step in and thanks for your reply.

The dojo is missing or I cannot open it. Could you please check its address again?

Otherwise here is what I made out of your advice - https://dojo.telerik.com/IkOjuRuz . And it works perfect. 

Thanks again for your help. Best Regards, Boyan.

0
Nikolay
Telerik team
answered on 12 Feb 2020, 10:59 AM

Hi Boyan,

Apologies for the empty Dojo. I have revised it and it could be observed at the below link. However, from what I see on the provided demo you have already come to the solution based on my code snippet:

Let me know if I can assist with anything further on this topic.

Kind regards,
Nikolay
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
Boyan
Top achievements
Rank 1
answered on 12 Feb 2020, 07:55 PM

Hi Nikolay.

No, it's just what I was looking for. Thanks for your assist. I hope that the pareto example could be valuable to somebody else as well. 

Best Regards, Boyan.

0
Nikolay
Telerik team
answered on 14 Feb 2020, 01:37 PM

Hi Boyan,

You are most welcome. If there is anything else we could help with do not hesitate to contact us.

Forum threads are always a good resource of information and knowledge and so this one will surely help others.

Regards,
Nikolay
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
Boyan
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Boyan
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or