Support for customizing the point type through a callback when plotting points and new symbol plugin with some predefined point types (sponsored by Utility Data Corporation)
git-svn-id: https://flot.googlecode.com/svn/trunk@263 1e0a6537-2640-0410-bfb7-f154510ff394pull/1/head
olau@iola.dk
16 years ago
parent
f192ea9cb8
commit
8031f5fdf3
@ -0,0 +1,49 @@
|
||||
<!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>
|
||||
<script language="javascript" type="text/javascript" src="../jquery.flot.symbol.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>Various point types. Circles are built-in. For other
|
||||
point types, you can define a little callback function to draw the
|
||||
symbol; some common ones are available in the symbol plugin.</p>
|
||||
|
||||
<script id="source" language="javascript" type="text/javascript">
|
||||
$(function () {
|
||||
function generate(offset, amplitude) {
|
||||
var res = [];
|
||||
var start = 0, end = 10;
|
||||
for (var i = 0; i <= 50; ++i) {
|
||||
var x = start + i / 50 * (end - start);
|
||||
res.push([x, amplitude * Math.sin(x + offset)]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
var data = [
|
||||
{ data: generate(2, 1.8), points: { symbol: "circle" } },
|
||||
{ data: generate(3, 1.5), points: { symbol: "square" } },
|
||||
{ data: generate(4, 0.9), points: { symbol: "diamond" } },
|
||||
{ data: generate(6, 1.4), points: { symbol: "triangle" } },
|
||||
{ data: generate(7, 1.1), points: { symbol: "cross" } }
|
||||
];
|
||||
|
||||
$.plot($("#placeholder"), data, {
|
||||
series: { points: { show: true, radius: 3 } },
|
||||
grid: { hoverable: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
/*
|
||||
Flot plugin that adds some extra symbols for plotting points.
|
||||
|
||||
The symbols are accessed as strings through the standard symbol
|
||||
choice:
|
||||
|
||||
series: {
|
||||
points: {
|
||||
symbol: "square" // or "diamond", "triangle", "cross"
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
function processRawData(plot, series, datapoints) {
|
||||
// we normalize the area of each symbol so it is approximately the
|
||||
// same as a circle of the given radius
|
||||
|
||||
var handlers = {
|
||||
square: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||
ctx.rect(x - size, y - size, size + size, size + size);
|
||||
},
|
||||
diamond: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
|
||||
var size = radius * Math.sqrt(Math.PI / 2);
|
||||
ctx.moveTo(x - size, y);
|
||||
ctx.lineTo(x, y - size);
|
||||
ctx.lineTo(x + size, y);
|
||||
ctx.lineTo(x, y + size);
|
||||
ctx.lineTo(x - size, y);
|
||||
},
|
||||
triangle: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
|
||||
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
|
||||
var height = size * Math.sin(Math.PI / 3);
|
||||
ctx.moveTo(x - size/2, y + height/2);
|
||||
ctx.lineTo(x + size/2, y + height/2);
|
||||
if (!shadow) {
|
||||
ctx.lineTo(x, y - height/2);
|
||||
ctx.lineTo(x - size/2, y + height/2);
|
||||
}
|
||||
},
|
||||
cross: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||
ctx.moveTo(x - size, y - size);
|
||||
ctx.lineTo(x + size, y + size);
|
||||
ctx.moveTo(x - size, y + size);
|
||||
ctx.lineTo(x + size, y - size);
|
||||
}
|
||||
}
|
||||
|
||||
var s = series.points.symbol;
|
||||
if (handlers[s])
|
||||
series.points.symbol = handlers[s];
|
||||
}
|
||||
|
||||
function init(plot) {
|
||||
plot.hooks.processDatapoints.push(processRawData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
name: 'symbols',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue