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

Column Chart with more categoryFields

7 Answers 20 Views
Charts
This is a migrated thread and some comments may be shown as answers.
MV ČR
Top achievements
Rank 1
MV ČR asked on 20 Feb 2020, 02:00 PM

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

7 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 24 Feb 2020, 01:10 PM

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.

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

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
MV ČR
Top achievements
Rank 1
answered on 25 Feb 2020, 09:30 AM

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>
0
Preslav
Telerik team
answered on 27 Feb 2020, 09:23 AM

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

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
MV ČR
Top achievements
Rank 1
answered on 27 Feb 2020, 10:20 AM
0
Preslav
Telerik team
answered on 02 Mar 2020, 01:01 PM

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

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
MV ČR
Top achievements
Rank 1
answered on 03 Mar 2020, 02:14 PM

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.

0
Preslav
Telerik team
answered on 05 Mar 2020, 02:28 PM

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

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
MV ČR
Top achievements
Rank 1
Answers by
Preslav
Telerik team
MV ČR
Top achievements
Rank 1
Share this question
or