<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SimpleGraph - simple javascript graphs with Raphael and jQuery</title>
<script src="vendor/jquery.js" type="text/javascript"></script>
<script src="vendor/raphael.js" type="text/javascript"></script>
<script src="jquery.simplegraph.js" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
<style type="text/css">
#container {
margin:auto;
width:900px;
}
pre {
background:#EEEEEE none repeat scroll 0 0;
border:4px solid #DDDDDD;
line-height:20px;
overflow:auto;
padding:5px;
width:800px;
}
h1, h2, h3 {
font-family:verdana;
}
a {
background-color:#FFFFCC;
color:#000000;
text-decoration:none;
}
a:hover {
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://github.com/benaskins/simplegraph">
<img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" style="border: 0pt none ; position: absolute; top: 0pt; right: 0pt;"/>
</a>
<div id='container'>
<h1>SimpleGraph</h1>
<h2>
Simple javascript line graphs using <a href="http://raphaeljs.com/">Raphael</a> and
<a href="http://jquery.com/">jQuery</a>. Find me, download me, or fork me at
<a href="http://github.com/benaskins/simplegraph">github</a>. The following examples should speak for themselves...
</h2>
<div id='temp-data'>
<table cellspacing='0' class='graph' summary='Temperature in 7 days'>
<caption>Temperature in 7 days</caption>
<tfoot>
<tr>
<th>
Wed 17 Dec
</th>
<th>
Thu 18 Dec
</th>
<th>
Fri 19 Dec
</th>
<th>
Sat 20 Dec
</th>
<th>
Sun 21 Dec
</th>
<th>
Mon 22 Dec
</th>
<th>
Tue 23 Dec
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="pos">20</td>
<td class="pos">23</td>
<td class="pos">23</td>
<td class="pos">28</td>
<td class="pos">28</td>
<td class="pos">22</td>
<td class="pos">25</td>
</tr>
<tr>
<td class="neg">-5</td>
<td class="neg">-2</td>
<td class="neg">5</td>
<td class="neg">6</td>
<td class="neg">-1</td>
<td class="neg">-3</td>
<td class="neg">5</td>
</tr>
</tbody>
</table>
</div>
<div id='rain-data'>
<table cellspacing='0' class='graph' summary='Rain in 7 days'>
<caption>Rain in 7 days</caption>
<tfoot>
<tr>
<th>
Wed 17 Dec
</th>
<th>
Thu 18 Dec
</th>
<th>
Fri 19 Dec
</th>
<th>
Sat 20 Dec
</th>
<th>
Sun 21 Dec
</th>
<th>
Mon 22 Dec
</th>
<th>
Tue 23 Dec
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>5</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<h3>Simplest Graph (no customisation)</h3>
<pre>$("#simplest_graph_holder").simplegraph(temp_data, temp_labels);</pre>
<div id='simplest_graph_holder'></div>
<h3>Temperature in 7 days (with color, fill, and min y-axis value)</h3>
<pre>$("#temp_graph_holder").simplegraph(temp_data, temp_labels,
{penColor: "#f00", fillUnderLine: true, units: "ºC", minYAxisValue: 30});</pre>
<div id='temp_graph_holder'></div>
<h3>Rain in 7 days (with y-axis labels)</h3>
<pre>$("#rain_graph_holder").simplegraph(rain_data, rain_labels,
{penColor: "#00f", units: "mm", leftGutter: 60, minYAxisValue: 10, yAxisCaption: "Max Rainfall"});</pre>
<div id='rain_graph_holder'></div>
<h3>Combined Temperature / Rain </h3>
<pre>$("#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"});</pre>
<div id='combined_graph_holder'></div>
<h3>Temperature in 7 days bar graph (with color, and min y-axis value)</h3>
<pre>$("#bar_graph_holder").simplegraph(temp_data, temp_labels,
{penColor: "#f00", units: "ºC", minYAxisValue: 30, drawBars: true, drawLine: false, drawPoints: false, drawGrid: false, barWidth: 20});</pre>
<div id='bar_graph_holder'></div>
</div>
</body>
</html>
