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 81 82 83 84 85 86 87 88 89
|
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style type="text/css">
#editor-render-0 {
width: 340px;
height: 220px;
margin: 24px auto;
}
</style>
<!--[if IE]>
<script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/flotr2.min.js"></script>
<script type="text/javascript">
$(function () {
(function basic_time(container) {
var
d1 = [],
start = new Date("2009/01/01 01:00").getTime(),
options, graph, i, x, o;
for (i = 0; i < 100; i++) {
x = start + (i * 1000 * 3600 * 24 * 36.5);
d1.push([x, i + Math.random() * 30 + Math.sin(i / 20 + Math.random() * 2) * 20 + Math.sin(i / 10 + Math.random()) * 10]);
}
options = {
xaxis: {
mode: 'time',
labelsAngle: 45
},
selection: {
mode: 'x'
},
HtmlText: false,
title: ''
};
// Draw graph with default options, overwriting with passed options
function drawGraph(opts) {
// Clone the options, so the 'options' variable always keeps intact.
o = Flotr._.extend(Flotr._.clone(options), opts || {});
// Return a new graph.
return Flotr.draw(
container, [d1], o);
}
graph = drawGraph();
Flotr.EventAdapter.observe(container, 'flotr:select', function(area) {
// Draw selected area
graph = drawGraph({
xaxis: {
min: area.x1,
max: area.x2,
mode: 'time',
labelsAngle: 45
},
yaxis: {
min: area.y1,
max: area.y2
}
});
});
// When graph is clicked, draw the graph with default area.
Flotr.EventAdapter.observe(container, 'flotr:click', function() {
graph = drawGraph();
});
})(document.getElementById("editor-render-0"));
});</script>
</head>
<body>
<div id="editor-render-0"></div>
</body>
</html> |
Partager