When a user views a chart and finds something interesting, it is natural that the user would like to see the detail information regarding that interesting point. It is usually a pie in a pie chart, a bar in a bar chart or a point in a line chart. Chart components support such drill down facility by automatically cutting a chart into area components and users can then click on the chart to fire an onClick MouseEvent. Developers then locate the area component and do whatever appropriate drill down.
In the area component's componentScope there are some useful information that developers can use them.
|
name |
description |
|---|---|
|
entity |
Entity type of the area. (e.g. TITLE, DATA, CATEGORY, LEGEND) |
|
series |
Series name of the associated data (CategoryModel, XYModel, or HiLoModel). |
|
category |
Category name of the associated data (PieModel or CategoryModel). |
|
url |
An url in string that can be used to drill down to a legacy page. |
|
value |
Numeric value of the associated data ( PieModel or CategoryModel). |
|
x |
x value of the associated data (XYModel). |
|
y |
y value of the associated data (XYModel). |
|
date |
date value of the associated data (HiLoModel). |
|
open |
open value of the associated data (HiLoModel). |
|
high |
high value of the associated data (HiLoModel). |
|
low |
low value of the associated data (HiLoModel). |
|
close |
close value of the associated data (HiLoModel). |
|
volume |
volume value of the associated data (HiLoModel). |
In the following example, we provide an onClick event listener on the chart. It locates the associated area component and show the category of that area (i.e. the pie).
<chart id="mychart" type="pie" width="400" height="250">
<attribute name="onClick">
alert(self.getFellow(event.getArea()).getAttribute("category"));
</attribute>
<zscript><![CDATA[
PieModel model = new PieModel();
model.setValue("C/C++", new Double(17.5));
model.setValue("PHP", new Double(32.5));
model.setValue("Java", new Double(43.2));
model.setValue("VB", new Double(10.0));
mychart.setModel(model);
]]></zscript>
</chart>