JSON Format: For library writers

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

{}

Put all other objects inside this. For example the JSON object with a title looks like this:

{ "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

The elements attribute is an array of generic objects.
Each object is the type of chart (line, bar, scatter etc.)

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"] } }