FusionCharts for Flex also allows to open your
links in pop-up windows. To open a link in pop-up window, you need to
define the link within your XML data as shown below:
<set .. value='235' link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no,
resizable=no-ShowDetails.html" />
Here, we've:
- Prefixed the link with P- so as to denote that the link is to be opened
in a new pop-up window.
- Specified a name for the new window. In this case it's detailsWin.
If you want all the links to open in the same pop-up, use the same window
name across all links. However, if you want each link to open in a new
pop-up, specify a different window name for each link.
- After the name of the pop-up window comes the list of attributes for
the new window separated by commas. Possible list of attributes is defined
below.
- Finally, the actual link to be invoked is defined after a dash (-).
|
- height
Specifies the height of the window in pixels.
Value = number
- width
Specifies the width of the window in pixels.
Value = number
- resizable
When enabled, allows the user to manually resize the window by dragging
its edges or corners.
Value = yes or no, 1 or 0.
- scrollbars
Specifies whether or not to display the horizontal and vertical scrollbars
that normally appear when the page content is larger than the screen.
Value = yes or no, 1 or 0.
- menubar
Specifies whether or not to display a menu bar at the top of the window.
Value = yes or no, 1 or 0.
- toolbar
Specifies whether or not to display the main toolbar (with the back,
forward, stop etc. buttons).
Value = yes or no, 1 or 0.
- location
Specifies whether or not to display the location bar (the Address Bar
in Internet Explorer) - where URLs are typed and displayed.
Value = yes or no, 1 or 0.
- directories
Specifies whether or not to display any additional toolbar (e.g the
Links Bar in Internet Explorer).
Value = yes or no, 1 or 0.
- status
Specifies whether or not to display the status bar at the foot of the
window.
Value = yes or no, 1 or 0.
- left
Specifies the distance in pixels of the new window from the left edge
of the screen. (This applies to Internet Explorer. For Netscape Navigator
use screenX).
Value = number
- top
Specifies the distance in pixels of the new window from the top edge
of the screen. (This applies to Internet Explorer. For Netscape Navigator
use screenY).
Value = number
- fullscreen
When enabled causes the window to open in full-screen mode (Internet
Explorer only.)
Value = yes or no, 1 or 0.
|
|
Sample XML: |
|
<chart caption='Half Yearly Sales Summary'
subcaption='For the year 2008 - First Half' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html'/> <set
label='Feb' value='19800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html'/> <set
label='Mar' value='21800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <set
label='Apr' value='23000' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html'/> <set
label='May' value='29000' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html'/> <set label='Jun' value='27600' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html'/> </chart> |
|
Array Example |
|
[Bindable] private var chartData:ArrayCollection=new ArrayCollection([ { label:'Jan', value:'17400', link:'P-detailsWin,width=400,height=300,toolbar=no, scrollbars=no,
resizable=no-ShowDetails.html' } ]); |
|
XMLList Example: |
|
[Bindable] private var chartData:XML= <main> <data> <data label='Jan' value='17400' link='P-detailsWin,width=400,height=300,toolbar=no, scrollbars=no, resizable=no-ShowDetails.html'/> </data> </main>; |
|
Model Example: |
|
<mx:Model id="chartData"> <chart> <data> <label>Jan</label> <value>17400</value> <link>P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no,
resizable=no-ShowDetails.html</link> </data> </chart>
</mx:Model> |