Chart range selector - Default range selection

Posted by: chhavi.sethi on 28 February 2020, 5:32 pm EST

  • Posted 28 February 2020, 5:32 pm 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
  • Replied 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

    range_selector.zip
  • Replied 12 October 2020, 4:16 am EST

    Hi Ashwin,

    Thanks for the solution, It worked well. Can you provide a fiddle for Y-axis also?

    Also, is it possible to customize UI for the range selector? I don't want to show the range chart below the main chart. It would be good if the range selector can be like the below image.

  • Replied 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

    range selector updated.zip
  • Replied 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?
  • Replied 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
  • Replied 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.
    1. chart.invalidate();
    2. chart.refresh();
    3. chart.collectionView.refresh();

    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
  • Replied 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

    axis scrollbar.zip
  • Replied 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.

    update-chart.zip
  • Replied 15 October 2020, 4:50 am EST

    Please see this issue as well, It happens when I update the itemsSource with an empty array.

  • Replied 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

    scrollbar updated.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels