Forums Home / Wijmo / General Discussion
Posted by: chhavi.sethi on 28 February 2020, 5:32 pm EST
chhavi.sethi
Posted 28 February 2020, 5:32 pm EST - Updated 3 October 2022, 2:52 am EST
https://www.grapecity.com/wijmo/demos/Chart/Features/ScrollingAndRangeSelectors/angular
On the above sample of the Wijmo chart range-selector, how do I apply default range selection?
I want a chart to be displayed as
rather than showing it as
ashwin.saxena
Posted 1 March 2020, 5:29 pm EST
Hi Chhavi,
This sample uses an AxisScrollbar class that is mostly used to display scrollbars and change the axis as per the scrollbar. I would suggest you use the RangeSelector instead which has a min/max property that can be set to change the range of the RangeSelector.
Please refer to the sample attached.
Also, the min and max property need to be a number. In the charts where X-Axis binding is text, like in your case, you will need to provide the index of the item instead of the x-value. For example, in my sample, I have set the max to 2, this means that the maximum value shown on the X-Axis will be the item at the 2nd index.
Regards,
Ashwin
chhavi.sethi
Posted 12 October 2020, 4:16 am EST - Updated 3 October 2022, 2:52 am EST
ashwin.saxena
Posted 12 October 2020, 6:39 pm EST
Hi Chhavi,
Unfortunately, we cannot create a range selector exactly like AxisScrollbar. Instead of adding the range selector on a different chart, you can add it to the same chart. Also, to add a range selector on the y-axis, you can set the orientation property to Y.
Please refer to the sample attached.
Also, in the AxisScrollbar class, we have added a minPos and maxPos property which can be used to set the initial position of the scrollbar. In the demo link below:
https://www.grapecity.com/wijmo/demos/Chart/Features/ScrollingAndRangeSelectors/angular
you can add the following line of code to update the scrollbar position on the initial load:
setTimeout(() => axisXScrollbar.maxPos = 0.5, 20)
We use setTimeout so that the data is loaded completely in the scrollbar.
I hope this helps.
~regards
chhavi.sethi
Posted 13 October 2020, 1:49 am EST
Hi Ashwin,
https://www.grapecity.com/wijmo/demos/Chart/Features/ScrollingAndRangeSelectors/angular
On the above sample, the data is not that large so it works fine with 20 milliseconds timeout. But in our case, we have a large dataset that takes time to be initialized. And of course, your solution fails in that case.
And, I would not be looking to increase the timeout since the data can either be small or large.
Isn’t there any appropriate callback to initialize the axis scroll-bar?
ashwin.saxena
Posted 13 October 2020, 5:04 pm EST
Hi Chhavi,
If you do not wish to use timeout, try using the code below in the sample:
axisXScrollbar._rangeSlider._minPos = 0.2;
axisXScrollbar._rangeSlider._maxPos = 0.7;
I have also asked the developers whether they can implement a callback in the AxisScrollbar class. The internal tracking id of the case is 422620. I will update you once I will hear from them.
~regards
chhavi.sethi
Posted 14 October 2020, 2:20 am EST
Thanks, Ashwin,
I have been facing another issue with AxisScrollBar class. The scroll bar does not get updated when the [itemsSource] is changed dynamically.
Even though I tried to make a couple of following tweaks but didn’t work.
And then I tried to look for a refresh function inside AxisScrollBar class, couldn’t find anything.
Can you please help me asap? It is a little urgent.
Thanks
ashwin.saxena
Posted 14 October 2020, 5:54 pm EST
Hi Chhavi,
You do not need to refresh the scrollbar. When the itemsSource is updated, you need to reset the min/max values of the chart’s axis. Please refer to the sample attached for reference.
~regards
chhavi.sethi
Posted 15 October 2020, 4:12 am EST
Hi Ashwin,
It didn’t work for me, I have changed your code to reproduce my issue. I don’t want to update binding. Because I want to keep the chart the same as before but it will have new filtered data.
ashwin.saxena
Posted 15 October 2020, 7:41 pm EST
Hi Chhavi,
It seems that the scrollbar min/max value is not being updated properly. I have forwarded a bug report to the developers with internal tracking id 467200 so that they can look into this issue.
In the meantime, as a workaround, you can remove the axis scrollbar and recreate the scrollbars again whenever the itemsSource is updated. I have also updated the sample according to an empty array. The scrollbars will be removed when the source is updated but new scrollbars will only be added if the source is not empty.
~regards
