SimpleGraph
Simple javascript line graphs using Raphael and
jQuery. Find me, download me, or fork me at
github. The following examples should speak for themselves...
Temperature in 7 days
|
Wed 17 Dec
|
Thu 18 Dec
|
Fri 19 Dec
|
Sat 20 Dec
|
Sun 21 Dec
|
Mon 22 Dec
|
Tue 23 Dec
|
| 20 |
23 |
23 |
28 |
28 |
22 |
25 |
| -5 |
-2 |
5 |
6 |
-1 |
-3 |
5 |
Rain in 7 days
|
Wed 17 Dec
|
Thu 18 Dec
|
Fri 19 Dec
|
Sat 20 Dec
|
Sun 21 Dec
|
Mon 22 Dec
|
Tue 23 Dec
|
| 5 |
0 |
0 |
5 |
0 |
0 |
0 |
Simplest Graph (no customisation)
$("#simplest_graph_holder").simplegraph(temp_data, temp_labels);
Temperature in 7 days (with color, fill, and min y-axis value)
$("#temp_graph_holder").simplegraph(temp_data, temp_labels,
{penColor: "#f00", fillUnderLine: true, units: "ºC", minYAxisValue: 30});
Rain in 7 days (with y-axis labels)
$("#rain_graph_holder").simplegraph(rain_data, rain_labels,
{penColor: "#00f", units: "mm", leftGutter: 60, minYAxisValue: 10, yAxisCaption: "Max Rainfall"});
Combined Temperature / Rain
$("#combined_graph_holder").simplegraph(temp_data, temp_labels,
{penColor: "#f00", leftGutter: 90, units: "ºC", minYAxisValue: 30, yAxisCaption: "Max Temp", lowerBound: -10})
.simplegraph.more(rain_data,
{penColor: "#00f", units: "mm", minYAxisValue: 10, yAxisCaption: "Max Rainfall"});
Temperature in 7 days bar graph (with color, and min y-axis value)
$("#bar_graph_holder").simplegraph(temp_data, temp_labels,
{penColor: "#f00", units: "ºC", minYAxisValue: 30, drawBars: true, drawLine: false, drawPoints: false, drawGrid: false, barWidth: 20});
