Tuesday, October 28, 2008

When you are browsing the charting samples here, you will notice a scenario that is currently called 'Zoom'.

unzoomedChart

I think it's pretty clear that you are supposed to drag the zoom slider :)

When you do, the chart is resized and to look like this:

ZoomedChart

Charts do not have this capability built-in at the moment, so this gives us the opportunity to dig into the charts a bit.

All charts are of the same type (Chart) and you can create a line series by adding an instance of LineSeries to the chart. This is quite flexible, because you can add as many as you want. It our case, two are added. Let's take a look at the different controls that make up this sample:

Zoomchart xaml

As you can see, two LineSeries have been added, their ItemsSource pointing to a static resource defined somewhere else.

The slider is hooked up to a method in my codebehind which executes this one line of code:

            ChartArea.Width = ScrollArea.ViewportWidth + (ScrollArea.ViewportWidth * zoom / 100.0);

I am not setting the width of the complete chart. If I were to do that, the legend and title would scroll away as well, which is not what I want. Besides, there is no ScrollViewer around to handle the scrolling. Lets take a look at the custom template that does have a ScrollViewer in it:

image

I have retemplated the chart to include a ScrollViewer.

You can clearly see that the legend is not in the ChartArea. So, setting the width of the ChartArea will give you the zoom you are aiming for. The axis get notified of the change and (if set to 'Auto'), will update to show more or less information.

Since Chart is a sealed class, I had to walk the visual tree to get to both the ChartArea component and the ScrollViewer.

Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):