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.

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.