Time for action — converting FusionCharts XML format to JSON
- Launch the
FCDataConvertertool from the FusionCharts Installation Folder |Tools|FCDataConverter|Index.html. - Once the page has finished loading, in the text area on the left, titled FusionCharts XML Data, paste the XML data that we had previously created for Revenue by Year chart.
- Click on the Convert to JSON button present below it.
- In the text area on the right, you will now see the JSON equivalent of the XML data, as shown in the following screenshot:
What just happened?
Using the FusionCharts Data Format Conversion Tool, you just converted the previous XML data into JSON format. It reads as in the following code snippet:
{
"chart": {
"caption": "Harry's SuperMart",
"subcaption": "Revenue by Year",
"xaxisname": "Year",
"yaxisname": "Amount",
"numberprefix": "$"
},
"data": [
{
"label": "2009",
"value": "1487500"
},
{
"label": "2010",
"value": "2100600"
},
{
"label": "2011",
"value": "2445400"
}
]
}
Similar to XML, the chart object contains attributes that let you configure functional and cosmetic aspects of the chart.
In the most general form, chart attributes represent the following JSON format:
"attributeName" : "Value"
For example,"xAxisName" : "Year"
The attributes can occur in any order and values can be specified either using double quotes or single, for example, xAxisName:'Year'. However, you need to ensure that the same attribute is not defined twice for any element, as it results in an invalid XML.
Tip
Escaping of special characters is not compulsory in the JSON URL format
When using the JSON data format, special characters are not encoded to XML entities. Instead, they are escaped in JavaScript using \. However, this is not mandatory when using JSON URL as data, as JavaScript loads the JSON data and directly parses attributes as string literals. Hence, in our example, Harry's SuperMart does not need to be encoded as we had done in the XML format.
However, if you have a mismatch of JavaScript enclosing quotes and JSON attribute quotes, as we will see in our next example, escaping is required.
Next, the array data contains all the data points to be plotted on the chart. For example, in XML, label attribute for each data point defines its text label, and the value attribute represents its numerical value. Each element in the data array is an unnamed object defined in the following format:
{ "label: "Jan", "value" : "17400", "otherAttribute" : "value"}
With the JSON format understood, let us also look at how to use the setJSONUrl() and setJSONData() methods.