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