Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Simple graphs using jQuery and Raphael
JavaScript
branch: master
Failed to load latest commit information.
samples Remove hover from swellchart example
template Some custom graph experiments I've been sitting on.
vendor
README.txt Stylistic changes, remove disclaimer.
index.html Upgrade to latest raphael
jquery.simplegraph.js Stylistic changes, remove disclaimer.
sample.js Cater for negative values & tweak some of the examples.

README.txt

= SimpleGraph

http://benaskins.github.com/simplegraph

== Description

Simple javascript graphs using Raphael and jQuery. 

Based on the Raphael analytics example (http://raphaeljs.com/analytics.html) 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: http://github.com/benaskins/simplegraph

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

== License

Copyright (c) 2008 Ben Askins

Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
Something went wrong with that request. Please try again.