Cannot Pan/Zoom chart with Dynamic Series

[Sunny]

I have a graph displayed, and data is set/added dynamically to the series list. I have setup a Dojo with the basic scenario of the issue using MVVM.

 When I try manually to modify the displayed range, the graph updates, but the new series is lost (probably because the ._redraw function destroys the DOM and recreates it inside the .setOptions function). I tried adding the new series and using .refresh() instead of .redraw(), but that doesn't seem to help.

I tried to implement a second method to accomplish this by filtering through the DataSource, but that seems to remove all the points, but keeps the series in the list.

The amount of data that will be presented will be in the tens-to-hundreds of thousands of datapoints to navigate though. Thanks for any insight!

[Atanas Korchev]

Hello Sunny,

I have updated your dojo and it now works: http://dojo.telerik.com/@korchev/IbasA. Check the new zoomIn method:

      zoomIn: function (kEvt) {
        //Try to zoom in on Frequency range 
        var options = this.kChart.options,
            ranges = {
              xAxis: {
                min: options.xAxis.min + 0.5,
                max: options.xAxis.max - 0.5
              }
            };
        
        

        $.extend(true, this.kChart.options, ranges);
        this.kChart.redraw();
        this.numSeries();
      }

The problem was that the setOptions method replaces all options and to avoid that you need to merge the new ones with the existing ones via $.extend.

Regards,
Atanas Korchev
Telerik

 

 

[Sunny]

Atanas,

I guess I took the API docs for its word when it stated:
setOptions
Sets the widget options. Changes are cumulative.

Meaning that the settings weren't reset. Thank you!

[Sunny]

What about my second method?

Is there a alternate way to make it work by filtering the DataSource?

Thanks!

[Atanas Korchev]

Hello Sunny,

Filtering the data source will reduce the number of items in the data source. Is this what you want to achieve? This will change the chart data range and potentially show a completely different chart. Setting the xAsix min and max will scale the chart.

Regards,
Atanas Korchev
Telerik