FusionCharts XT can also build charts using JSON (JavaScript Object Notation) data format. JSON is a light-weight and simple data format that is easy to read and understand. Though derived from JavaScript, the data structure is language-independent, with encoders and parsers available for virtually every programming language.

Here are a few basic things to know about JSON data:

  • JSON data is text based data consisting of key and value pairs in format key : value . The values have data associated with them
  • You can make up your own key-value pairs like name : "John Doe" to store data
  • Every JSON data is enveloped by curly brace and key:value pairs are comma separated, like { firstName : "John" , lastName: "Doe" }. In JavaScript, this format is called an Object
  • A key can be a value within single or double-quotes, for example, { "name" : "John Doe" }
  • You can use Objects as values too. For example, { "employee" : { "name" : "John Doe" , "department" : "Project Manager" , "age" : 35 } }
  • In JSON, the basic data types are:
    • Number (integer or real)
    • String (double-quoted Unicode with backslash escaping)
    • Boolean (1 or 0 in FusionCharts JSON)
    • null
    • Array (an ordered sequence of values of Number, String, Boolean, null, Object or Array type, comma-separated and enclosed in square brackets) e.g. [ "employees" : [ "Employees" , { "name" : "John Doe" } , 35 ]
    • Object (a collection of key:value pairs, comma-separated and enclosed in curly braces. Value can be of Number, String, Boolean, null, Object or Array type) e.g. { "employee" : { "name" : "John Doe" , "department" : "Project Manager" , "age" : 35 } }

A FusionCharts XT chart is controlled by a single JSON data source, that is, the same source contains data to plot, functional settings and cosmetic properties. There are many properties that you can define for each chart type. However, it is not necessary to define all the properties for a given chart. For example, if you do not want to change the default setting of the canvas (color, alpha, etc.), you do not have to define any property for the canvas - the default values will be assumed. Thus, each chart can be generated using minimal properties.