Basic Flotr Example
HTML
<link rel="stylesheet" href="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<script src="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/lib/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/HumbleSoftware/Flotr2/master/flotr2.js"></script>
<div id="dashboard-attackers-daily-graph">
<table>
<thead>
<tr>
<th>Day</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>May 30, 2012</td>
<td>25</td>
</tr>
<tr>
<td>May 29, 2012</td>
<td>63</td>
</tr>
<tr>
<td>May 28, 2012</td>
<td>192</td>
</tr>
<tr>
<td>May 27, 2012</td>
<td>384</td>
</tr>
<tr>
<td>May 26, 2012</td>
<td>67</td>
</tr>
<tr>
<td>May 25, 2012</td>
<td>234</td>
</tr>
<tr>
<td>May 24, 2012</td>
<td>85</td>
</tr>
</tbody>
</table>
</div>
CSS
#dashboard-attackers-daily-graph {
width: 340px;
height: 220px;
}
JavaScript
(function attackers_by_day(container) {
var d1 = [];
$("#dashboard-attackers-daily-graph>table>tbody>tr").each(function(index){
d1.push([new Date($(this).children(":nth-child(1)").text()), parseInt($(this).children(":nth-child(2)").text())]);
});
console.log(d1);
graph = Flotr.draw(container, [d1], {
HtmlText: false,
xaxis: {
mode: "time",
showMinorLabels: true,
noTicks: $("#dashboard-attackers-daily-graph>table>tbody>tr").length,
labelsAngle: 68
},
mouse: {
track: true,
trackAll: true
}
});
})(document.getElementById("dashboard-attackers-daily-graph"));