FusionCharts simple tutorial (7) ----- use FusionCharts to implement the drill-down Function

The FusionCharts mentioned above all perform operations on the basic attributes of FusionCharts. The following blog introduces the advanced features of FusionCharts, including: add drill-down links, customize charts using Style styles, use grid components, and export them as images.

During our development, we may need such a requirement. When you click a column or pie chart, you can see more detailed information. We call this a drill-down request. FusionCharts provides excellent support for drill-down. As we have known before, we only need to care about how data is generated and how the relational diagram is generated, so the drill-down is very simple for FusionCharts. For FusionCharts drill-down, you only need to add a link.

FusionCharts currently supports several drill-down modes.

1. drilling in the same window

2. drilling in the new window

3. drilling in the specified frame

4. Perform drilling in the pop-up window.

5. Trigger js Functions

1. drill down in the same window

It is very easy to add a link to FusionCharts... /> Add the link attribute to the element. As follows:

If you use a columnar image to display the above data, it is like.

3. drilling in the specified frame

To display the drill-down image in the frame, you need to add F-name to the link attribute, where name indicates the name of the frame. So the link is F-frameName ../myFusionChart_02/newLink.html.

Example XML:

Html:

Before clicking

5. Trigger js Functions

In addition to the above link form, FusionCharts also supports javascript Functions. Usage

<Set label = 'usa' value = '000000' link = "j-showData ('Spain ', 26)"/>

J-: triggers the js function myJS (). Note that the semicolon is not allowed.

Or

<Set label = 'usa' value = '000000' link = "JavaScript: showData ('Spain, 26')"/>

FusionCharts v3.1 and later versions can also be used in the following form: j-{user function name}-{parameter }:

<Set label = 'usa' value = '000000' link = "j-showData-Spain, 26"/>

Example XML

HTML

This is the first fusionChart image.