JSON Format: For library writers

The data must be in JSON format. The basic JSON obect is:

{}

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  }
}

Title (optional)

All attributes are optional.
text: string, the title
style: string, the CSS style

Example:

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  }
}

Y Legend (optional)

All attributes are optional.
text: string, the title for the Y axis
style: string, a CSS string

Example:

{
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  }
}

X Axis (optional)

This object is optional, if it is not present the chart will show a default X axis.
All attributes are optional.
stroke : number, the width of the line
tick-height : number, the height of the ticks
colour : string, the colour of the line
offset: boolean, x axis min (usually 0) is offset, used in bar charts
grid-colour: string, colour of the grid lines
3d: boolean, is it 3D
steps: show every n ticks
labels: array of strings, the labels of each X point

Example:

{
  "x_axis":{
    "stroke":      1,
    "tick_height": 10,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "labels":      ["January","February","March","April","May","June","July","August","Spetember"]
   }
}

Y Axis optional

This object is optional, if it is not present the chart will show a default Y axis.
All attributes are optional.

Example:

{
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}

Elements

Example:

{
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    }
  ]
}

Elements.bar

A bar chart. Must be inside the elements array.

type: string, must be 'bar'
alpha: number, between 0 (transparent) and 1 (opaque)
colour: string, CSS colour
text: string, the key
font-size: number, size of the key text
values: array of numbers, height of each bar

Example:

{
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
     }
   ]
}

Elements.pie

A pie chart. Must be inside the elements array.

type: string, must be 'pie'
start-angle: number, the angle of the first pie slice
colours: array of strings, CSS colour
alpha: number, between 0 (transparent) and 1 (opaque)
stroke: number, the outline width
animate: boolean, animate the pie chart
values: array of objects, value of each pie slice. May be a number or a slice object

Example:

{
  "elements":[
    {
      "type":      "pie",
      "start-angle": 180,
      "colours":   ["#d01f3c","#356aa0","#C79810","#73880A","#D15600","#6BBA70"],
      "alpha":     0.6,
      "stroke":    2,
      "animate":   1,
      "values" :   [0,2,{"value":0,"text":"zero"},2,6]
     }
   ]
}

Elements.hbar

Horizontal Bar chart

values: array of objects. Each value must have a "right" and an optional "left" value

Example:

{
  "elements":[
    {
      "type":      "hbar",
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [{"right":10},{"right":15},{"left":13,"right":17}]
    }
  ]
}

Elements.line_dot

Line chart

values: Array of numbers:

Example:
{
  "elements":[
    {
      "type":      "line_dot",
      "colour":    "#736AFF",
      "text":      "Avg. wave height (cm)",
      "font-size": 10,
      "width":     2,
      "dot-size":  4,
      "values" :   [1.5,1.69,1.88,2.06,2.21,2.34,null,2.35,2.23,2.08]
    }
  ]
}

Elements.line*

Just a quick note of the 3 different line types:

Example:

{
  "title":{
    "text":"Many data lines",
    "style":"{font-size: 30px;}"
  },

  "y_legend":{
    "text":"Open Flash Chart",
    "style":"{font-size: 12px; color:#736AFF;}"
  },

  "elements":[
    {
      "type":      "line",
      "colour":    "#9933CC",
      "text":      "Page views",
      "width":     2,
      "font-size": 10,
      "dot-size":  6,
      "values" :   [15,18,19,14,17,18,15,18,17]
    },
    {
      "type":      "line_dot",
      "colour":    "#CC3399",
      "width":     2,
      "text":      "Downloads",
      "font-size": 10,
      "dot-size":  5,
      "values" :   [10,12,14,9,12,13,10,13,12]
    },
    {
      "type":      "line_hollow",
      "colour":    "#80a033",
      "width":     2,
      "text":      "Bounces",
      "font-size": 10,
      "dot-size":  6,
      "values" :   [5,7,9,7,4,6,1,2,5]
    }
  ],

  "y_axis":{
    "max":   20
  },

  "x_axis":{
    "steps": 2,
    "labels": ["January","February","March","April","May","June","July","August","September"]
  }
}

Examples

Here is a simple JSON object that contains a horizontal bar chart:

{
  "title":{
    "text":"HBar Map X values",
    "style":"{font-size: 20px; font-family: Verdana; text-align: center;}"
  },

  "elements":[
    {
      "type":      "hbar",
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [{"right":10},{"right":15},{"left":13,"right":17}]
    }
  ],
  "x_axis":{
    "min":    0,
    "max":    20,
    "offset": 0,
    "labels": ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v"]
  },
  "y_axis":{
    "stroke":      14,
    "tick_length": 30,
    "colour":      "#d09090",
    "grid_colour": "#00ff00",
    "offset":      1,
    "labels":      ["slashdot.org","digg.com","reddit.com"]
  }
}