Dynamic series and showing the data in three dimensions.

[Jud]

Hi I am new to Kendo UI. This is great I like it. I have a problem. I have the data in the following format:

var data = [{ "Region": "Pakistan", "OS": "Windows", "Rank": 1, "TotalUsers": 265 },
                     { "Region": "United States", "OS": "IPhone", "Rank": 1, "TotalUsers": 145 },
                     { "Region": "United States", "OS": "Android", "Rank": 1, "TotalUsers": 125 },
                     { "Region": "India", "OS": "Android", "Rank": 1, "TotalUsers": 32 }
                     ];

I want to show the "Region" wise data. Like, in which region (Region), which operating system(OS)  is used by how many users (TotalUsers).  I referred to the following article to solve this problem, but all in vain.

http://www.kendoui.com/forums/ui/chart/multiple-series-in-datasource-dynamic.aspx

Below is my complete code:

 $(document).ready(function () {

     //Note that there may be as many regions as there are countries in the world. So I need to add the chart series dynamically.

      var data = [{ "Region": "Pakistan", "OS": "Windows", "Rank": 1, "TotalUsers": 265 },
                     { "Region": "United States", "OS": "IPhone", "Rank": 1, "TotalUsers": 145 },
                     { "Region": "United States", "OS": "Android", "Rank": 1, "TotalUsers": 125 },
                     { "Region": "India", "OS": "Android", "Rank": 1, "TotalUsers": 32 }
                     ];

         var dataSource = new kendo.data.DataSource({
             data: data,
             group: {
                 field: "Region",
                 dir: "asc"
             }
         });

         dataSource.read();
         var view = dataSource.view();
         var chartSeries = [];

         for (var groupIx = 0; groupIx < view.length; groupIx++) {
             var group = view[groupIx];
             chartSeries.push({
                 field: "TotalUsers",
                 name: group.value
             });
         }


         $("#chart").kendoChart({
             theme: $(document).data("kendoSkin") || "default",

             transitions: true,

             title: {
                 text: "My Chart Title"
             },
             seriesDefaults: {
                 type: "column",
                 stack: true

             },

             dataSource: data,

             series: chartSeries,


             tooltip: {
                 visible: true,
                 format: "{0}"
             },


             categoryAxis: {
                 field: "OS",
                 labels: {
                     rotation: 45

                 }
             }
         });
     });
   
Attached is an example of the desired chart.

[Atanas Korchev]

Hi,

 We prepared this demo for you which shows the required steps:

Regards,
Atanas Korchev
the Telerik team

[Jeffrey]

Where is the demo showing this??

[Iliana Dyankova]

Hi Jeffrey,

Here is the jsFiddle example, which illustrates a Kendo UI Chart with grouped data.
I hope this helps. 

Regards,

Iliana Nikolova
the Telerik team

[Jeffrey]

Thanks, that does help some.

Given that example, I just don't understand how you relate the data to your categories.  I see you group by OS, does the chart just assume that each row in the group is the category, in order.

In the chart you do this:  categories: ["Pakistan", "United States", "India"],

It would be nice to have a "Country" data element and have those be your categories, does that make sense?  Here is what I mean: 

My Data:
Month
Year
Value
Example

Jan, 2010, 400
Jan, 2011, 440
Jan, 2012, 500
Feb, 2010, 600
Feb, 2011, 650

Month is the category, Year is the Series.  This way, i wouldn't have to fill in Gaps.  In this chart, Jan would be the first Category, with 3 series elements and Feb would be Second with 2 Series elements.  In your example, if I had all 12 months in the data, and the max number of series in my result was 4, I would just have to go in and put zeroes for the missing categories.  I can do that, but would be nice to be able to bind the categories.  Would be nice to know if this is something that I might hope to one day be supported or a pipe dream lol.

Anyway, really appreciate the response.  Gives me something to go and try out.