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

Stacked columns and Dates

1 Answer 78 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Darijo
Top achievements
Rank 1
Darijo asked on 08 Apr 2014, 10:43 AM
Hi,

It seems that I just cannot get beyond this issue.This is an example of dataset:[
{ type: "FOO", date: 1396952060722, count: 3 },
{ type: "BAR", date: 1396952060722, count: 2 },
{ type: "FOO", date: 1396952060722, count: 4 },
{ type: "BAZ", date: 1396952060722, count: 1 },
{ type: "FOO", date: 1396952060722, count: 3 },
{ type: "FOO", date: 1396952060722, count: 3 }
]
How can I make stacked column chart where X axis holds dates and columns are stacked bytype with count fields summed (Y axis) if they fall under the same date. I also need a way to regulate date granularity (year/month/day) and the data should distribute accordingly.Is there a buildin way to do this or I'll have to make complex data transform?

This is really important feature for us and I want to take advantage of every Kendo feature as much as possible so I can justify possible purchase.

Thanks.

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 09 Apr 2014, 12:16 PM
Hi,

You should be able to achieve the described scenario with built-in features.

The Chart supports aggregating date series into specified "base units" (days, weeks, etc.). Series can also be grouped by a specified field.
By combining these features we get:

    $("#chart").kendoChart({
      dataSource: {
        data: [
          { type: "FOO", date: 1396952060722, count: 3 },
          { type: "BAR", date: 1396952060722, count: 2 },
          { type: "FOO", date: 1396952060722, count: 4 },
          { type: "BAZ", date: 1396952060722, count: 1 },
          { type: "FOO", date: 1396952060722, count: 3 },
          { type: "FOO", date: 1396952060722, count: 3 }
        ],
        group: {
          field: "type",
          dir: "asc"
        }
      },
      series: [{
        field: "count",
        categoryField: "date",
        stack: true
      }],
      categoryAxis: {
        type: "date",
        baseUnit: "auto" // "hours", "days", "weeks", etc.
      }
    });

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
General Discussions
Asked by
Darijo
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or