Easy scrolling in chart

[Petr]

I displayed a lot of charts which contains too many data. So I define XAxis.MaxValue and/or XAxis.MinValue at the beginning. User can use zooming and panning function if needed. But sometimes it is not clear that some part of chart is not visible and how many values are hidden. If I understand well then "Data Navigation" can be used only for date axis, but it is not true in most of my cases.

My idea is to display below chart "Range Slider" and simply show left and right boundary of the chart. At the beginning it will be enough just to display the position (after events drag/zoom). Later I want implement that user can change the zoom and position of chart by using the slider, but I am not sure if it is possible to modify chart by client methods.

Did anybody try to implement something like that or is there any similar functionality which I didn't noticed?

Thank you,

Petr

[Petr]

I check your sample, but I want something different. I implemented my own solution and it works perfectly for me. I can share my code with others. In our application if the chart contains too many data then zooming and panning in charts is enabled with locked Y axis always.

Zoom.Enabled = true;
Zoom.MouseWheel.Enabled = true;
Zoom.MouseWheel.Lock = AxisLock.Y;
Zoom.Selection.Enabled = true;
Zoom.Selection.ModifierKey = ModifierKey.Shift;
Zoom.Selection.Lock = AxisLock.Y;

Pan.Enabled = true;
Pan.Lock = AxisLock.Y;

So I need only horizontal slider which I add below chart. It is setup to enable range and user can move left or right handle (zoom function) or drag whole range (panning function).

<telerik:RadSlider ID="chartSlider" runat="server" RenderMode="Lightweight" Orientation="Horizontal"
      Enabled="true" ShowDragHandle="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
      OnClientSlideEnd="sliderEventSlideEnd" OnClientSlideRangeEnd="sliderEventSlideEnd"
      IsSelectionRangeEnabled="true" EnableDragRange="true" ItemType="None" MinimumValue="0" />

All the communication between slider and chart I implemented in script on client side.

 <script type="text/javascript">

    function getChart() {
      return $find("<%= contentChart.ClientID %>").get_kendoWidget();
    }

    $(function () {
      var chart = getChart();
      // add events to chart
      chart.bind("dragEnd", chartMovementEnd);
      chart.bind("zoomEnd", chartMovementEnd);
      // init slider parameters
      setSlider(chart);
    })

    function chartMovementEnd(e) {
      // change slider after chart movement
      setSlider(e.sender);
    }

    function setSlider(chart) {
      var slider = $find("<%= chartSlider.ClientID %>");
      if (slider) {
        // change slider to small values, otherwise it makes problem with repainting later
        repaintSlider(slider, 0, 1, 2);
        var maxVal, startIdx, endIdx;
        if (chart.getAxis()._axis.dataRange) {
          // find visible range for chart with date axis      
          var axeDates = chart.getAxis()._axis.dataRange;
          maxVal = Math.floor((axeDates.end - axeDates.start) / (1000 * 3600));
          startIdx = Math.floor((axeDates.displayStart - axeDates.start) / (1000 * 3600));
          endIdx = Math.floor((axeDates.displayEnd - axeDates.start) / (1000 * 3600));
        } else {
          // get range for other charts
          var axeSeries = chart.getAxis().options;      
          maxVal = axeSeries.dataItems.length;
          startIdx = axeSeries.min ? Math.floor(axeSeries.min) : 0;
          endIdx = axeSeries.max ? Math.floor(axeSeries.max) : startIdx + axeSeries.categories.length;
        }
        // set new range to slider    
        repaintSlider(slider, startIdx, endIdx, maxVal);
      }
    }

    function repaintSlider(slider, start, end, max) {
      // set slider values
      slider.set_maximumValue(max);
      slider.set_selectionEnd(end);
      slider.set_selectionStart(start);
    }

    function sliderEventSlideEnd(sender, eventArgs) {
      // slider has changed, set new options to chart
      setChartOptions(sender.get_selectionStart(), sender.get_selectionEnd());
    }

    function setChartOptions(start, end) {
      var chart = getChart();
      if (chart.getAxis()._axis.dataRange) {
        // calculate range for date charts
        var axeDates = chart.getAxis()._axis.dataRange;
        var startDate = new Date(axeDates.start.getTime() + (start * 3600 * 1000));
        var endDate = new Date(axeDates.start.getTime() + (end * 3600 * 1000));
        chart.options.categoryAxis.min = startDate;
        chart.options.categoryAxis.max = endDate;
      } else {
        // set new range in chart
        chart.options.categoryAxis.min = start;
        chart.options.categoryAxis.max = end;
      }

      chart.refresh();
    }

  </script>

[Rumen]

Great job on creating a slider to help with chart zooming and panning. It's a smart way to make navigating large data sets easier. Thanks for sharing your code with everyone.

[Rumen]

Hi Petr,

Thank you for your feature request!

While the zoom and pan features of RadHtmlChart do not offer scrolling behavior, please take a look at this response left by my colleague:

https://www.telerik.com/forums/vertical-scroll-for-bar-chart-with-fixed-x-axis#5180316

I have modified the dojo they provided.

https://dojo.telerik.com/@gdenchev/iREPeyOD 

In the example, a Kendo Slider is used to dynamically set the page of the Chart and simulate a scrolling behavior. If the CTRL key is pressed while scrolling, the Chart is zoomed. If the CTRL key is not pressed while scrolling, the Slider is scrolled.

Let me know what you think of this approach and if it works for your scenario. Otherwise, please log a feature request in the AJAX feedback portal.

 

Regards,
Rumen
Progress Telerik