You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.0 KiB
76 lines
2.0 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>Flot Examples: Symbols</title> |
|
<link href="../examples.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.symbol.js"></script> |
|
<script 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 |
|
} |
|
}); |
|
|
|
// Add the Flot version string to the footer |
|
|
|
$("#footer").prepend("Flot " + $.plot.version + " – "); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
|
|
<div id="header"> |
|
<h2>Symbols</h2> |
|
</div> |
|
|
|
<div id="content"> |
|
|
|
<div class="demo-container"> |
|
<div id="placeholder" class="demo-placeholder"></div> |
|
</div> |
|
|
|
<p>Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.</p> |
|
|
|
</div> |
|
|
|
<div id="footer"> |
|
Copyright © 2007 - 2014 IOLA and Ole Laursen |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|