The resultant chart will be rendered as shown in the image below:

See it live!

What happens if Flash player is not available?

In case Flash Player is not available on certain devices (like iPad/iPhone), FusionCharts JavaScript Class automatically renders the same chart using JavaScript. If you are running the sample from local file system, please note that you need to provide the data using the Data String method, i.e., passing the data (XML/JSON) to the chart as String or JSON Object. Due to security implementation of many browsers which blocks AJAX in local file systems, and since the JavaScript charts use AJAX, the Data URL method (loading data from external XML/JSON file) will not work.

You can also render JavaScript chart using the same method. All you need to do is to explicitly set the renderer property to javascript. In case you are running the sample from local file system, you also need to set the chart data as string. The code snippet below contains the modified sample:

$("#chartContainer").insertFusionCharts({
               swfUrl: "Charts/AngularGauge.swf", 
               renderer: "JavaScript",
               width: "400", 
               height: "300", 
               id: "myChartId",

               dataFormat: "xml", 
               dataSource: "<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>"
         }); 

The resultant chart would look like the image shown below:

See it live!

Apart from XML you can also provide data in JSON format. You can provide JSON as JavaScript Object, as JSON string or as a URL. To provide data as JSON you need to pass the JSON data source to dataSource property and set json or jsonurl to dataFormat property.

The code snippet below shows how you can pass JSON Object as data source:

$("#chartContainer").insertFusionCharts({
	swfUrl: "Charts/AngularGauge.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "json", 
	dataSource: {
  "chart": {
    "lowerlimit": "0",
    "upperlimit": "100",
    "lowerlimitdisplay": "Bad",
    "upperlimitdisplay": "Good",
    "numbersuffix": "%",
    "showvalue": "1"
  },
  "colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "75",
        "code": "FF654F"
      },
      {
        "minvalue": "75",
        "maxvalue": "90",
        "code": "F6BD0F"
      },
      {
        "minvalue": "90",
        "maxvalue": "100",
        "code": "8BBA00"
      }
    ]
  },
  "dials": {
    "dial": [
      {
        "value": "92"
      }
    ]
  }
}
}); 

See it live!

The code snippet below shows how you can pass JSON string as data source:

$("#chartContainer").insertFusionCharts({
	swfUrl: "Charts/AngularGauge.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "json", 
	dataSource: '{ ' +
  ' "chart": { ' +
   ' "lowerlimit": "0", ' +
   ' "upperlimit": "100", ' +
   ' "lowerlimitdisplay": "Bad", ' +
   ' "upperlimitdisplay": "Good", ' +
   ' "numbersuffix": "%", ' +
   ' "showvalue": "1" ' +
 ' }, ' +
 ' "colorrange": { ' +
 '   "color": [ ' +
 '     { ' +
       ' "minvalue": "0", ' +
       ' "maxvalue": "75", ' +
       ' "code": "FF654F" ' +
     ' }, ' +
     ' { ' +
      '  "minvalue": "75", ' +
      '  "maxvalue": "90", ' +
      '  "code": "F6BD0F" ' +
     ' }, ' +
     ' { ' +
     '   "minvalue": "90", ' +
      '  "maxvalue": "100", ' +
      '  "code": "8BBA00" ' +
     ' } ' +
   ' ] ' +
 ' }, ' +
 ' "dials": { ' +
   ' "dial": [ ' +
    '  { ' +
     '   "value": "92" ' +
     ' } ' +
   ' ] ' +
 ' } ' +
'}'
}); 

See it live!

The code snippet below shows how you can pass a URL as JSON data source:

$("#chartContainer").insertFusionCharts({
	swfUrl: "Charts/AngularGauge.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "jsonurl", 
	dataSource: "data.json"
}); 

See it live!

NOTE: Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access JSON data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as JavaScript Object or JSON String, it works fine.