Best way to dynamically build Pareto chart

[Boyan]

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.

[Tsvetomir]

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

[Boyan]

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.

[Nikolay]

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

[Boyan]

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.

[Nikolay]

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:

• https://dojo.telerik.com/UWoyofUq

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

Kind regards,
Nikolay
Progress Telerik

[Boyan]

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.

[Nikolay]

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