<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
<style type="text/css">
#placeholder .button {
position: absolute;
cursor: pointer;
}
#placeholder div.button {
font-size: smaller;
color: #999;
background-color: #eee;
padding: 2px;
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p class="message"></p>
<p>
<p>You selected: <span id="selection"></span></p>
<input id="clearSelection" type="button" value="Clear selection" />
<input id="setSelection" type="button" value="Select year 2k" />
</p>
<p>With the navigate plugin it is easy to add panning and zooming.
Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
<p>The plugin fires events (useful for synchronizing several
plots) and adds a couple of public methods so you can easily build
a little user interface around it, like the little buttons at the
top right in the plot.</p>
<script type="text/javascript">
$(function () {
// generate data set from a parametric function with a fractal
// look
var data = [
{
data: [[0, 2300],[20, 1500],[30, 5000]],
lines: { show: true }
// ,points: { show: true }
},
{
data: [[10000,0 ], [10000, 0]]
} ,
{
data: [[0,10000 ], [0, 10000]]
}
];
var placeholder = $("#placeholder");
var options = {
series: { lines: { show: true , fill: true}, shadowSize: 0 },
xaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
yaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
/* zoom: {
interactive: true
},
pan: {
interactive: true
},*/
selection: { mode: "x" }
};
var plot = $.plot(placeholder, data, options);
//selection start
placeholder.bind("plotselected", function (event, ranges) {
//alert(ranges.xaxis.from.toFixed(1));
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom)
plot = $.plot(placeholder, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
$("#clearSelection").click(function () {
plot.clearSelection();
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
$("#setSelection").click(function () {
var axes = plot.getAxes();
plot.setSelection({ xaxis: { from: 2000, to: 2500 } });
e.preventDefault();
});
//selection end
// show pan/zoom messages to illustrate events
placeholder.bind('plotpan', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
placeholder.bind('plotzoom', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
// add zoom out button
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.zoomOut();
});
// add zoom in button
$('<div class="button" style="right:90px;top:20px">zoom in</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.zoom();
});
//add dynamic curve start
var updateInterval = 200;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
function getRandomData() {
var lastdata =data[0].data.length-1 ;
var res = new Array();
var maxTime =data[0].data[lastdata][0];
if(lastdata%2==0){
var maxTimeVal =data[0].data[lastdata][1]-310*Math.random();
}else{
var maxTimeVal =data[0].data[lastdata][1]+300*Math.random();
}
var data1 = data[0].data;
data1.push([15+maxTime, maxTimeVal]);
for (var i = 0; i < data.length; ++i)
res[0]=data[0];
return res;
}
function update() {
var redata = getRandomData();
plot.setData(redata);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
//add dynamic curve end
// and add panning buttons
// little helper for taking the repetitive work out of placing
// panning arrows
function addArrow(dir, right, top, offset) {
$('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
plot.clearSelection();
e.preventDefault();
plot.pan(offset);
});
}
addArrow('left', 55, 60, { left: -300 });
addArrow('right', 25, 60, { left: 300 });
addArrow('up', 40, 45, { top: -300 });
addArrow('down', 40, 75, { top: 300 });
});
</script>
</body>
</html>
