FusionCharts v3 Documentation - First chart using HTML embedding method

Embedding Charts Using <OBJECT>/<EMBED> Tags

FusionCharts 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 (e.g., ASP.NET UpdatePanel) and the AJAX response should contain <OBJECT>/<EMBED> tags.

We always recommended that you use 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 would not function as well, as they are dependent on the FusionCharts JavaScript class.

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 - 
          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 into the HTML page.

In the above code, we've have done the following:

We used <OBJECT> and <EMBED> tags to embed the 3D Column Chart (Column3D.swf) within the HTML page. We set the tags' ID and name, set the width (400 pixels) and height (300 pixels).
We load the chart SWF file using movie attribute of <OBJECT> tag and src attribute of <EMBED> tag.
We pass chart external data to FlashVars parameter/attribute using &dataUrl=Data.xml. Here, we indicate the path of the data source (XML file) relative to the HTML page – Data.xml in this case.
We pass chart width and chart height to chart by means of chartWidth and chartHeight variables through FlashVars.
We provide other required FlashVars like DOMId which is the DOM id of the chart and FlashVars like debugMode, registerWithJS.

To render a Flash movie in a browser, the HTML page must contain certain tags for initiating the Flash movie. <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.

Even though both <OBJECT> and <EMBED> tags have similar functionality, it is essential to use both the tags for the sake of cross browser compatibility. For optimum compatibility, the <EMBED> tag must be nested within the <OBJECT> tag (as shown in the code above). This way, ActiveX-enabled browsers like Internet Explorer can ignore the <EMBED> tag (as it is inside the <OBJECT> tag), and other browsers that do not recognize the <OBJECT> tag can carry on with the <EMBED> tag.

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 - 
     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 would be the same.

Depending on your coding practice, you’d 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).

When using HTML embedding, all variables to the chart are passed using FlashVars. The table below lists all such variables supported:

Variable	Description
dataURL	This variable takes the path of the XML data file/stream as value. This method is called Data Url method. It is mutually exclusive to dataXML variable. * In case both &dataURL and &dataXML are set to blank or not provided, the chart will search for default Data.xml file in the same path as the HTML file.
dataXML	This variable passes the XML embedded in <OBEJCT> or <EMBED> tag. This method is called Data String method. It is mutually exclusive to dataURL variable. * In case both &dataURL and &dataXML are set to blank or not provided, the chart will search for default Data.xml file in the same path as the HTML file.
DOMId	ID for the chart using which it will be recognized in the HTML page. Each chart on the page needs to have a unique ID.
chartWidth	Intended width for the chart (value in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)
chartHeight	Intended height for the chart (values in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)
debugMode	Whether to start the chart in debug mode which shows a Debug Window over the chart. Set it to 1 to show the Debug Window. Please see Debugging your Charts section for more details on Debug Mode.
registerWithJS	Whether to register the chart with JavaScript. This value should always be set to 1 to get maximum possible access to FusionCharts JavaScript API. But when using OBJECT/EMBED method, only minimal JavaScript functions are available to chart (e.g., setDataURL, setDataXML, print, exportChart etc.)
scaleMode	Scaling option of the chart. It can take any value out of the four: "noscale", "exactfit", "noborder" and "showall". FusionCharts works best in "noScale" mode.
lang	(optional) Preferred language for chart messages. e.g. EN. The present supported language is EN i.e. English. Other languages can be added by adding to source code of chart and then compiling it.

There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:

It does not support JSON data format. So the only data format that you can pass to chart using this method is XML.
It is not fully compatible with FusionCharts JavaScript framework, hence, many of advanced features (like Print Manager, LinkedCharts, Advenced Event management etc.) won't work.
It does not support JavaScript (HTML5) chart fallback mechanism.