Skip to content

F
flot
Commit f6b08328 authored by olau@iola.dk's avatar olau@iola.dk
Browse files
Options

Added support for coloring the data points below a certain threshold 


git-svn-id: https://flot.googlecode.com/svn/trunk@139 1e0a6537-2640-0410-bfb7-f154510ff394
parent 89ce1ca9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 198 additions and 50 deletions
API.txt
View file @ f6b08328
...@@ -53,14 +53,15 @@ not connected. ...@@ -53,14 +53,15 @@ not connected.
The format of a single series object is as follows: The format of a single series object is as follows:
{ {
color: color or number, color: color or number
data: rawdata, data: rawdata
label: string, label: string
lines: specific lines options, lines: specific lines options
bars: specific bars options, bars: specific bars options
points: specific points options, points: specific points options
xaxis: 1 or 2, threshold: specific threshold options
yaxis: 1 or 2, xaxis: 1 or 2
yaxis: 1 or 2
clickable: boolean clickable: boolean
hoverable: boolean hoverable: boolean
shadowSize: number shadowSize: number
...@@ -429,6 +430,11 @@ Customizing the data series ...@@ -429,6 +430,11 @@ Customizing the data series
shadowSize: number shadowSize: number
threshold: {
below: number
color: color
}
The most important options are "lines", "points" and "bars" that The most important options are "lines", "points" and "bars" that
specifies whether and how lines, points and bars should be shown for specifies whether and how lines, points and bars should be shown for
each data series. In case you don't specify anything at all, Flot will each data series. In case you don't specify anything at all, Flot will
...@@ -477,6 +483,10 @@ extra colors by lightening and darkening colors in the theme. ...@@ -477,6 +483,10 @@ extra colors by lightening and darkening colors in the theme.
"shadowSize" is the default size of shadows in pixels. Set it to 0 to "shadowSize" is the default size of shadows in pixels. Set it to 0 to
remove shadows. remove shadows.
"threshold" specifies that the data points below "below" should be
drawn with the specified color. This makes it easy to mark points
below 0, e.g. for budget data.
Customizing the grid Customizing the grid
==================== ====================
......
NEWS.txt
View file @ f6b08328
...@@ -46,7 +46,12 @@ Changes: ...@@ -46,7 +46,12 @@ Changes:
data (and fixes issue 112). data (and fixes issue 112).
- Step-wise charting: line charts have a new option "steps" that when - Step-wise charting: line charts have a new option "steps" that when
set to true connects the points with steps instead of diagonal lines. set to true connects the points with horizontal/vertical steps
instead of diagonal lines.
- Thresholding: you can set a threshold and a color, and the data
points below that threshold will then get the color. Useful for
marking data below 0, for instance.
Bug fixes: Bug fixes:
......
examples/index.html
View file @ f6b08328
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<ul> <ul>
<li><a href="basic.html">Basic example</a></li> <li><a href="basic.html">Basic example</a></li>
<li><a href="graph-types.html">Different graph types</a> and <a href="setting-options.html">setting various options</a></li> <li><a href="graph-types.html">Different graph types</a> and <a href="setting-options.html">setting various options</a></li>
<li><a href="turning-series.html">Turning series on/off</a></li> <li><a href="turning-series.html">Turning series on/off</a> and <a href="thresholding.html">thresholding the data</a></li>
<li><a href="selection.html">Selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> <li><a href="selection.html">Selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li>
<li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a></li> <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a></li>
<li><a href="dual-axis.html">Dual axis support</a></li> <li><a href="dual-axis.html">Dual axis support</a></li>
......
examples/thresholding.html 0 → 100644
View file @ f6b08328
<!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"></link>
<!--[if IE]><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>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>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 id="source" language="javascript" type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i <= 60; i += 1)
d1.push([i, parseInt(Math.random() * 30 - 10)]);
function doPlot(t) {
$.plot($("#placeholder"), [ {
data: d1,
color: "rgb(30, 180, 20)",
threshold: { below: t, color: "rgb(200, 20, 30)" },
lines: { steps: true }
} ]);
}
doPlot(0);
$(".controls input").click(function (e) {
e.preventDefault();
var t = parseFloat($(this).val().replace('Threshold at ', ''));
doPlot(t);
});
});
</script>
</body>
</html>
jquery.flot.js
View file @ f6b08328
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment