Client Side Dynamic Charts > Using Client Side JavaScript | ||||
FusionCharts is a Macromedia Flash™ object, which has been coded closely in integration with JavaScript. It exposes a set of methods that lets JavaScript update its data. The entire process of JavaScript to FusionCharts communication can be explained using the diagram below: |
||||
As you can see above, the web page consists of the following elements:
Let's quickly see the code for the JavaScript function setFCNewData. It can be listed as under: |
||||
function setFCNewData(objFlash, strXML)
{ //This function updates the data of a FusionCharts present on the page //Get a reference to the movie var FCObject = getObject(objFlash); //Set the data //Set dataURL to null FCObject.SetVariable('_root.dataURL',""); //Set the flag FCObject.SetVariable('_root.isNewData',"1"); //Set the actual data FCObject.SetVariable('_root.newData',strXML); //Go to the required frame FCObject.TGotoLabel('/', 'JavaScriptHandler'); } function getObject(objectName) { if (navigator.appName.indexOf ("Microsoft") !=-1) { return window[objectName] } else { return document[objectName] } } |
||||
In the above code setFCNewData function takes in two parameters:
In the above code, you can also see another associate function getObject required by setFCNewData function. This function is used to get a reference to the FusionCharts Flash object, from the string id/name passed to it, to make the above script compatible for all browsers. Let's now implement this JavaScript in an HTML page to see a full fledged solution. We'll create a small single series 3D column chart depicting the "Quarterly Sales Summary". Initially, when the page is loaded, the chart will show the data for year 1998. Then, we would place three buttons in the same HTML page, namely "Show for 1996", "Show for 1997" and "Show for 1998". We'll also define event handlers for these three buttons and link them to the above JavaScript code, so that when the end viewer clicks on the buttons, the chart would dynamically update itself. The end interface would look something as under: |
||||
The entire HTML code and the binding JavaScript code for the above chart can be listed as under: | ||||
<HTML> <HEAD> <TITLE>FusionCharts Client Side Dynamic Chart</TITLE> <LINK REL=stylesheet HREF="Style.css" /> <SCRIPT LANGUAGE="JavaScript"> <!-- //Create 3 variables to store the XML data for 3 years var strXML1996, strXML1997, strXML1998; //Set the XML data for each one of them strXML1996 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1996' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='253500' color='0099FF'/> <set name='Quarter 2' value='354500' color='FF9933'/> <set name='Quarter 3' value='453500' color='FF66CC'/> <set name='Quarter 4' value='483500' color='CCCC00'/></graph>"; strXML1997 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1997' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='253500' color='0099FF'/> <set name='Quarter 2' value='454500' color='FF9933'/> <set name='Quarter 3' value='412500' color='FF66CC'/> <set name='Quarter 4' value='483500' color='CCCC00'/></graph>"; strXML1998 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1998' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='353500' color='0099FF'/> <set name='Quarter 2' value='354500' color='FF9933'/> <set name='Quarter 3' value='512500' color='FF66CC'/> <set name='Quarter 4' value='583500' color='CCCC00'/></graph>"; function setFCNewData(objFlash, strXML)
{ |
||||
Explanation | ||||
In the above code, we're first presenting a FusionCharts chart to the user, when the page is loaded. This chart shows the Quarterly Sales for 1998. The dataXML method has been used to present the data in the first instance (see the code snippet below). We've named this instance of FusionCharts chart as FusionCharts_1. | ||||
<OBJECT ... id="FusionCharts_1"
..> <PARAM NAME=movie VALUE="../../Charts/FC_2_3_Column3D.swf"> <PARAM NAME=FlashVars VALUE="&chartWidth=450&chartHeight=300&dataXML=<graph ... >...</graph>"> .... <EMBED src="../../Charts/FC_2_3_Column3D.swf" FlashVars="&chartWidth=450&chartHeight=300&dataXML=<graph ... >...</graph>" quality=high ... NAME="FusionCharts_1" ></EMBED> </OBJECT> |
||||
So, when the page loads, FusionCharts displays this data. Next, we've initialized three variables in our JavaScript code snippet namely, strXML1996, strXML1997 and strXML1998. Each of these variable stores the XML data for a particular year. |
||||
//Create 3 variables
to store the XML data for 3 years var strXML1996, strXML1997, strXML1998; //Set the XML data for each one of them strXML1996 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1996' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='253500' color='0099FF'/> <set name='Quarter 2' value='354500' color='FF9933'/> <set name='Quarter 3' value='453500' color='FF66CC'/> <set name='Quarter 4' value='483500' color='CCCC00'/></graph>"; strXML1997 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1997' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='253500' color='0099FF'/> <set name='Quarter 2' value='454500' color='FF9933'/> <set name='Quarter 3' value='412500' color='FF66CC'/> <set name='Quarter 4' value='483500' color='CCCC00'/></graph>"; strXML1998 = "<graph xaxisname='Quarter' yaxisname='Sales' caption='Quarterly Sales for 1998' subCaption='(All Figures in $)' numberPrefix='$' decimalPrecision='0'> <set name='Quarter 1' value='353500' color='0099FF'/> <set name='Quarter 2' value='354500' color='FF9933'/> <set name='Quarter 3' value='512500' color='FF66CC'/> <set name='Quarter 4' value='583500' color='CCCC00'/></graph>"; |
||||
Thereafter, we place our JavaScript function setFCNewData and the associate function getObject. Towards the end, we define the three buttons namely, "Show for 1996", "Show for 1997" and "Show for 1998". Also, the onClick event handlers for each of the buttons has been defined (as under): |
||||
<INPUT TYPE='button' class='button' value='Show
for 1996' onClick="javaScript:setFCNewData('FusionCharts_1',
strXML1996);"> <INPUT TYPE='button' class='button' value='Show for 1997' onClick="javaScript:setFCNewData('FusionCharts_1', strXML1997);"> <INPUT TYPE='button' class='button' value='Show for 1998' onClick="javaScript:setFCNewData('FusionCharts_1', strXML1998);"> |
||||
So, when the user clicks on any of the button, setFCNewData JavaScript function is invoked. To this function, we pass the id/name of the FusionCharts chart object (FusionCharts_1 in this case) as a string. We also pass a reference of the JavaScript variable which holds the XML data to show i.e., for the 1996 button, we pass the reference of strXML1996 variable, as it contains the XML data for the year 1996. The end result looks as under (it's a live version below - click on any button to see the effect): |
||||
|
||||
Compatibility | ||||
JavaScript to FusionCharts communication is
compatible with the following browsers: Netscape Navigator 3.0 - 4.7x, and Netscape 6.2 or higher (Windows 95/98/NT/2000/XP or MacOS; LiveConnect and Java-enabled) Internet Explorer 3.0 and above (Windows 95/98/NT/2000/XP only; ActiveX enabled) Mozilla |
||||