Angular2 Kendo Chart Multiple Series Display

1
votes

I am migrating a Kendo UI line chart from AngularJS to Angular2 (using typescript). Here is an example of the type of chart I would like to produce. 

 //dojo.telerik.com/@brianelopez/iPUNe

Although not important in its present state, here is what the raw data looks like that feeds this chart

 //runner.telerik.io/fullscreen/@brianelopez/OgakU.json

I process/scrub this raw JSON and flatten it out so that the Kendo chart can process it. It eventually will look something like this:

[{ "empid": "10584", "interval": "2016 - 16", "service": "Total", "value": "10" },

{ "empid": "10584", "interval": "2016 - 16", "service": "Service1", "value": "5" },

{ "empid": "10584", "interval": "2016 - 16", "service": "Service2", "value": "5" },

{ "empid": "10584", "interval": "2016 - 17", "service": "Total", "value": "25" },

{ "empid": "10584", "interval": "2016 - 17", "service": "Service1", "value": "5" },

{ "empid": "10584", "interval": "2016 - 17", "service": "Service2", "value": "20" },

{ "empid": "10584", "interval": "2016 - 18", "service": "Total", "value": "5" },

{ "empid": "10584", "interval": "2016 - 18", "service": "Service1", "value": "3" },

{ "empid": "10584", "interval": "2016 - 18", "service": "Service2", "value": "2" },

{ "empid": "10584", "interval": "2016 - 19", "service": "Total", "value": "16" },

{ "empid": "10584", "interval": "2016 - 19","service": "Service1", "value": "8" },

{ "empid": "10584", "interval": "2016 - 19", "service": "Service2", "value": "8" }]

In the working chart I am using a Kendo dataset and its group by functionality on the "Service" field. I do not believe this exists in Angular 2 (Kendo dataset or it groupBy functionality).

Does anyone, anywhere have any idea that might help me get this running in Angular 2? Do I need to write a custom pipe to group? I have read scant rumors that RXJS has a groupby operator. Should I try and structure my data differently?

I'm spinning my wheels going in different directions trying to solve this without making much progress in terms of what is showing in the new Kendo Angular2 Chart. Any help would be greatly appreciated.

1
angulartypescriptrxjskendo-chartkendo-ui-angular2
Deleted my answer since i misunderstood what you where trying to do. RxJS works on streams, its not that great with (i.e. should not be used with) array data. To work with pull based data (e.g. arrays) you might want to take a look at something like IxJ, it also has a groupBy for exampls. - Nypan

1 Answers

0
votes

We've just added a help topic on binding to Groups of Objects that addresses this scenario.

Coming from Kendo UI for AngularJS you'll notice that this is no longer a built-in feature. Instead, it's replaced with a groupBy one-liner from the Data Query package and a ngFor.

I hope that separating the grouping functionality will lead to greater flexibility and better framework integration. For example, you can now do multi-level grouping and decide how to plot the derived chart(s).