Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (58 sloc) 2.76 KB
= 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 it's 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]
== License
Copyright (c) 2008 Ben Askins
Licensed under the MIT ( license.
Something went wrong with that request. Please try again.