FusionCharts for Flex > Drill Down Charts > Linking to Frames

FusionCharts for Flex allows to open links in specific frames. To do so, you have to specify the name of the frame as the link in your Flex project. This feature can be very useful when creating simulated drilldown reports and dashboards.

To open link in a specified frame, you need to set the link in the following manner:

The first character in the link is F, which denotes that this link is to be opened in a frame. Post F, we add a dash (-) and then specify the name of frame in which we want the link to open. Next, we add another dash character followed by the URL of the frame.

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='F-detailsFrame-DemoLink1.html'/>
   <set label='Feb' value='19800' link='F-detailsFrame-DemoLink2.html'/>
   <set label='Mar' value='21800' link='F-detailsFrame-DemoLink3.html'/>
   <set label='Apr' value='23000' link='F-detailsFrame-DemoLink4.html'/>
   <set label='May' value='29000' link='F-detailsFrame-DemoLink5.html'/>
   <set label='Jun' value='27600' link='F-detailsFrame-DemoLink6.html'/>
</chart>

Array Example:

[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400', link:'F-detailsFrame-DemoLink1.html'}
             ]); 

XMLList Example:

[Bindable]
private var chartData:XML=
     <main>
         <data>
            <data label='Jan' value='17400' link='F-detailsFrame-DemoLink1.html'/>
         </data>
    </main>;

Model Example:

<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <link>F-detailsFrame-DemoLink1.html</link>
           </data>
        </chart>

          
</mx:Model>

In this example, FrameExample.html is the main frameset page, which is vertically divided into two frames – the one on top contains the chart (FramePages\FrameChart.html) and the one below it shows the linked pages. If the user has not performed any click action on the chart – he will get the default page LowerFrame.html in the lower frame. The default frame contains the message "Click on columns above to view details".

The setup looks as under:

Following is the HTML for FrameExample.html:

<html>
   <head>
      <title>
         FusionCharts 
      Frame Drill-down example
      </title>
   </head>
   <frameset rows="350,*" 
      cols="*" frameborder="YES" border="1" framespacing="0">
      <frame src="FramePages/FrameChart.html" 
      name="chartFrame" scrolling="NO" noresize >
      <frame src="FramePages/LowerFrame.html" 
      name="detailsFrame" scrolling="Auto" noresize>
   </frameset>
</html>

The top frame (FramePages\FrameChart.html) contains the chart and is named chartFrame. The bottom frame responds to click events from the chart and is named detailsFrame, and we use this name in our XML data links.

Now, when the user clicks the links on the chart, they will open up in detailsFrame frame.