Column Chart with more categoryFields

[MV ČR]

Hello,

I am dealing with data split into two categories.

My project is based on this : https://demos.telerik.com/kendo-ui/bar-charts/grouped-data

I need it to be likeit is in the attachment

I think I need something like extra categoryField in a serie

[Preslav]

Hi,

A possible solution to achieve the desired outcome is to add a second categoryAxis. In the second categoryAxis, define a categories array. This array could be based on the data of the records.

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis
• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.categories

For example, check this Dojo - https://dojo.telerik.com/acoyoRIg

Please, give this a try, and let me know if it works for you.

 

Regards,
Preslav
Progress Telerik

[MV ČR]

Hi Preslav,

thanks for dealing with my problem but unfortunately in my case it doesnt work well.I provide you a code and data I am dealing with.As you can see startPoint is showing just at the beginning displaying "bb" but not "cc" etc.Another problem is that sorting doesnt work for field Country.

<div id="example">
     <div class="demo-section k-content wide">
       <div id="chart2"></div>
     </div>
     <script>
       var seriesData2 = [
           { "startPoint": "bb", "Country": "\"a\"", "Month": "1", "Records": 2 },
           { "startPoint": "bb",  "Country": "\"a\"", "Month": "6", "Records": 5 },
           { "startPoint": "cc",  "Country": "\"a\"", "Month": "10", "Records": 1 },
           { "startPoint": "cc",  "Country": "\"a\"", "Month": "11", "Records": 10 },
           { "startPoint": "dd",  "Country": "\"b\"", "Month": "10", "Records": 1 },
           { "startPoint": "dd",  "Country": "\"b\"", "Month": "11", "Records": 15 },
        { "startPoint": "gg", "Country": "\"b\"", "Month": "9", "Records": 5 }];

        var stocksDataSource = new kendo.data.DataSource({
            "data":seriesData2,
         group: {
           field: "Month"
         },
         sort: {
           field: "Country",
           dir: "asc"
         },

       });



   var subcategory = [];

      stocksDataSource.one("requestEnd", function(event){
         // We need the Timeout so the client-side sorting/grouping is complete
         setTimeout(function(){
           stocksDataSource.view().forEach(function(groupElement){
             groupElement.items.forEach(function(element){
               if (subcategory.indexOf(element.Country) === -1) {
                 subcategory.push(element.Country);
               }
             });

             createChart();
           });
         });
       });
       stocksDataSource.read();
   function createChart() {
         $("#chart2").kendoChart({
           dataSource: stocksDataSource,
           series: [{
             type: "column",
             field: "Records",
           }],
           legend: {
             position: "bottom"
           },
           categoryAxis: [{
             field: "startPoint"
           },{
             categories: subcategory
           }]
         });
       }
     </script>
   </div>

[Preslav]

Hi,

Based on the provided information, I am afraid that I cannot understand what the desired outcome of the chart should be. Could you please send me a mockup picture of it? Based on it, I will try to configure the Chart with the provided data.

 

Regards,
Preslav
Progress Telerik

[MV ČR]

hi,

here you are 

[Preslav]

Hi,

Based on the provided screencast, I prepared the following Dojo: https://dojo.telerik.com/AyEDuxOh

Please, check it, and let me know if you have any further questions.

 

Regards,
Preslav
Progress Telerik

[MV ČR]

Hi,

It looks good on first look, however when I added an extra data 

{ "startPoint": "gu", "Country": "\"b\"", "Month": "9", "Records": 5},
{ "startPoint": "gg", "Country": "\"b\"", "Month": "10", "Records": 5}

the subcategory line goes wrong and doesnt divide startPoints into Countries accordingly.

[Preslav]

Hi,

Indeed, when the sub-categories hold a different amount of data, configuring the second category axis is not doable.

In this case, you can add a sub-category of every category. For example - https://dojo.telerik.com/EJevUHAL/2

 

Regards,
Preslav
Progress Telerik