ChartDirector 6.2 (.NET Edition)

Introduction to Clickable Charts


This section is about clickable charts for web applications. For Windows Forms or WPF applications, by using the WinChartViewer or WPFChartViewer, all hot spots are always clickable and will trigger hot spot events such as WinChartViewer.ClickHotSpot or WPFChartViewer.ClickHotSpot. They are analogous to standard mouse events so will not be discussed further.

ChartDirector creates charts as images, which are incorporated into HTML web pages with <IMG> tags. In HTML, an "image map" comprises of <MAP> and <AREA> tags to define the "hot spots" on the image. The <AREA> tags are similar to <A> tags. They can be used as hypertext links, display tooltips, and can have mouse or touch events.

ChartDirector can generate image maps for the data representation on the chart (bars for bar charts, sectors for pie charts, areas for area charts, etc.), for the legend keys, title boxes, custom text boxes and axis labels. This allows these objects to be clickable. ChartDirector image maps are "open-ended". Custom <AREA> tags can be added to the image map to define custom hot spots on the chart.

In standard image maps, the hot spots works like hypertext links. When a hot spot is clicked, the browser will go to the URL specified in the <AREA> tag. By using the WebChartViewer, mouse clicks can trigger postback events instead. This is by using a special URL generated with WebChartViewer.GetPostBackURL. With this URL, mouse clicks will trigger a WebChartViewer.ClickHotSpot event on the server side.

Clickable charts are most often used for "drill-down" features. For example, a pie chart can be created such that when a sector is clicked, the browser will load another web page with a more detail chart about that sector. Similarly, a daily bar chart can be created such that when a bar is clicked, the browser will load another web page with an hourly chart for the clicked day.