Zooming/Scrolling regenrate/redraw only required part of chart

[Dean Wyant]

Zooming and Scrolling causes a postback. At this time, my code simply re-reads all of the data and builds the complete chart again.
When zoomed in, scrolling can cause another postback which causes another load of all of the data etc.
Is there a way to check the control etc. on postback to find the necessary chart area and only read the necessary data?
Also, is there a way to get the scale, etc. for use in changing the amount of labels and data in the required area?
Is there an example of this available?

For instance, lets say I want a chart of the number of shares of XYZ stock sold for a given time period. I have data for the number of shares sold in each minute of each day for the past 5 years. When generating the chart for 5 years, I do not add every minute data point. I sum all of the minutes into months so that there are 60 data points, each with a month label.
I set XOnly zooming/scrolling on the chart. The user left clicks and drags to highlight the 12 data points in the year 2008. A postback occurs and the C# code does not know any better than to generate the chart in exactly the same way. Only one year of data is needed (perhaps more for the queue on either side?). But, 5 years of data is read. Now, the user sees the 12 months, each with one data point.
I would like to regenerate the chart based on the zoom/scale and scroll positions (the required data slice needed for display). In this case, I would like to sum the data (that is in minutes) into weeks instead of months and use week labels instead of month labels. That way, instead of the user seeing 12 data points, they will get 52 data points with new labels. Then, it is a true zoom into the data to reveal more details.

If the user then scrolls one page right, a postback may occur and the chart can be regenerated for just the year 2009 (or whatever overlap is necessary).
I do not expect this to happen automatically. However, I cannot find an example or any guidance on how to implement this type of zoom and scroll of the data.

What properties are available for implementing something like this?
If I can caclulate or retrieve the visual range of the chart, I can simply build the chart as a full chart and zero all chart data points before the requested range, read in the data for the requested range and zero the trailing data points outside of the requested range.


After

[Dean Wyant]

This posted before I got to check it.
Obviously the Title should read: regenerate

[Giuseppe]

Hi Dean Wyant,

You can handle the Zoom server-side event, compute the necessary data based on the active zoom/scroll settings, and rebind the chart in the event handler in order to achieve the desired effect -- here is a sample code snippet to get you started:

private Random rand = new Random();

 

protected void Page_Load(object sender, EventArgs e)

{

    RadChart1.Zoom += new EventHandler<ChartZoomEventArgs>(RadChart1_Zoom);

 

    if (!this.IsPostBack)

    {

        List<double> data = new List<double>();

        for (int i = 0; i < 100; i++)

        {

            data.Add(rand.Next(10, 100));

        }

 

        // You will probably need to disable the auto-range algorithms as otherwise you cannot get the correct axis range

        // in the zoom event handler (and you will probably need it for the data generation).

        RadChart1.PlotArea.YAxis.AutoScale = false;

        RadChart1.PlotArea.YAxis.AddRange(0, 110, 10);

 

        RadChart1.PlotArea.XAxis.LabelStep = 10;

        RadChart1.DefaultType = ChartSeriesType.Line;

        RadChart1.DataSource = data;

        RadChart1.DataBind();

    }

}

 

private void RadChart1_Zoom(object sender, ChartZoomEventArgs e)

{

    // you can use the RadChart1.ClientSettings.XScale / RadChart1.ClientSettings.YScale (or the old/new values passed through ChartZoomEventArgs) and

    // RadChart1.ClientSettings.XScrollOffset / RadChart1.ClientSettings.YScrollOffset property pairs

    // to calculate the desired data to feed the control (based on the active zoom / scroll settings).

    //

    // Note: The default scale factor equals 1 and (XScrollOffset=0, YScrollOffset=0) pair represents the top-left corner

    // while the (XScrollOffset=1, YScrollOffset=1) pair represents the bottom-right corner of the plotArea.

     

    // Note: Then you need to clear the scale factors as you are essentially rebinding the chart with a different set of data manually

    RadChart1.ClientSettings.XScale = 1;

    RadChart1.ClientSettings.YScale = 1;

 
            RadChart1.PlotArea.YAxis.AddRange(0, 10, 5);

    RadChart1.PlotArea.XAxis.LabelStep = 1;

    RadChart1.DataSource = new int[] { 1, 2, 3, 2, 4, 5, 2, 7, 6 };

    RadChart1.DataBind();

}

Hope this helps.


All the best,
Freddie
the Telerik team

[Dean Wyant]

Thanks.

This redraws the chart to the zoomed area without a scrollbar. This may work for some applications. But, if there is not going to be a scrollbar, then there is no need to have the "chunks".. and without the "chunks" the axis labels would not be chopped off. The javascript does not support drag and highlight to zoom without also requiring the "chunks".

To keep the scroll bar, I can skip resetting the Scales and redraw with an increased number of data points.
However, zooming into a small area this way causes a huge number of data points to be added in the non-visible areas of the chart. This slows down chart creation drastically.
I would like a way to keep the scroll bar and only render the part of the chart within the scroll range (with and increased number of data points). It seems that it would be much more efficient if the zoom / scroll feature would only bind and render the area within the current zoom/scroll range. After all, it is going to do a postback when it needs some other area. As it is, the whole chart is being bound and rendered even if only a tiny portion of it is available for viewing without another postback.
I do not think the zoom / scroll was programmed to work this way.
It would be great if it could do this and had the Silverlight feature of handles on the scroll bar.
As it is, I cannot use the zooming and scrolling features of the RadGrid ASP.NET chart.

I am going to have to take a look at the Silverlight chart. Can someone tell me if it has a zoom/scroll mode where only a portion of the chart is bound and rendered... allowing zoom to "drill down" to more data points (and labels) in an efficient manner? Or, should I post in the Silverlight Chart forum? An answer of Yes/No or "with some custom code" would be sufficient.

Thanks.

[Giuseppe]

Hi Dean Wyant,

The scrollbars are not visible as the XScale / YScale properties are reset to 1 (you need to do this as effectively you are loading completely different set of data in the Zoom server-side event handler.

Unfortunately currently you cannot force the control to only process and render the part of the chart that is within the visible range so it would not be possible to achieve the desired functionality.

As for the Silverlight version of RadChart -- again, the current version of the control does not support partial databinding but we are currently working over some significant performance optimizations for zooming/scrolling scenarios that should become public for the Q3 2010 release of the control (around November).


Best wishes,
Freddie
the Telerik team

[Dean Wyant]

The ASP.NET control is rendered at the server and I understand that new javascript would be needed to enhance the scrolling/zooming. I do not expect that to happen.  

The Silverlight control is rendered on the client. I believe that there is much more flexibility there.
There could be a problem with "partial databinding". the client may need to perform some data transformations and bind a client side collection to the chart. For scrolling, that should be fine. But for zooming, having the chart retrieving partial data from the collection will not have the desired results. An event is needed to allow custom code to perform data transformations on server data to modify the bound collection or to bind to a new collection.

It would be really nice if Events are used. I hope it allows me to only have to read the smallest amount of data necessary to render the visible part of the chart. Whether I use a trip to the server or not. The ideal situation for me would be where the initial bind works as it is and then when a zoom occurs, an event is fired which has all of the zoom/scroll settings and allows me to provide only the necessary data. Automatic skip/take queries might be nice, but even if they were available, I would still need the option to do it all myself.

Thanks.

[Giuseppe]

Hi Dean,

As my colleague Vladimir explained in the other ticket ZoomScrollSettings.PropertyChanged events are currently supported in the Silverlight version of the control but the result of the zoom/scroll action is processed internally.

Unfortunately currently it is not possible to "unlink" the built-in scrollbars but you should be able to achieve the desired effect either with external sliders or by re-templating the ChartArea and adding your custom sliders there (actually the built-in scrollbars are rendered by customized RadSlider instances as well).


All the best,
Freddie
the Telerik team