You are viewing documentation for an older version. For current documentation - click here.

The JSON structure for a single series chart looks as under:

{
  "chart":{"caption":"Monthly Sales Summary", 
    "subcaption":"For the year 2006", "xaxisname":"Month", 
    "yaxisname":"Sales", "numberprefix":"$" },
  "data":[
    { "label":"January","value":"17400"  },
    { "label":"February","value":"19800" },
    { "label":"March","value":"21800"    },
    { "label":"April","value":"23800"    },
    { "label":"May","value":"29600"      },
    { "label":"June","value":"27600"     },
    { "vline":"true","color":"FF5904","thickness":"2"},
    { "label":"July","value":"31800"     },
    { "label":"August","value":"39700"   },
    { "label":"September","value":"37800"},
    { "label":"October","value":"21900"  },
    { "label":"November","value":"32900" },
    { "label":"December","value":"39800" }
  ],

  "trendlines":{
    "line":[
      {"startvalue":"22000","color":"00cc00",
      "displayvalue":"Average"}
    ]
  },

  "styles":[
  {
    "definition":[
    {
      "style":[
      {"name":"CanvasAnim","type":"animation",
		"param":"_xScale","start":"0","duration":"1"}
    ]}
   ],
   "application":[
   {
      "apply":[
      {"toobject":"Canvas","styles":"CanvasAnim"}
   ]}]
  }
]
}

Brief Explanation

The chart object defines all the settings which helps to manipulate the chart. You can find the list of all the attribute for this Object in "Chart XML Sheet" of each chart.

In the most general form, chart attributes represent the following JSON format:

"attributeName" : "Value"
e.g., "xAxisName" : "Month"


The attributes can occur in any order and quotes can be single or double like xAxisName:'Month'. However, you need to make sure that a particular attribute occurs only once for a given element.

Please note that the XML attributes declared for each chart in "Chart XML Sheet" are same as the JSON properties in FusionCharts JSON data format.

Moving on, data Array represents a set of chart numeric data which is to be plotted on the graph and determines a set of labels which would appear as categories on the graph. Each data element in data Array is an unnamed object. A typical data element would look like this.

{ "label: "Jan", "value" : "17400", "color" : "3300FF", "toolTip" : "January, 17400", "link" : "details.asp?month=jan", "showLabel" : "1" }

Between data elements, we can have vLine object, which indicates vertical separator lines running along the height/width of the chart canvas. A vLine is similar to a data element except that it should have a property with key "vLine" with value "true".

{ "vLine" : "true" , "color" : "FF5904", "thickness" : "2" }

Next we have the trendLines object. Using this function of the chart, you could draw custom lines on the chart to represent a trend. For example, in our above XML, we have defined a line at 22000 to represent the average sales for the period. There would be an Array with name line that contains all trend line definition objects.

Finally, you've styles Array. It helps you apply font, effects and animations to various objects of the chart. Styles lends a simple mechanism using which you can easily control the visual layout of charts. In FusionCharts JSON format, Styles Array contains an Object with two Arrays - definition and application. definition Array contains style elements (as Array), each of which is a styles Object defined with various style definition attributes. application Array contains apply Array, each element of which is an Object of styles applied with various attributes.

To read more on Styles, please see FusionCharts v3 Styles section.