Zooming and scrolling is one of those essential features that is a must-have for any comprehensive charting product.  However, deciding how to implement zooming and scrolling within WebChart was not obvious as there was no industry consensus on how this feature should look and operate, let alone how it should be implemented.

Our first decision was an easy one as it had to do with the technology used to implement the feature.  Right away we knew that we did not want any third party plug-ins (including Flash) to be needed in order to use the feature.  It had to be pure JavaScript and DHTML, yet still look good and be user-friendly.  The reason for this was not only ease of compatibility with virtually all of today's environments but also the ease of customization for our customers.  The second decision had to do with how the feature should work.  Some common implementations allow end users to use the mouse to draw a rectangle that represents the area that you want to zoom into.  This fairly useful,  however zooming out is not elegant with this model.  In addition to zooming, we also wanted to give the end user the ability to scroll through large sets of data, which was not possible with this implementation.

So we decided to go with an implementation that uses a second instance of WebChart as the zooming and scrolling control, as seen in our demo.  This was the only implementation that satisfied all of our requirements while still visually looking good and being user friendly.  Below is a capture of the control in action:

Configuring Your Own Control

ComponentArt's concept of a zooming and scrolling control is a simple one.  You create another instance of WebChart, set its Clientside.IsScrollControll property to true, and finally connect it to all the charts you want to control with this instance (yes, this means one zooming and scrolling control can control multiple WebCharts).  When the page is rendered in the browser, the control chart will be enhanced with the scrollbar and the shading which will allow the end user to zoom and scroll.

The best way to get started with zooming and scrolling is to take a look at the live demo of the zooming and scrolling control.  It is advisable to then read the documentation of this feature as well as look at the code that makes up the live demo (both of which are also available through the documentation and the sample project that come with the installation of WebChart 2008.1) 

When you feel you're ready to make your own control, here are a few tips to keep in mind:

1. Connecting your display chart to the control chart is done through the display chart's Clientside.MyScrollControl, which should be set to point to the instance of the control chart.  This allows multiple display charts to be controlled by a single control chart
2. Always use the same data source in the control and display chart.  This prevents the data in the display chart from falling out of sync with data in the control chart.  The result of this is that the display chart will have more data than needs to be displayed at any one time, but this is the correct implementation, further explained in point 3 below.
3. Set the initial display range through control chart's server-side SetZoomRange(from, to) method.  This sets the appropriate display range on all the controlled charts, as well as shade in the appropriate region when the scroll control renders. The parameters passed need to be of the same type as the values in the X axis, either DateTime, String or numeric.  The call to SetZoomRange needs to be done before any of the display charts perform their data binding, in order for the appropriate range of data to be extracted from the data source.  For this reason it could be considered good programming practice for the control chart code to precede the display chart's code.
4. Do not set WebChart.CoordinateSystem.XAxis.MinValue or CoordinateSystem.XAxis.MaxValue on the display chart as that will override the values set by the zooming and scrolling control.
5. Setting WebChart.AdjustReferenceValue to true will zoom in to show just the Y range in which all the values in the current chart fall into.  This is very handy for use with display charts that have large and varied data sets.
6. Customize the look and feel of the zooming and scrolling control by changing the images for the scrollbar, the shadow color, shadow opacity as well as the HTML and the position of the Range Display pop-up.  See the documentation on how to do this.
7. Align the axis of the control chart to the beginning and end of the scroll bar.  This is done by matching the left and right margin to the width of the arrows on the ends of the scroll bar.  Since WebChart's margin widths are set in percentages, we need to match that to the pixel widths of the arrow images.  So if the scroll bar arrow images are 15 pixels wide and the chart is 500 pixels wide, the following code will do the trick:
   

   WebChart2.View.Margins.Left = (15.0 / 500) * 100;
   WebChart2.View.Margins.Right = (15.0 / 500) * 100;

8. Use WebChart's client-side API to dynamically set the active display range.  For example if you want to have a button that will set the range to show year to date, you need to execute the following JavaScript code when the button is pressed:
   

   var startD = new Date();
   var endD = new Date();
   startD.setFullYear(2008,1,1);
   WebChart2.rangePicker.selectRange(startD, endD);

   Again, the parameters passed to the method need to match the type of the X axis dimension, either Date, String or numeric.

That's it from me for now, I hope you find these tips helpful when creating your zoom and scroll charts.  I will write more about WebChart's other cool client-side features in upcoming posts.