Bullet Graph 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.
A FusionWidgets XT graph 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 graph type. However, it is not necessary to define all the properties for a given graph. 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 graph can be generated using minimal properties. |
In this page, we will discuss about how to use JSON data to create a Bullet graph. |
A sample JSON data for a Bullet graph looks as under: |
{ |
Brief Explanation |
The chart Object defines all the settings that help to manipulate the graph. You can find the list of all the attributes for this Object in the XML Sheet of Horizontal Bullet graph or Vertical Bullet graph. In the most general form, chart attributes represent the following JSON format: The chart limits, caption, sub-caption, number prefix & number suffix etc. are specified within the chart Object. Please note that the XML attributes declared in the XML Sheet of Horizontal Bullet graph or Vertical Bullet graph are same as the JSON keys in FusionWidgets XT JSON data format. Moving on, the colorrange Object defines an array of color objects. The color objects are contained within the color Array. Each color object contains the color codes and the minimum and maximum values required to define the color range. A typical color object looks like this: { "minvalue": "0", "maxvalue": "50", "code": "A6A6A6" } Furthermore, the value key sets the data value of the graph. Finally, the target key sets the target value. 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. |