Using JSON as data source

Apart from XML, FusionCharts can also accept JSON data format. It can use a JSON URL/feed, a JSON Object (in JavaScript) or JSON String. This functionality is provided by FusionCharts.js JavaScript class.

In this page we'll see how to pass JSON data to chart in various forms. We will again convert our first sample weekly-sales.html to implement this.

Code examples and data files discussed in this section are present in Download Package > Code > MyFirstChart folder.
Providing JSON data using Url method

Create a copy of weekly-sales.html and rename it to weekly-sales-json-url.html. Then punch in the following code:

 
<html>
  <head> 	
    <title>My First chart using FusionCharts - JSON data URL</title> 	
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
		   "myChartId", "400", "300", "0", "1" );
      myChart.setJSONUrl("Data.json");
      myChart.render("chartContainer");
      
    // -->     
    </script> 	   
  </body> 
</html>

See it live!

In the above code, we've provided a JSON data (compatible with FusionCharts) to the chart using setJSONUrl() function. The data stored in the JSON file is as follows:

 
{ 
	"chart": { 
		"caption" : "Weekly Sales Summary" ,
		"xAxisName" : "Week",
		"yAxisName" : "Sales",
		"numberPrefix" : "$"
	},
	
	"data" : 
		[
 		  { "label" : "Week 1", "value" : "14400" },
		  { "label" : "Week 2", "value" : "19600" },
		  { "label" : "Week 3", "value" : "24000" },
		  { "label" : "Week 4", "value" : "15700" }
		]
}

To know more on FusionCharts JSON data format, please go through FusionCharts data formats > JSON section. Like the Visual XML Generator, you can take help of FusionCharts Data Converter tool to convert chart XML to JSON or vice-versa and use it.
Providing JSON Object embedded in HTML

You can also provide JSON embedded in the HTML itself. Since JSON format is derived from JavaScript, you can also pass a JavaScript Object as data for the chart. This is possible using setJSONData() function as shown below: 

...   
		myChart.setJSONData(
		{ 
			"chart": 
         { 
				 "caption" : "Weekly Sales Summary" ,	
				 "xAxisName" : "Week", 
				 "yAxisName" : "Sales",	
				 "numberPrefix" : "$" 
			},
			
			"data" : 
			[ 
				{ "label" : "Week 1", "value" : "14400" },
				{ "label" : "Week 2", "value" : "19600" }, 
				{ "label" : "Week 3", "value" : "24000" }, 
				{ "label" : "Week 4", "value" : "15700" } 
			]
		}
	);
...

See it live!
Providing JSON String embedded in HTML

Additionally, you can also pass a JSON, stored as a String. In many cases, AJAX feed comes as JSON String, so you do not have to convert the string to JSON. FusionCharts takes care of that as shown below:

 
...
   
myChart.setJSONData ( '{ "chart": { "caption" : "Weekly Sales Summary" , ' +
   '"xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "$" }, ' +
      '"data" : [ { "label" : "Week 1", "value" : "14400" },  ' +
        '{ "label" : "Week 2", "value" : "19600" }, ' +
        '{ "label" : "Week 3", "value" : "24000" }, ' +
        '{ "label" : "Week 4", "value" : "15700" } ]	} '
    );
...

See it live!