Why is there no nevigator for line charts?

3 Answers 31 Views
Charts General Discussions ToolBar
Leo
Top achievements
Rank 1
Iron
Leo asked on 08 Apr 2024, 02:51 PM

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

3 Answers, 1 is accepted

Sort by
1
Yanmario
Telerik team
answered on 11 Apr 2024, 07:21 AM

Hi FirestormHell,

The navigator is specifically made for the StockChart, but there is an available selection configuration that will work for the line type Chart:

https://www.telerik.com/kendo-angular-ui/components/charts/elements/selection/#toc-using-selection-as-navigator

and I would also share an example that uses the Slider component to load a specific range of data:

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

I hope this helps.

Regards,
Yanmario
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
0
Leo
Top achievements
Rank 1
Iron
answered on 26 Apr 2024, 01:43 PM

Hi Yanmario,

Thanks for the answer, the selection configuration of the first link seems exactly like the thing I need. I will try it :).

Best Regards,

FirestormHell

0
Leo
Top achievements
Rank 1
Iron
answered on 30 Apr 2024, 03:25 PM | edited on 30 Apr 2024, 03:43 PM

Hey again,

I am trying the navigator selection configuration. It works and it does what it is supposed to do.

What I don't really get is, there seems to be no way to connect the navigator with the chart in full. The series seem to be duplicated, leading to duplicated legend entries for the serieses, different colors of the single lines for the chart and the navigation in a multiple line chart.

I tried to work with seriesColors, but since the serieses in the navigator are new ones they do not get the same color as in the chart.
This is probably managable outside the chart to set a specific color to the series explicitly and reset it accordingly in the navigation.

I also managed to hide the legend items in the navigator.

But where it gets tricky is the click on the line item in the legend which makes the line invisible, this of course only works in the chart and does not propagate to the navigation, since as I said it seems there is no easy way to connect the serieses in the navigator and in the chart, right?

Any suggestions?

Yanmario
Telerik team
commented on 02 May 2024, 07:32 AM

Hi Leo,

Yes, there isn't a specific way to connect them and it is more like a separate pane that runs the same values for navigation purposes. The Navigator itself was mainly made for the StockChart and this is only a possible approach to use it with categorical Charts. 

In theory, you can do your own navigator by using a second pane which will have the same values and colors as your main pane and you can execute some code to filter the data base on the selection. Example of how it can look with two panes:

https://stackblitz.com/edit/angular-ubmafb?file=src%2Fapp%2Fapp.component.ts

The example itself doesn't show any data manipulation and the developer can include it for their own specific scenario.

I hope this helps.

Regards,
Yanmario
Progress Telerik

Leo
Top achievements
Rank 1
Iron
commented on 28 May 2024, 11:37 AM

Hi Yanmario,

I found out, that for my data (timestamp axis as x axis) a scatter line chart would be much better.
So now I am trying to adapt this navigation selection for a scatter line chart, but I am having problems to do it.

Is there an example on how to do this?
Or is there a good way to have detailed timestamps with Days / months or hours as axis display dependent on the scale of the chart? Unfortunately I was not really able to make that work either. As seen here: https://www.telerik.com/forums/time-date-axis-in-line-chart-series

Any Help would be appreciated, I am getting a bit desperate with my options.

Best Regards

Yanmario
Telerik team
commented on 31 May 2024, 05:54 AM

Hi Leo,

The navigator series item is of a categorical type and combining it with a scatter time isn't supported. This means that the developer might need to create his own navigator which upon specific value change to limit/filter the data provided to the Chart component. This can be like the example with the slider, which was provided in one of my previous replies, or something more complicated depending on the use case.

It is worth mentioning that such implementations are considered custom and a developer effort.

Regards,
Yanmario
Progress Telerik
Tags
Charts General Discussions ToolBar
Asked by
Leo
Top achievements
Rank 1
Iron
Answers by
Yanmario
Telerik team
Leo
Top achievements
Rank 1
Iron
Share this question
or