SimpleGraph

http://benaskins.github.com/simplegraph

Description

Simple javascript graphs using Raphael and jQuery.

Based on the Raphael analytics example by Dmitry Baranovskiy

Usage

The SimpleGraph function takes four arguments:

target: where the rendered graph will land
data: an array of values to plot against the y-axis
labels: an array of values for labelling the x-axis
options: hash of options to customise the graph (see below)

Simple example

$("#myGraph").simplegraph([1,2,3,3,2,1], ["a","b","c","d","e","f"]);

Will render a graph that looks a little something like this (open index.html for actual rendered samples):

|   ._.
| ./   \.
|/       \.
|__________
a b c d e f

Options

SimpleGraph takes a hash of options as its third argument. Here's what you can customise:

eg. parameter: [default] description

width: [600] width of rendered image
height: [250] height of rendered image
leftGutter: [30] space to reserve to the left of the graph. Allocates space for y-axis caption and labels
bottomGutter: [20] space to reserve above the graph. Allocates space for x-axis
topGutter: [20] space to reserve below the graph
labelColor: [#000] text color for all labels
labelFont: ["Arial"] font for all labels
labelFontSize: ["9px"] font size for all labels
gridBorderColor: ["#ccc"] background grid color, points will be plotted on the grid
drawPoints: [true] whether or not to draw points on the graph
pointColor: ["#000"] point color
pointRadius: [3] point radius
activePointRadius: [5] active point radius - used when hovering on points
drawLine: [true] whether or not to join points on the graph with a line
lineColor: ["#000"] self explanatory yah?
lineWidth: [3] self explanatory yah?
lineJoin: ["round"] round | miter | bevel - how to join the lines on the graph
fillUnderLine: [false] fill under lines
fillColor: ["#000"]
fillOpacity: [0.2]
drawBars: [false] want a bar graph?
barColor: ["#000"] need I explain?
addHover: [true] oh hover.. displays a little popup with y and x axis values for the selected point
mysteryFactor: [0] it's a mystery

Contributors

Dmitry Baranovskiy provided all of the initial code for plotting points on a graph using Raphael Ben Askins took that example and created the SimpleGraph function Lachie Cox improved sample code Lachlan Hardy removed lint Martin Stannard added bar graphs Colin Campbell-McPherson eliminated repetition from setStyleDefaults

Fork it on github

Send feedback & suggestions to ben.askins [at] gmail.com

License

Licensed under the MIT license.

tantalor / simplegraph