Hey,
we implemented the StockChart and set the NavigatorCategoryAxis to type "category". Everthing works as it should.
Is there a possibility to set ChartNavigatorSelect "from" and "to" props to a number, so we can set a range ? Or is there a workaround for type category ?
Thanks for your help.
With best regards
Stefan
10 Answers, 1 is accepted
When the NavigatorCategoryAxis type is set to "category" the selected range will be index based. For example, setting from 3 to 5 will select from the 4th to the 6th index.
"The range is index-based, starting from zero. Categories with indexes in the range (select.from, select.to) will be selected."
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorCategoryAxisProps#toc-select
<ChartNavigator> <ChartNavigatorSelect from={3} to={5} />I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Hey,
thnaks for the quick reply.
We tried this of course, but the "from" and "to" props only accepting Dates.
<ChartNavigator> <ChartNavigatorHint visible={false} /> <ChartNavigatorCategoryAxis labels={{ visible: false, format: "G", rotation: 90 }} baseUnit="auto" categories={categoryAxisDates} type="category" justified={true} /> <ChartNavigatorSelect from={3} to={5} mousewheel={true} /> <ChartNavigatorSeries> <ChartNavigatorSeriesItem data={this.props.durationSumOverMonths} type="area" labels={{ visible: false }} categoryField="date" field="value" visibleInLegend={false} /> </ChartNavigatorSeries> </ChartNavigator>
Thanks for your help.
Stefan
Rank 1
Detailed Information:
We have > 1000 data series items.
For performance purposes we want to set the range between 0 and 50 to show only a small amount of items initially.
But unfortunally we only can set the range as Dates (We use the ChartCategoryAxisItem type category), according to following link.
Setting the index, as you mentioned, did not work, because Dates are required.
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorSelectProps
Thanks for your support.
With best Regards,
Stefan
The select is working with indexes when the values are not dates, and it expects dates for a date axis:
Could you please advise is there a reason why the ChartCategoryAxisItem is set to a category when the actual category values are dates. The category type is intended to be used with non-date values:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorCategoryAxisProps#toc-type
I will be expecting more details, and I will provide a suggestion best suited for the current scenario.
Regards,
Stefan
Progress Telerik
Rank 1
Hey Stefan,
thank you again for your reply.
The Values for the CategoryAxisItems are string formatted dates.
0: "29.3.2019 09:04:42"
1: "29.3.2019 09:04:47"
2: "29.3.2019 09:04:53"
3: "29.3.2019 09:04:58"
4: "29.3.2019 09:05:03"
....
We did not like the behaviour with actual dates, so we formatted the dates to strings. Now everthing fits our needs except the RangeSelect problem.
Thanks for your help
With best regards,
Stefan
Thank you for the clarification.
Is it possible to add data similar to the real one in this example, so we have a case that is close to the real one as possible?
https://stackblitz.com/edit/react-aj9run?file=app/main.jsx
This will allow us to test locally and provide a suggestion best suited for the real case.
Regards,
Stefan
Progress Telerik
Rank 1
Hello,
i provided a example, where you can see our problem.
"from" and "to" is not working as we expect.
I hope this helps:
https://stackblitz.com/edit/react-aj9run-w9qm8s
With best regards,
Stefan
After additional research and consulting with the lead developer of the StockChart I want to apologize for the misleading information. The StockChart Navigator is implemented to work only with date categories, the other category types are for the other Chart types. The Chart will automatically map the date like string to dates, this is why the range has to be set with dates as well.
`Each data point must have an associated date. The date field value must be any of the below values:
Date instance
String, parsable by new Date([field value])
String in an ASP.NET JSON format, e.g. "\/Date(1320825600000-0800)\/"`
I can suggest something that will imitate the index based range. For example, if we want the range from index 0 to index 40, we can use the array with values, and get the date on the corresponding index. This will pass the date to the range and at the same time use index-based approach. This is an example:
https://stackblitz.com/edit/react-cz6qxu?file=app/main.jsx
I hope this approach will allow achieving the desired result.
Regards,
Stefan
Progress Telerik
Rank 1
Ok, thank you for pointing this out.
We can use the category type date. But there is one problem:
We would like to see every single entry in our data set in the chart. If we use type "date" the entrys are aggregated and only if we zoom in, than we can see every single entry. Is there a option to always show every item from our data-array ?
Thanks a lot,
With best regards,
Stefan
In this case, I can suggest to set the MaxDateGroup value to a number bigger than all points or setting into MAX_VALUE to ensure that if the points number grow this will not affect the application.
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorCategoryAxisProps/#toc-maxdategroups
Still, some point may be aggregated if they have the same date value, as they have to be positioned on the same coordinates on the Chart.
Regards,
Stefan
Progress Telerik