ChartDirector 6.1 (Java Edition)

Introduction to Clickable Charts


This section is about clickable charts for web applications. For desktop Java applications, by using the ChartViewer, all hot spots are always clickable and can be listened to using HotSpotListener and HotSpotMotionListener interfaces. 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.

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.