You are viewing documentation for an older version. For current documentation - click here.
Data Streaming Charts JSON Data Format

Starting FusionWidgets XT, charts/gauges can be rendered using JSON (JavaScript Object Notation) data. 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.

Click here to know a few basic things 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 e.g. { "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 FusionWidgets XT chart or gauge is controlled by a single JSON data source i.e., 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 don't have to define any property for the canvas - the default values will be assumed. Thus, each chart can be generated using minimal properties.

The JSON data structure for all the data streaming charts is same. A sample JSON data for a Real-time Column chart looks as under:

{
  "chart": {
    "caption": "Stock Price Monitor",
    "subcaption": "Google vs Dell",
    "datastreamurl": "StockPriceGoogDell.asp",
    "refreshinterval": "2",
    "numberprefix": "$",
    "setadaptiveymin": "1",
    "xaxisname": "Time",
    "showrealtimevalue": "1",
    "labeldisplay": "Rotate",
    "slantlabels": "1"
  },
  "categories": [
    {
      "category": [
        {
          "label": "6 mins ago"
        },
        {
          "label": "5 mins ago"
        },
        {
          "label": "4 mins ago"
        },
        {
          "label": "3 mins ago"
        },
        {
          "label": "2 mins ago"
        },
        {
          "label": "1 min ago"
        }
      ]
    }
  ],
  "dataset": [
    {
      "seriesname": "Google",
      "showvalues": "0",
      "data": [
        {
          "value": "32.34"
        },
        {
          "value": "34.35"
        },
        {
          "value": "31.25"
        },
        {
          "value": "33.23"
        },
        {
          "value": "31.34"
        },
        {
          "value": "33.76"
        }
      ]
    },
    {
      "seriesname": "Dell",
      "showvalues": "0",
      "data": [
        {
          "value": "22.34"
        },
        {
          "value": "22.34"
        },
        {
          "value": "24.75"
        },
        {
          "value": "23.34"
        },
        {
          "value": "21.23"
        },
        {
          "value": "23.65"
        }
      ]
    }
  ],
  "styles": {
    "definition": [
      {
        "type": "font",
        "name": "captionFont",
        "size": "14"
      }
    ],
    "application": [
      {
        "toobject": "Realtimevalue",
        "styles": "captionFont"
      }
    ]
  }
}
 
Brief Explanation

The chart Object defines all the settings that help to manipulate the chart. You can find the list of all the attributes for this Object in the XML Sheet of each chart.

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

"attributeName" : "Value"
e.g., "caption" : "Stock Price Monitor"

The attributes can be arranged in any order, with values either in single or in double quotes, like caption:'Stock Price Monitor'. However, you need to make sure that a particular attribute occurs only once for a given object.

For data streaming charts, we have specified the following properties within the chart Object:

  • The real time value is displayed using the showrealtimevalue key.
  • The datastreamurl key is set to StockPriceGoogDell.asp and refreshinterval to 2 seconds. This means that the chart will get new data from StockPriceGoogDell.asp every 2 seconds to update itself.

When providing the datastreamurl path in JSON, please ensure the following:

  • If there are any special characters in the URL, you'll need to URL encode them before including them in the JSON code. For example, if you want to set the datastreamurl to StockPriceGoogDell.asp?symbol=Goog&fromId=34564, you'll need to encode it as StockPriceGoogDell%2Easp%3Fsymbol%3DColumn%26fromId=34564.
  • You need to make sure that the chart SWF and real-time data provider page are hosted on the same sub-domain. Else, the chart will not be able to access the data provider page due to cross domain restrictions in Flash Player .

Please note that the XML attributes declared in the XML Sheets for each data streaming chart are same as the JSON keys in FusionWidgets XT JSON data format.

The categories Array is a collection of the category Objects and defines the x-axis labels. Each category item represents a label on the x-axis. The category elements need to be defined for all the real-time charts before you can define the data. For example, in our chart, the categories represent the time period. 

"categories": [
    {
      "category": [
        {
          "label": "6 mins ago"
        },
        {
          "label": "5 mins ago"
        },
        {
          "label": "4 mins ago"
        },
        {
          "label": "3 mins ago"
        },
        {
          "label": "2 mins ago"
        },
        {
          "label": "1 min ago"
        }
      ]
    }
  ],

All data series for the chart are defined through the dataset Array. Each data series represents an Object in the dataset Array. The two data series being plotted in this chart are stock prices for Google and Dell. Depending on the chart type, there are a number of properties which you can define as key-value pairs in each data series Object. The actual data for the data series is provided through a data Array. The data Array contains a set of Objects, each providing a single data value through the value property.

"dataset": [
    {
      "seriesname": "Google",
      "showvalues": "0",
      "data": [
        {
          "value": "32.34"
        },
        {
          "value": "34.35"
        },
        {
          "value": "31.25"
        },
        {
          "value": "33.23"
        },
        {
          "value": "31.34"
        },
        {
          "value": "33.76"
        }
      ]
    },
    {
      "seriesname": "Dell",
      "showvalues": "0",
      "data": [
        {
          "value": "22.34"
        },
        {
          "value": "22.34"
        },
        {
          "value": "24.75"
        },
        {
          "value": "23.34"
        },
        {
          "value": "21.23"
        },
        {
          "value": "23.65"
        }
      ]
    }
  ],

The styles Object helps you apply font, effects and animations to various objects of the chart. In FusionWidgets XT JSON format, the styles Object contains two Arrays - definition and application. The definition Array contains a list of style Objects. Each style Object contains various style definition attributes. The application Array contains a list of apply Objects. Each apply Object contains attributes to apply styles that are defined in the definition Array to various chart objects.

To read more on Styles, please see Using Styles section.

Important: To use JSON data format with FusionWidgets XT, you'll need to embed the charts using FusionCharts JavaScript Class (FusionCharts.js), as the charts internally still use XML. The JavaScript class provides the bridge between JSON and XML.