FusionCharts for Flex > Drill-Down Charts > Simple Example

FusionCharts for Flex helps to create drilldown charts with great ease. This feature is supported by all the charts, gauges and graphs in FusionCharts for Flex suite. By implementing drilldown functionality in your charts you can turn them into hotspots. You have the option of converting the whole chart/gauge/graph into a single hotspot, that points to a particular resource or you can have each data plot of the chart widgets, point to different resource.

You can define following types of link for the data plot of the chart:

  • Simple Web links that open web page in the same browser window
  • Simple Web links that open in a new browser page
  • Web Links that open in a specified Web Page frame
  • Web Links that open in a new pop-up window
  • Full chart as hotspot
  • Drill Down to Flex event handler
  • Links that execute JavaScript functions (on the same page) to be invoked as links
 
Defining Web links for a Chart

To turn a data plot into a hot spot just add the link attribute to the <set> tag, with the desired URL as the value of the link attribute.

<set ... value='2235' ... link='DrillDown.html' ...>
 
XML Example:
 
<chart caption='Half Yearly Sales Summary' subcaption='For the year 2008 - First Half' xAxisName='Month' yAxisName='Sales' numberPrefix='$' >
    <set label='Jan' value='17400' link='DemoLink1.html' />
    <set label='Feb' value='19800' link='DemoLink2.html' />
    <set label='Mar' value='21800' link='DemoLink3.html' />
    <set label='Apr' value='23000' link='DemoLink4.html' />
    <set label='May' value='29000' link='DemoLink5.html' />
    <set label='Jun' value='27600' link='DemoLink6.html' />
</chart>
 
Array Example:
 
             [Bindable]
             private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400', link:'DemoLink1.html' },
                 { label:'Feb', value:'19800', link:'DemoLink2.html' },
                 { label:'Mar', value:'21800', link:'DemoLink3.html' },
                 { label:'Apr', value:'23000', link:'DemoLink4.html' },
                 { label:'May', value:'29000', link:'DemoLink5.html' },
                 { label:'Jun', value:'27600', link:'DemoLink6.html' }
             ]);
 
XMLList Example:
 
   [Bindable]
   private var chartData:XML=
     <main>
          <data>
               <data label='Jan' value='17400' link='DemoLink1.html' />
               <data label='Feb' value='19800' link='DemoLink2.html' />
               <data label='Mar' value='21800' link='DemoLink3.html' />
               <data label='April' value='23000' link='DemoLink4.html' />
               <data label='May' value='29000' link='DemoLink5.html' />
               <data label='Jun' value='27600' link='DemoLink6.html' />
          </data>
     </main>;
 
Model Example:
 
<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <link>DemoLink1.html</link>
           </data>
           <data>
               <label>Feb</label>
                <value>19800</value>
               <link>DemoLink2.html</link>
           </data>
           <data>
               <label>Mar</label>
               <value>21800</value>
               <link>DemoLink3.html</link>
           </data>
           <data>
               <label>April</label>
                <value>23000</value>
               <link>DemoLink4.html</link>
           </data>
           <data>
               <label>May</label>
                <value>29000</value>
               <link>DemoLink5.html</link>
           </data>
           <data>
               <label>Jun</label>
                <value>27600</value>
               <link>DemoLink6.html</link>
           </data>
        </chart>

</mx:Model>
 
Opening links in new window
To open the link in a new window you have to prefix the link with n-.

<set ... value='2235' ... link='n-DrillDown.html' ...>

Example XML:
    <set label='Jan' value='17400' link='n-DemoLink1.html'/>
 
Array Example:
 
             [Bindable]
             private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400', link:'n-DemoLink1.html' },
...
             ]);
 
XMLList Example:
 
   [Bindable]
   private var chartData:XML=
     <main>
          <data>
               <data label='Jan' value='17400' link='n-DemoLink1.html' />
...
          </data>
     </main>;
 
Model Example:
 
<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <link>n-DemoLink1.html</link>
           </data>

...</mx:Model>

In the following pages we will see more advanced drill-down features like :

 

Links to Frames »