Embedding Charts Using <OBJECT>/<EMBED> Tags | ||||||||||||||||||||
FusionCharts XT can also be embedded in web pages using plain HTML and without using FusionCharts JavaScript class. For this, you need to use the <OBJECT>/<EMBED> HTML tags. This method can be implemented in applications that do not support JavaScript and in cases where you fetch the entire chart embedding code using an AJAX request (example, ASP.NET UpdatePanel) and the AJAX response should contain <OBJECT>/<EMBED> tags. We always recommended that you use the FusionCharts JavaScript class method for embedding the charts in an HTML page. That is the only way to get JavaScript (HTML5) fallback for the charts. When embedding using <OBJECT>/<EMBED> method, only Flash charts will show up. Additionally, features such as JSON data support, managed printing in Mozilla based browsers and enhanced browser-specific error handling will not function as well, as they are dependent on the FusionCharts JavaScript class. |
||||||||||||||||||||
HTML embedding with XML data provided as URL | ||||||||||||||||||||
We modify our first sample weekly-sales.html and rename it as weekly-sales-html-embed-xml-url.html, and copy the following code into it: |
||||||||||||||||||||
<html> <head> <title>My First chart using FusionCharts XT - Using HTML embedding method - XML from URL</title> </head> <body> <object width="400" height="300" id="Column3D" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" > <param name="movie" value="FusionCharts/Column3D.swf" /> <param name="FlashVars" value="&dataURL=Data.xml &chartWidth=400&chartHeight=300 &DOMId=myChartId®isterWithJS=1&debugMode=0"> <param name="quality" value="high" /> <embed src="FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml &chartWidth=400&chartHeight=300 &DOMId=myChartId®isterWithJS=1&debugMode=0" width="400" height="300" name="Column3D" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html> See it live! |
||||||||||||||||||||
The code in bold is responsible for embedding FusionCharts XT into the HTML page. In the above code, we have done the following:
To render a Flash movie in a browser, the HTML page must contain certain tags for initiating the Flash movie. The <OBJECT> and <EMBED> tags are used for this purpose. The <OBJECT> tag is recognized by Internet Explorer under Microsoft Windows and the <EMBED> tag is recognized by other browsers. |
||||||||||||||||||||
HTML embedding using XML data embedded in HTML page | ||||||||||||||||||||
You can also embed the XML in the <OBJECT>/<EMBED> tag itself without depending on the external source. |
||||||||||||||||||||
We modify our first sample weekly-sales-html-embed-xml-url.html and rename it as weekly-sales-html-embed-xml-embed.html.<html> <head> <title>My First chart using FusionCharts XT - Using HTML embedding method - XML from URL</title> </head> <body> <object width="400" height="300" id="Column3D" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=8,0,0,0" > <param name="movie" value="FusionCharts/Column3D.swf" /> <param name="FlashVars" value="&chartWidth=400&chartHeight=300 &DOMId=myChartId®isterWithJS=1&debugMode=0 &dataXML=<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales' numberPrefix='$'> <set label='Week 1' value='14400' /> <set label='Week 2' value='19600' /> <set label='Week 3' value='24000' /> <set label='Week 4' value='15700' /> </chart>" <param name="quality" value="high" /> <embed src="FusionCharts/Column3D.swf" flashVars="&chartWidth=400&chartHeight=300 &DOMId=myChartId®isterWithJS=1&debugMode=0 &dataXML=<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales' numberPrefix='$'> <set label='Week 1' value='14400' /> <set label='Week 2' value='19600' /> <set label='Week 3' value='24000' /> <set label='Week 4' value='15700' /> </chart>" width="400" height="300" name="Column3D" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html> See it live! |
||||||||||||||||||||
As you can note from the bold text in the code above, we have only replaced &dataURL FlashVars variable with &dataXML and to this variable we have passed the chart XML data. The resultant chart will be the same. Depending on your coding practice, you will be enclosing the entire XML string either using single or double quotation marks (",""). So, if you are enclosing the entire XML in double quotes, then the XML attributes must be encapsulated in single quotes. Using, single quotes for encapsulation of the entire XML string and also for individual attributes, will lead to a conflict. Conflict arising due to improper use of quotes does not raise an error, but shows an empty space in place of chart (or sometimes a JavaScript error). |
||||||||||||||||||||
FusionCharts XT FlashVars details | ||||||||||||||||||||
When using HTML embedding, all variables to the chart are passed using FlashVars. The table below lists all such variables supported:
|
||||||||||||||||||||
Limitations of using HTML embed method | ||||||||||||||||||||
There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:
|