Adding drill-down links to charts |
All charts in the FusionCharts XT pack (barring zoom-line chart) support drill-down functionality. This means that you can convert individual data plots (columns in column chart, pie slices in pie chart etc.) or the whole chart into hotspots (or links). These items, when clicked, can open URLs, call JavaScript functions or load LinkedCharts. Broadly, the drill-down feature can be divided into two types:
Using FusionCharts XT, you can create endless levels of drill-down. It has been kept very generic to accommodate all types of requirements. |
Using Simple Links |
Using Simple links, you can provide a URL for the linked page (or JavaScript function) for each data item on chart (columns, line anchors, area anchors, pie slices, etc.). Simple links can be in various formats:
|
Creating simple links using XML |
You can convert a data plot into a link simply by introducing the link attribute into the <set> element. Here is an example: <chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/> <!-- Simple Link --> <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <!-- Link in new window --> <set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame --> <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up --> <set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/> <!-- JavaScript function as link --> </chart> The links defined in the XML exemplify all the simple link types like simple URL, URL in new page, frame, popup, and JavaScript. |
Creating links using JSON |
Similarly, if you are using JSON data instead of XML, you must add the link property to the data object in the following way: |
{ "chart":{ "caption":"Monthly Sales Summary", "subcaption":"For the year 2006", "xaxisname":"Month", "yaxisname":"Sales", "numberprefix":"$" }, "data":[ { "label":"Jan", "value":"17400", "link":"DemoLinkPages/DemoLink1.html" }, { "label":"Feb", "value":"19800", "link":"n-DemoLinkPages/DemoLink2.html" }, { "label":"Mar", "value":"21800", "link":"F-detailsFrame-DemoLinkPages/DemoLink3.htm" }, { "label":"Apr", "value":"23800", "link":"P-detailsPopUp,width=400,height=300,toolbar=no," + "scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" }, { "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters" } ] } |
Using LinkedCharts |
This is an easy way of building drill-down charts, where detailed charts can be made to replace the parent chart or, open up in a separate dialog. The feature also allows configuration of drill-down charts from a single data source. The process has been explained in detail in next page. |