FusionCharts

FusionCharts can be used to create clickable charts. All the charts in the new suite now support this click functionality.

By clickable, it means the chart can response to mouse events just like an ordinary HTML link orbutton. This includes mouse clicking, and also other mouse events such as “onMouseOver” or “onMouseOut”. onMouseOver and onMouseEvents are used to show/hide the hover caption box.

Clickable charts are most often used to produce charts that have “drill down” or “zoom in” capabilities. For example, a pie chart could be created such that when a user clicks on the sectors, the browser will load another web page containing a more detail chart regarding that sector. Similarly, a day-of-week bar chart could be created such that when a user clicks on a bar, the browser will load an hour-of-day chart for the day that the user has clicked.

To define a link on the chart, we use the link attribute of the <set> element as under:
<set name='Jan' value='2235' link='ShowDetails.asp?Month=Jan' …>

Thus, as you can see above, the data set (column, line, pie …) when clicked will take to a page ShowDetails.asp?Month=Jan, which might contain another chart to show detailed results for the month of January.

Similarly, if we wanted the page ShowDetails.asp?Month=Jan open in a new window, we would have to specify the following:
<set name='Jan' value='2235' link='N-ShowDetails.asp?Month=Jan' …>

In this example continued from our previous Factory Output Report example, we will create a pie chart that displays total output for each of the factories. When a pie slice is clicked, the browser will load a column chart showing the detailed breakup of output of each factory. The code of this example application is present under Contents/Code/Clickable.

The page Default.asp shows up the pie chart that displays total output for each of the factories. It contains the following code:

'Generate the graph element string
strXML = "<graph caption='Factory Output report' subcaption='Factory wise report' xAxisName='Factory Name'>"
'Now, we first iterate through each factory
strQuery = "select * from Factory_Master"
Set oRs = oConn.Execute(strQuery)
While Not oRs.Eof
intCounter = intCounter + 1
Set oRs2 = Server.CreateObject("ADODB.Recordset")
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" & ors("FactoryId")
Set oRs2 = oConn.Execute(strQuery)
strXML = strXML & "<set name='" & ors("FactoryName") & "' value='" & ors2("TotOutput") & "' color='" & Colors(intCounter) & "' link='Detailed.asp?FactoryId=" & ors("FactoryId") &"'/>"
Set oRs2 = Nothing
oRs.MoveNext
Wend
strXML = strXML & "</graph>"
Set oRs = nothing
%>
<TABLE WIDTH='100%' align=center cellpadding=0 cellspacing=0>
<TR class=trdark>
<TD align=center>
<SPAN CLASS=headerWhite>FusionCharts Clickable Sample: Factory Output Report</SPAN>
</TD>
</TR>
<TR>
<TD height=3>
 
</TD>
</TR>
<TR>
<TD align='center'>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="565" HEIGHT="420" id="FusionCharts" ALIGN="">
<PARAM NAME=movie VALUE="../Charts/FC2Pie3D.swf">
<PARAM NAME=FlashVars VALUE="&dataXML=<%= strXML%>">
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="../Charts/FC2Pie3D.swf" FlashVars="&dataXML=<%= strXML%>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FusionCharts" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
</TD>
</TR>
<TR>
<TD height=3>
 
</TD>
</TR>
<TR class=trdark>
<TD align=right>
<SPAN CLASS=headerWhite>© InfoSoft - All Rights Reserved </SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

When you see this page in a browser, you'll get the following output:

Here, note the line where we have specified the link as under:
strXML = strXML & "<set name='" & ors("FactoryName") & "' value='" & ors2("TotOutput") & "' color='" & Colors(intCounter) & "' link='Detailed.asp?FactoryId=" & ors("FactoryId") &"'/>"

So, as you might have already guessed, Detailed.asp renders a column chart showing the detailed breakup of output of each factory. It contains the following code:

<%@ Language=VBScript %>


<HTML>
<HEAD>
<TITLE>
Factory Output Report - Graph
</TITLE>
<LINK REL='stylesheet' HREF='Styles.css'>
</HEAD>
<BODY TopMargin=0 LeftMargin=0>
<%
Dim oRs, strQuery
'strXML will be used to store the entire XML document generated
Dim strXML, intCounter
Dim FactoryId
'Request the factory Id from Querystring
FactoryId = Request.QueryString("FactoryId")
intCounter = 0
Set oRs = Server.CreateObject("ADODB.Recordset")
'Generate the graph element string
strXML = "<graph caption='Factory Output report' subcaption='Factory " & FactoryId &" Output ' xAxisName='Date'>"
'Now, we get the data for that factory
strQuery = "select * from Factory_Output where FactoryId=" & FactoryId
Set oRs = oConn.Execute(strQuery)
While Not oRs.Eof
intCounter = intCounter + 1
strXML = strXML & "<set name='" & ors("DatePro") & "' value='" & ors("Quantity") & "' color='" & Colors(intCounter) & "'/>"
Set oRs2 = Nothing
oRs.MoveNext
Wend
strXML = strXML & "</graph>"
Set oRs = nothing
%>
<TABLE WIDTH='100%' align=center cellpadding=0 cellspacing=0>
<TR class=trdark>
<TD align=center>
<SPAN CLASS=headerWhite>FusionCharts Clickable Sample: Factory Output Report</SPAN>
</TD>
</TR>
<TR>
<TD height=3>
 
</TD>
</TR>
<TR>
<TD align='center'>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="565" HEIGHT="420" id="FusionCharts" ALIGN="">
<PARAM NAME=movie VALUE="FC2Column.swf">
<PARAM NAME=FlashVars VALUE="&dataXML=<%= strXML%>"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="FC2Column.swf" FlashVars="&dataXML=<%=strXML%>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FusionCharts" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
</TD>
</TR>
<TR>
<TD height=3>
 
</TD>
</TR>
<TR class=trdark>
<TD align=right>
<SPAN CLASS=headerWhite>© InfoSoft - All Rights Reserved </SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

It has the following output:

Thus, you saw how easy it is to create drillable charts using FusionCharts – you don't need to depend on complex image maps or area maps to define the click functionality. FusionCharts handles it all for you.