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

Series in columns of datasource

1 Answer 84 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 09 Oct 2013, 02:22 PM
I have been reading a number of posts here and still am struggling with the proper method for binding series to the "columns" of a datasource.    

The issue I am running up against is that I don't have control over the datasource (generic webservice call), but I need to be able to put it into the proper chart structure.

Assume my web service call returns the following:

rows: [
    { Dept: "Shoes", Q1: 100, Q2: 200, Q3: 220, Q4: 180 },
    { Dept: "Shirts", Q1: 140, Q2: 160, Q3: 390, Q4: 200 },
    { Dept: "Pants", Q1: 180, Q2: 190, Q3: 400, Q4: 320 },
    { Dept: "Tops", Q1: 520, Q2: 600, Q3: 425, Q4: 570 }
]

What I am looking for is to create a line chart where the each department is a category and the series is Q1 - Q4.   The problem is, I don't know in advance that I will get for the "columns" (i.e Q1 - Q4).   It might be a range of years from 2005 - 2013, or it may be a set of months Jan - Dec.    

Is there a way to do this generically?    

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 11 Oct 2013, 09:21 AM
Hello,

The generic approach would be to pre-process the incoming data in the data source schema.parse method.

schema.parse: function(response) {
    return $.map(response.rows, function(r) {
       var result = [];
       for (var key in r) {
           if (key !== "Dept") {
               result.push({ dept: r.Dept, period: key, value: r[key] });
           }
       }
       return result;
    });
}


This will "denormalize" the data in dept/period/value points:

[{"dept":"Shoes","period":"Q1","value":100},{"dept":"Shoes","period":"Q2","value":200},{"dept":"Shirts","period":"Q1","value":140},{"dept":"Shirts","period":"Q2","value":160} ...]


You need to enable grouping by "dept" on the data source as in the grouping example. Set series field and categoryField and you should have your chart. Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Steven
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or