FusionCharts for Flex > Drill Down Charts > Full Chart as a hotspot

FusionCharts for Flex allows to turn the entire chart into a hotspot. This is useful, when you want to display a small thumbnail of the chart, which when clicked opens a larger and more detailed chart.

To set the entire chart as a hotspot, just specify the target link in clickURL attribute of <chart> element within your Flex project as under:

<chart ... clickURL='DetailedChart.html' ...>

You can again specify the link in five ways:

  1. Simple link opening in same window
  2. Simple link opening in new window
  3. Link to another frame
  4. Link opening in a new pop-up window
  5. Existing JavaScript functions (on the same page) to be invoked as links

If you set the entire chart as hotspot, the other links on the chart (individual links for data plot) wouldn't work.

 
Example XML:
<chart caption='Half Yearly Sales Summary' subcaption='For the year 2008 - First Half' yAxisName='Sales' numberPrefix='$' clickURL='n-http://www.infosoftglobal.com'>
   <set label='Jan' value='17400' />
   <set label='Feb' value='19800' />
   <set label='Mar' value='21800' />
   <set label='Apr' value='23800' />
   <set label='May' value='29600' />
   <set label='Jun' value='27600' />
</chart>
 
Array Example:
 
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400', clickURL:'n-http://www.infosoftglobal.com'}
             ]);
 
XMLList Example:
 
[Bindable]
private var chartData:XML=
     <main>
         <data>
            <data label='Jan' value='17400' clickURL='n-http://www.infosoftglobal.com'/>
         </data>
    </main>;
 
Model Example:
 
<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <clickURL>n-http://www.infosoftglobal.com</clickURL>
           </data>
        </chart>

</mx:Model>