Filip Karadzic

WebChart Drilldown Demo: A pathway to greater things

2008-06-20T19:03:00Z

Upon visiting the drill-down live demo in CompoentArt's new Charting gallery one can easily see the benefits of client-side events within WebChart's client-side API. Not only can you register event handlers when a data point or series is hovered over, but in that event handler you get access to the data point, series and chart client-side objects that are related to the data point. This goes a long way in building interactive UIs that show more information than just a chart image.

But this is not the only interesting piece of code used in this demo. The demo also uses custom properties set on the client-side in order to customize the SQL query to the data source, and come up with a unique image from the same WebChart instance.

Let's take a closer look at both of these techniques.

Client-side Event handlers

If you take a look at the code behind the drill-down demo (available in the sample project that comes with the installation of WebChart 2008.1 or by pressing the SHOW CODE button in the demo) you'll notice that the mouse hover event handler is simply registered in the ASPX page with the following code within the WebChart tag:

<ClientEvents>
    <DataPointHover EventHandler="onDpHover" />
    <DataPointExit EventHandler="onDpExit" />
</ClientEvents>

In the call to the JavaScript onDpHover function, we will receive two parameters. The first will be the WebChart instance that generated the event, while the second will be a DataPointHoverEventArgs instance. We can use these two classes to extract any data relevant to the data point, its parent series (available from the DataPoint class), or the WebChart (also available through the parent series of the datapoint). In this example we simply pop up a DIV which shows the Y value of the data point that is hovered over, along with its X label. However, this API can be used in many powerful ways:

To add up the values of all data points in a series and display a total
To find if certain data points fall within a dangerous range in order to pop up a warning
Create links, or fire function calls that are relevant to the data point or series
Update additional parts of the UI that may be related to the data point or series

It is also important to note that this functionality was made possible by enabling WebChart's RenderAreaMap, Clientside.SerializeDatapoints and Clientside.ClientsideApiEnabled boolean properties in the server-side code.

Custom Properties

In addition to client-side events the Drill-down demo uses custom properties in order to pass additional data to the server-side. Custom properties are set on the client-side through WebChart's setCustomProperty(key, value) method and retrieved on the server-side through the String GetCustomProperty(string key) method.

The method provides a way for developers to quickly pass parameters from the client-side to the server-side code in a way that is optimized to take as little overhead as possible. The developer can then retrieve the parameters in the server-side code and change the WebChart instance or any other server-side code in any way imaginable.

In the Drill-down demo, we use the custom properties in order to customize the SQL query to the database. We pass values of MONTH, YEAR and DAY for the period custom property in order to customize the SQL query to sum up the daily sales from the database for the given period, and produce a suitable data source for the WebChart based on the period chosen.

This concept can easily be extended to:

Select the data that the user wants displayed in the chart
Select functions that the user wants applied to data (max, min, derivative or any custom function)
Apply a custom template to the chart upon a user action, based on user preferences

Caching Customized Charts

In addition to providing flexibility to a single WebChart instance, use of custom properties can be important when caching chart images. Since our live demo is posted on a high-traffic site, and the data in the sample database does not get updated, we do not have to render a new chart for every request made to the page. Furthermore we know that all charts with the same custom properties (i.e. MONTH view, December, 2004) will produce the same image. Since setting custom properties on a chart makes that chart customized we want to enable caching for customized images in order to save our CPU from needlessly rendering images.

WebChart1.Clientside.ClientsideCustomizedImageCachingEnabled = true;
WebChart1.CacheInterval = 86400; //1 day in seconds

This ensures that each unique chart image is rendered once daily and the same image is reused (with virtually no overhead) for all subsequent requests within a day.

Conclusion

Even though at first glance the Drill-down demo looks the least impressive of the three live demos, when you look under the hood you'll find a lot of features to get excited about. Whether you're building powerful and interactive UIs, allowing end-users to customize the data shown in the chart or designing your web app to be CPU conscious and take advantage of caching you can use this demo with its sample code as the starting point to implementing the techniques described above.

Share this post: email it! | bookmark it! | digg it! | reddit!

WebChart AJAX Zooming and Scrolling: How to get the most out of your data

2008-06-18T17:32:00Z

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:

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
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.
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.
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.
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.
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.
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;
```
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.

Share this post: email it! | bookmark it! | digg it! | reddit!

We know we have the look, but do we have personality?

2007-02-09T18:58:00Z

We have just released Charting 2007.1 in both WebChart and WinChart editions as well as our new platform called SqlChart which is intended to work with Microsoft SQL Server Reporting Services. This release brings all the eye candy you've come to expect from ComponentArt, but the question that may be floating in the clouds of our collective conscience is: Could it be that the only thing ComponentArt cares about is their look?

The answer is no.

After all, vanity is the quicksand of reason, to quote George Sand. And that's definitely not the direction where we are heading.

In this release we introduce some very useful features that will help chart developers to quickly arrange their data to be in line with the specs. Series that get their data from a database or a table can now be filtered, sorted and even split into sub-series at runtime to give the developer precise control about what exactly gets into the chart and how it is arranged. And the syntax is identical to SQL syntax so you don't have to worry about learning new notation that you'll never use elsewhere.

But the developer is not the only one who we have in mind when we think about the features we want to implement. Our future releases will bring more control to the end user of our charting product. We fully intend to make Charting an interactive user experience, and not just for vanity's sake in the form of pretty pictures and pop ups, but to bring useful features that our users desire the most. Having said that, are there any features you would like to see in our products? If so, post a comment, let us know what you crave the most. After all, it's not every day that you get an à la carte menu from a software company.

Other features we intend to introduce over the next couple of releases will make our product a lot smarter, easier to use and give the end user only the data they are looking for. But more details on that will leak out as time goes by.

For the time being you can enjoy some more eye-candy in the form of an introduction video for Charting 2007.1. "Vanity is my favourite sin", to quote Al Pacino. But hopefully it's not one of ours. So you can check out a preview of some of those handy new features in the video, and keep your eyes open for some very exciting things in future releases.

Share this post: email it! | bookmark it! | digg it! | reddit!