Dundas Data Visualization Support Site

Dundas Support Site Home | Contact Us | Dundas Home

Home

Creating an Interactive Financial Chart

Introduction

This quick how-to uses jQuery, a popular lightweight JavaScript framework that makes it very easy way to manipulate HTML elements without worrying about browser compatibility.

Using simple JavaScript and CSS manipulation as well as Dundas Chart for ASP.NET, you can create an interactive chart that loads quickly, is visually appealing and is compatible with all popular browsers today, including Internet Explorer 6.

Although the Dundas Chart for ASP.NET features scrolling, zooming and tooltips, it has the drawback of producing big pages due to the large amount of HTML markup produced for tooltips. As well, the chart relies on callbacks when using the scrolling and zooming functions. On charts with a large amount of data for tooltips and datapoints this can create performance issues.

The method in the attached sample gives you the same level of interactivity, but everything is loaded onto the page at once rather than relying on callbacks to retrieve new data. As well, much of the data can be cached on the server to speed up load times even further.

The sample page has two charts: a big chart and a small chart. The big chart will only show a portion of the graph while the smaller chart below it shows the entire graph scaled down. When the mouse moves across the big chart, a red dot (datapoint marker) and line (axis marker) are show shown to indicate where the datapoint is. A stylized tooltip will display information about that datapoint. To scroll the chart, click on the yellow box over the smaller chart and drag it. The larger chart above it will reflect the correct location.

The large chart displays a zoomed in version of the smaller chart

Getting started

This image shows all of the elements on the page:

Chart elements

Refer to the .css file for additional comments on the various elements and their purpose.

All the floating elements (ToolTip, DataPointMarker, AxisMarker and SmallChartWindow) are created with absolute position, which lets them be freely positioned anywhere on the page.

Using the sample in your own application

Include the .css, .js and .ashx files in your application.
Edit the DrawChart.ashx file:
- Modify the CreateChart() function to change how the Big and Small charts will look (including the width and height of the two charts).
- Modify the LoadData() and AssignDataToChart() functions to load your data and assign it to the chart. In the supplied sample, data is loaded from a CSV file.

Edit the Default.aspx file (or your chart page) in design mode.

View the page markup and add references to the following stylesheet and javascript files inside the <head> element. Note the relative paths for the .css and .js files as well as the order of the files.
```
<link href="css/FinanceChart.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript" />
<script src="js/FinanceChart.js" type="text/javascript" />
```

In the <body> of your page, include the following HTML. This acts as a container for the charts and all the elements such as tooltips and markers.

<div id="ChartContainer">
  <div id="BigChart"></div>
  <div id="SmallChart"></div>
  <div id="SmallChartWindow"></div>
  <img id="AxisMarker" src="img/trans.gif" width="2" height="2" alt="" border="0" />
  <img id="DataPointMarker" src="img/trans.gif" width="4" height="4" alt="" border="0" />
  <div id="ToolTip"></div>
</div>

Edit the Default.aspx.cs file (or your chart page).
In the Page_Load event, a temporary chart is created with a PrePaint event attached to it. During the PrePaint event, a JavaScript block (discussed in the How it works section) is created and used by the JavaScript functions to show tooltips and datapoint markers. Modify how data is appended do the scriptBlock inside the for loop.
Edit the FinanceChart.css file.
- Modify the #ChartContainer, #BigChart, #SmallChart and #SmallChartWindow elements to change the width and height properties to suit your needs. In the sample, the overall container is 500x200 with the BigChart being 500x150 and SmallChart being 500x50.
- Adjust any other properties such as the colors, font, padding, etc. to fit your needs
Edit the FinanceChart.js file.
Modify the object DataPoint(value) near the bottom of the file to represent how the data is assigned to your chart. Also modify the this.text parameter to contain the tooltip text that will be shown for all datapoints during mouse over.

How it works

Here you can see the coordinate space used by the chart image. The top-left corner pixel is (0,0). Also shown is one of the datapoints generated in the JavaScript block. The second datapoint from our chart lies at (2,98).

A zoomed in representation of the chart image showing pixel positions

During mouse movement over the big chart, we can find the pixel position of the cursor and determine if any datapoint lies at that X position. If there is, a red dot will be placed at that position. If no datapoint exists at that position (e.g. mouse is at (3,50)), then the last datapoint marker will remain and will not move.

Build the supplied sample and browse to http://localhost/FinanceChart/DrawChart.ashx?type=big (your URL might differ depending on where you deployed the application). A very large chart image will be rendered. Right click on it and view Properties. Notice that the entire image is 3000x150 in size. Repeat the above but change to type=small in the first step. The small chart will have be 500x150.

The CSS properties for the BigChart element has an overflow property set to hidden. This causes the chart image (assigned as a background image) to be clipped within the BigChart element’s width and height boundaries.

On the page containing the chart, the code-behind .cs file contains the code that handles a PrePaint event. This event will write a huge JavaScript script block that looks like this (as produced using the data in the sample project):

<script type="text/javascript">
    var BigChartImageWidth = 3000;
    var _dp = new Array(); 
    _dp[0]=new Array(106,'Jan. 3, 05',65002900,26.80,26.74),
    _dp[2]=new Array(98,'Jan. 4, 05',109442100,26.87,26.84),
    _dp[4]=new Array(105,'Jan. 5, 05',72463500,26.84,26.78),
    _dp[6]=new Array(104,'Jan. 6, 05',76890500,26.85,26.75),
    _dp[8]=new Array(106,'Jan. 7, 05',68723300,26.82,26.67),
    …
</script>

Here, each number inside _dp[##] is a pixel position along the x axis on the chart image. If there is a datapoint rendered at that pixel, there will be an entry. Each _dp[] then contains an array with all the values for that datapoint, including the first value which is the vertical position (in pixels relative to top-left corner of the big chart image). This value is used to position the datapoint marker during mouse overs. The rest of the values in the array pertain to the values you want to show in the tooltip.

Refer to the code comments in the sample project files to understand how the code works.

Conclusion

The technique presented in this article will serve as a guide on how to use JavaScript and CSS (and a little bit of creativity) to make fast interactive charts for use on your websites.

Although creating interactive charts like this is certainly possible using simple JavaScript and CSS manipulation, a better approach for providing even greater interactivity would be to use the Silverlight add-on for Dundas Chart.

To learn more about Silverlight addon for Dundas Chart visit:

http://www.dundas.com/Company/Support/AddOns/Silverlight.aspx

To learn more about developing with jQuery as well as to download the latest version, visit:

http://jquery.com/

Additional Downloads:

Interactive Financial Chart (C#, ASP.NET)

PoorExcellent