Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/drilldown/simple.html
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="../Style.css" type="text/css" /></head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td><h2 class="pageHeader">Creating Drill-Down Charts</h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts can be easily and extensively
used to create drill-down charts. All the charts in FusionCharts suite
support drill down for data elements i.e., in each chart type, the data
plot of that chart (columns in Column Charts, Pie slices in Pie Charts
etc.) can act as hotspots for the chart. Using the drill down functionality
provided by FusionCharts, you can easily produce charts that enact "drill
down" or "zoom in (data)" capabilities. </p>
<p>In FusionCharts Free, you can define the following types of link for the
data plot:</p>
<ul>
<li>Simple links that open in the same page</li>
<li>Simple links that open in a new page</li>
<li>Existing JavaScript functions (on the same page) to be invoked as
links</li>
</ul></td>
</tr>
<tr>
<td valign="top" class="header">Defining links for a Chart</td>
</tr>
<tr>
<td valign="top" class="text"> <p>To define a simple link for any data plot,
just define the <span class="codeInline">link</span> attribute for the
<span class="codeInline"><set></span> element as under:<br />
<span class="codeInline"><set ... value='2235' ... <strong>link='ShowDetails.asp%3FMonth%3DJan'</strong>
...> </span></p>
<p>With the above XML, the data plot (be it column, pie or line/area anchor),
when clicked, will take to the page <span class="codeInline">ShowDetails.asp?Month=Jan</span>,
which might contain another chart to show detailed results for the month
of January.</p>
<p>As you will note, the above link has been URL Encoded. FusionCharts expects
all the links in URL Encoded format, if you have characters special characters
(like ?,&, etc.) in your link. When the user clicks on the link, FusionCharts
decodes it and invokes <span class="codeInline">ShowDetails.asp?Month=Jan</span>. </p>
<p class="highlightBlock">All the server side scripting languages provide
a generic function to URL Encode any string - like in ASP and ASP.NET,
we've Server.URLEncode(strURL) , in PHP we've <span class="codeInline">urlencode(dataURL)</span>and so on.</p> </td>
</tr>
<tr>
<td valign="top" class="text">XML Example:</td>
</tr>
<tr>
<td valign="top" class="codeBlock"><graph caption='Monthly Sales Summary'
subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><br />
<set name='Jan' value='17400' link='DemoLinkPages/DemoLink1.html' color='AFD8F8' /><br />
<set name='Feb' value='19800' link='DemoLinkPages/DemoLink2.html' color='F6BD0F' /><br />
<set name='Mar' value='21800' link='DemoLinkPages/DemoLink3.html' color='8BBA00' /><br />
<set name='Apr' value='23800' link='DemoLinkPages/DemoLink4.html' color='FF8E46' /><br />
<set name='May' value='29600' link='DemoLinkPages/DemoLink5.html' color='008E8E' /><br />
<set name='Jun' value='27600' link='DemoLinkPages/DemoLink6.html' color='D64646' /><br />
</graph></td>
</tr>
<tr>
<td valign="top" class="text">The XML will create a chart each of whose dataplots (here columns) links to a page of its won. The Link mouse cursor appears on hovering over each column. </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/drillDown.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td valign="top" class="text">On clicking the linked page opens up : </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/drillDownL.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Opening links in new window</td>
</tr>
<tr>
<td valign="top" class="text">Quite often, you might want to open the drill-down
link in a new window instead of the same window. To have a link open in
a new window, all you need to do is, add <span class="codeInline">n-</span>
before any link. E.g.,
<p><span class="codeInline"><set ... value='2235' ... <strong>link='n-ShowDetails.asp%3FMonth%3DJan'</strong>
...> </span></p>
<p>The above link, when clicked, would open in a new window.</p>
<p>Example XML:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><graph caption='Monthly Sales Summary'
subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><br />
<set name='Jan' value='17400' link='<strong>n-</strong>DemoLinkPages/DemoLink1.html' color='AFD8F8' /><br />
<set name='Feb' value='19800' link='<strong>n-</strong>DemoLinkPages/DemoLink2.html' color='F6BD0F' /><br />
<set name='Mar' value='21800' link='<strong>n-</strong>DemoLinkPages/DemoLink3.html' color='8BBA00' /><br />
<set name='Apr' value='23800' link='<strong>n-</strong>DemoLinkPages/DemoLink4.html' color='FF8E46' /><br />
<set name='May' value='29600' link='<strong>n-</strong>DemoLinkPages/DemoLink5.html' color='008E8E' /><br />
<set name='Jun' value='27600' link='<strong>n-</strong>DemoLinkPages/DemoLink6.html' color='D64646' /><br />
</chart></td>
</tr>
<tr>
<TD>
<p class="highlightBlock">For more detailed description of DrillDown please refer to "Creating Drill-down Charts" in "Using FusionCharts with ASP" or "Using FusionCharts with ASP.NET" or "Using FusionCharts with PHP".</p> </TD>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat