Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

55 lines (46 sloc) 1.881 kb
<!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.threshold.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>With the threshold plugin, you can apply a specific color to
the part of a data series below a threshold. This is can be useful
for highlighting negative values, e.g. when displaying net results
or what's in stock.</p>
<p class="controls">
<input type="button" value="Threshold at 5">
<input type="button" value="Threshold at 0">
<input type="button" value="Threshold at -2.5">
</p>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i <= 60; i += 1)
d1.push([i, parseInt(Math.random() * 30 - 10)]);
function plotWithOptions(t) {
$.plot($("#placeholder"), [ {
data: d1,
color: "rgb(30, 180, 20)",
threshold: { below: t, color: "rgb(200, 20, 30)" },
lines: { steps: true }
} ]);
}
plotWithOptions(0);
$(".controls input").click(function (e) {
e.preventDefault();
var t = parseFloat($(this).val().replace('Threshold at ', ''));
plotWithOptions(t);
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.