You are viewing documentation for an older version. For current documentation - click here.
Embedding Charts Using <object>/<embed> HTML tags

FusionWidgets 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. You can also use this method where the entire chart embedding code is fetched using an AJAX request (e.g., ASP.NET UpdatePanel) and the AJAX response should contain the <object>/<embed> tags.

We always recommend that you use FusionCharts JavaScript Class method for embedding the charts in an HTML page. This 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, the following features will not be supported as they are dependent on the FusionCharts JavaScript Class:

  • JSON data support
  • Managed printing in Mozilla based browsers
  • Enhanced browser-specific error handling
HTML embedding with XML data provided as URL

Let us create a new HTML file, cust-satisfaction-html-xml-url.html and copy the following code into it: 

<html>
	<head>
		<title>My First chart using FusionWidgets XT - 
		Using HTML embedding method - XML from URL</title>
	</head>
	<body>
	<object width="400" height="200" id="AngularGauge"
		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="Charts/AngularGauge.swf" />
	<param name="FlashVars" value="&dataURL=Data.xml
		&chartWidth=400&chartHeight=200
		&DOMId=myChartId&registerWithJS=1&debugMode=0">
	<param name="quality" value="high" />
	<embed src="Charts/AngularGauge.swf" flashVars="&dataURL=Data.xml
		&chartWidth=400&chartHeight=200
		&DOMId=myChartId&registerWithJS=1&debugMode=0"
		width="400" height="200" name="Angular Gauge"
		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 FusionWidgets XT into the HTML page.

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

  • Used <object> and <embed> tags to embed the Angular Gauge (AngularGauge.swf) within the HTML page. We set the tags' ID and name, set the width (400 pixels) and height (200 pixels).
  • Loaded the chart SWF file using movie parameter of <object> tag and src attribute of <embed> tag.
  • Passed 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.
  • Passed chart width and chart height to chart by means of chartWidth and chartHeight variables through FlashVars.
  • Provided 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, Active X-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.

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 cust-satisfaction-html-xml-url.html and rename it as cust-satisfaction-html-string.html.

<html>
	<head>
	<title>My First chart using FusionWidgets XT - 
     Using HTML embedding method - XML from String</title>
	</head>
	<body>
	<object width="400" height="200" id="AngularGauge" 
            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="Charts/AngularGauge.swf" />
         <param name="FlashVars" value="&chartWidth=400&chartHeight=300
                    &DOMId=myChartId&registerWithJS=1&debugMode=0
                    &dataXML=<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' numberSuffix='%25' showValue='1'>
			<colorRange>
				<color minValue='0' maxValue='75' code='FF654F'/>
				<color minValue='75' maxValue='90' code='F6BD0F'/>
				<color minValue='90' maxValue='100' code='8BBA00'/>
			</colorRange>
			<dials>
				<dial value='92'/>
			</dials>
		</chart>"/>      
         <param name="quality" value="high" />
         <embed src="Charts/AngularGauge.swf"
                flashVars="&chartWidth=400&chartHeight=300
                    &DOMId=myChartId&registerWithJS=1&debugMode=0
                    &dataXML=<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' numberSuffix='%' showValue='1'>
				<colorRange>
					<color minValue='0' maxValue='75' code='FF654F'/>
					<color minValue='75' maxValue='90' code='F6BD0F'/>
					<color minValue='90' maxValue='100' code='8BBA00'/>
				</colorRange>
				<dials>
					<dial value='92'/>
				</dials>
			</chart>"             
              width="400" height="200" name="AngularGauge" 
              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’d be enclosing the entire XML string using either single quotation marks (') 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.
FusionWidgets XT FlashVars details

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/JSON data/stream as value. This method is called Data URL method. It is mutually exclusive to Data String 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 <object> 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 percentage with %25 as suffix).
chartHeight Intended height for the chart (values in pixels without any px suffix or value in percentage with %25 as suffix)
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 the JavaScript APIs of the chart. 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". FusionWidgets XT 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 the source code of chart and then compiling it.
Limitations of using HTML embed method

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 Class, hence, many of advanced features (like Print Manager, LinkedCharts, Advanced Event management etc.) won't work
  • It does not support JavaScript (HTML5) chart fallback mechanism