| Using JSON as data source |
|
Apart from XML, FusionWidgets XT can also accept data in JSON format. It can use a JSON URL/feed, a JSON Object (in JavaScript) or JSON String. This functionality is provided by FusionCharts JavaScript Class. In this page we'll see how to pass JSON data to a chart in various forms. We will again convert our first sample customer-satisfaction.html to implement this. Code examples and data files discussed in this section are present in Download Package > Code > MyFirstChart folder. |
| Providing JSON data from a URL |
|
Create a copy of customer-satisfaction.html and rename it to customer-satisfaction-json-url.html. Then punch in the following code: |
<html>
<head>
<title>My First chart using FusionWidgets XT - JSON Data URL</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionWidgets XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "Charts/AngularGauge.swf", "myChartId", "400", "200", "0" );
myChart.setJSONUrl("Data.json");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
See it live! Many web servers like IIS6, do not serve .json (no wildcard MIME type) files by default. You need to setup your web server to serve json files. In IIS6 you can do this using these steps:
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 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 string (using the Data String method), it works fine. <html>
<head>
<title>My First chart using FusionWidgets XT - Using JSON Object</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionWidgets XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "Charts/AngularGauge.swf",
"myChartId", "400", "200", "0" );
myChart.setJSONData( {
"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"
}
]
}
});
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
See it live! |
|
In the above code, we've provided a JSON data (compatible with Angular gauge) to the chart using setJSONUrl() function. The data stored in the JSON file is as follows: |
{ |
|
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 data 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(
{
See it live! |
| Providing JSON String embedded in HTML |
|
Additionally, you can also pass JSON data stored as a string. You do not have to convert the string to JSON. FusionWidgets XT takes care of that. The JSON string can be passed using the setJSONData()function as shown below: |
...
myChart.setJSONData(
'{ "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! |