Basic Flotr Example
HTML
<script src="https://raw.github.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<div id="example"></div>
CSS
#example {
width: 1024px;
height: 668px;
}
JavaScript
(function basic(container) {
var
d1 = [ [1,1]
],
// First data series
i, graph;
// Draw Graph
graph = Flotr.draw(container, [d1], {
xaxis: {
noTicks: 24,
//tickFormatter : function (n) { return '('+n+')'; },
ticks: [
[0, "12:00<br>am"],
[2, "2:00<br>am"],
[4, "4:00<br>am"],
[6, "6:00<br>am"],
[8, "8:00<br>am"],
[10, "10:00<br>am"],
[12, "12:00<br>pm"],
[14, "2:00<br>pm"],
[16, "4:00<br>pm"],
[18, "6:00<br>pm"],
[20, "8:00<br>pm"],
[22, "10:00<br>pm"],
[24, "12:00<br>am"]
],
min: 0,
// Part of the series is not displayed.
max: 24,
},
yaxis: {
ticks: [
[0, "0 Orders "],
[10, "10 Orders "],
[20, "20 Orders "],
[30, "30 Orders "],
[40, "40 Orders "],
[50, "50 Orders "],
[60, "60 Orders "],
[70, "70 Orders "],
[80, "80 Orders "],
[90, "90 Orders "],
[100, "100 Orders "],
[110, "110 Orders "],
[120, "120 Orders "],
[130, "130 Orders "],
[140, "140 Orders "],
[150, "150 Orders "],
[160, "160 Orders "],
[170, "170 Orders "],
[180, "180 Orders "],
[190, "190 Orders "],
[200,...