/
README.txt
80 lines (58 loc) · 2.76 KB
/
README.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
= 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.