Line diff

[kristian]

Hey guys!

 

I have little to no experience with Kendo Charts, but have been assigned with the task, to create something like the attached image. 

It has to live in an Angular application.

I am hoping some of you have some starter tips for me.

My primary concern revolves around creating the green/yellow/red areas. 

 

The attached image is in my opinion pretty self explanatory, but if you have any questions, im happy to answer :)

 

Thank you in advance for any answers, I really appreciate your help!

[kristian]

The orange line and the blue lines are provided as data, the green/yellow/red areas needs to be calculated.

[Ivan]

Hello Kristian,

Unfortunately this feature is currently not supported, it is possible to draw some elements on the chart surface, but as you assumed it would be hard to get those cross areas filled with colour.

One can try some filling strategies with lines, but every Y point from the line should be calculated for every X point so to know where to end each filling line. Which mean that the curved line should approximated somehow ( some calculus method ) in every X point , while having only limited number of X,Y points.

Really would like to help further more with this task, but the component does not provide this functionality. Let me know if we can assist somehow in solving this complicated task.

Regards,
Ivan
Progress Telerik

[kristian]

Hi Ivan!

 

Thank you for your answer.

I am sorry to hear that, but at least it will help me estimate the task :)

What about using something like this for the colored areas? 

Do you think that would be possible?

https://demos.telerik.com/kendo-ui/range-area-charts/index?autoRun=true&theme=bootstrap-v4

[Ivan]

Hi Kristian,

You may combine, different types of chart series, like this https://stackblitz.com/edit/angular-wfawyd ,

but that would not be sufficient due to lack of support for crossing points. Would suggest you to search for some other types of chart series that might suit the situation you have to solve.

Regards,
Ivan
Progress Telerik

[kristian]

Hi Ivan!

 

I managed to create something like the original image by mixing different chart types, but I am having trouble with the category axis labels. 

The baseUnit of my category axis is 'days', but I want the labels on the category axis to display months, like in the original image.

I have tried a thousand things, and Im actually OK with hardcoding the labels to [1/3, 1/4, 1/5, 1/6], but I cant seem to make it work.

 

Do you have any advice regarding this? 

Thank you in advance 

[Ivan]

Hello Kristian,

It is possible to change base unit of category items, when data is actually passed in different base unit , like in this stackblitz sample . Take a look of the data set used. It is by day and is a timestamp string, which will be converted to Date object and chart will do the passing into axis automatically, depending from choose baseUnit.

On this link of our documentation you will find more details regarding displaying time series.

If you can send us some stackblitz sample, we can consult a bit more accurate on this case.

Regards,
Ivan
Progress Telerik

[kristian]

Hi Ivan!

 

Thank you for your answer.

My issue is that if the base unit is changed, the visualization of the data points changes, and it is important for me to keep all detail..

If the type of the kendo-chart-series-item is changed to line it becomes more visible.

I want the line displayed like this:

https://stackblitz.com/edit/angular-ah3kiv-jem4bg?file=app%2Fapp.component.ts

And the category axis like this (but with months instead of weeks): 

https://stackblitz.com/edit/angular-ah3kiv-kz7qxt?file=app%2Fapp.component.ts

I have partially achieved it by setting the "step" property on the category axis object to 30, but the end date is still missing because not all months have 30 days.

[kristian]

I made a Stackblitz of my current solution:

https://stackblitz.com/edit/angular-ah3kiv-kz7qxt?file=app%2Fapp.component.ts

Unfortunately I forgot to fork the project before editing, so the last link in my last post is obsolete.

 

As you can see, the graph is displayed in full detail, and i dont have the clutter of category labels, but unfortunately the dates doesnt match with my wishes.

I want one label pr month.

 

[Ivan]

Hi Kristian,

You can try to use custom visual for those labels, as demonstrated in this stackblitz sample.

It checks if the category value ( Date ) is actually the first day of the month and renders original item in this case, else renders nothing. Please refer to this stackblitz sample which demonstrates even more complicated use of custom visuals .

I hope this will help you.

Regards,
Ivan
Progress Telerik