First Initial
This commit is contained in:
Nakorn Rientrakrunchai
143
wwwroot/BackendScript/assets/flot/examples/ajax.html
Normal file
143
wwwroot/BackendScript/assets/flot/examples/ajax.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
|
||||
|
||||
<p>The data is fetched over HTTP, in this case directly from text
|
||||
files. Usually the URL would point to some web server handler
|
||||
(e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
|
||||
extracts it from a database and serializes it to JSON.</p>
|
||||
|
||||
<p>
|
||||
<input class="fetchSeries" type="button" value="First dataset"> -
|
||||
<a href="data-eu-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input class="fetchSeries" type="button" value="Second dataset"> -
|
||||
<a href="data-japan-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input class="fetchSeries" type="button" value="Third dataset"> -
|
||||
<a href="data-usa-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<p>If you combine AJAX with setTimeout, you can poll the server
|
||||
for new data.</p>
|
||||
|
||||
<p>
|
||||
<input class="dataUpdate" type="button" value="Poll for data">
|
||||
</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var options = {
|
||||
lines: { show: true },
|
||||
points: { show: true },
|
||||
xaxis: { tickDecimals: 0, tickSize: 1 }
|
||||
};
|
||||
var data = [];
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
$.plot(placeholder, data, options);
|
||||
|
||||
|
||||
// fetch one series, adding to what we got
|
||||
var alreadyFetched = {};
|
||||
|
||||
$("input.fetchSeries").click(function () {
|
||||
var button = $(this);
|
||||
|
||||
// find the URL in the link right next to us
|
||||
var dataurl = button.siblings('a').attr('href');
|
||||
|
||||
// then fetch the data with jQuery
|
||||
function onDataReceived(series) {
|
||||
// extract the first coordinate pair so you can see that
|
||||
// data is now an ordinary Javascript object
|
||||
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
|
||||
|
||||
button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
|
||||
|
||||
// let's add it to our current data
|
||||
if (!alreadyFetched[series.label]) {
|
||||
alreadyFetched[series.label] = true;
|
||||
data.push(series);
|
||||
}
|
||||
|
||||
// and plot all we got
|
||||
$.plot(placeholder, data, options);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: dataurl,
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
success: onDataReceived
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// initiate a recurring data update
|
||||
$("input.dataUpdate").click(function () {
|
||||
// reset data
|
||||
data = [];
|
||||
alreadyFetched = {};
|
||||
|
||||
$.plot(placeholder, data, options);
|
||||
|
||||
var iteration = 0;
|
||||
|
||||
function fetchData() {
|
||||
++iteration;
|
||||
|
||||
function onDataReceived(series) {
|
||||
// we get all the data in one go, if we only got partial
|
||||
// data, we could merge it with what we already got
|
||||
data = [ series ];
|
||||
|
||||
$.plot($("#placeholder"), data, options);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
// usually, we'll just call the same URL, a script
|
||||
// connected to a database, but in this case we only
|
||||
// have static example files so we need to modify the
|
||||
// URL
|
||||
url: "data-eu-gdp-growth-" + iteration + ".json",
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
success: onDataReceived
|
||||
});
|
||||
|
||||
if (iteration < 5)
|
||||
setTimeout(fetchData, 1000);
|
||||
else {
|
||||
data = [];
|
||||
alreadyFetched = {};
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(fetchData, 1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
75
wwwroot/BackendScript/assets/flot/examples/annotating.html
Normal file
75
wwwroot/BackendScript/assets/flot/examples/annotating.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>Flot has support for simple background decorations such as
|
||||
lines and rectangles. They can be useful for marking up certain
|
||||
areas. You can easily add any HTML you need with standard DOM
|
||||
manipulation, e.g. for labels. For drawing custom shapes there is
|
||||
also direct access to the canvas.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// generate a dataset
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 20; ++i)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var data = [{ data: d1, label: "Pressure", color: "#333" }];
|
||||
|
||||
// setup background areas
|
||||
var markings = [
|
||||
{ color: '#f6f6f6', yaxis: { from: 1 } },
|
||||
{ color: '#f6f6f6', yaxis: { to: -1 } },
|
||||
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
|
||||
{ color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
|
||||
];
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
// plot it
|
||||
var plot = $.plot(placeholder, data, {
|
||||
bars: { show: true, barWidth: 0.5, fill: 0.9 },
|
||||
xaxis: { ticks: [], autoscaleMargin: 0.02 },
|
||||
yaxis: { min: -2, max: 2 },
|
||||
grid: { markings: markings }
|
||||
});
|
||||
|
||||
// add labels
|
||||
var o;
|
||||
|
||||
o = plot.pointOffset({ x: 2, y: -1.2});
|
||||
// we just append it to the placeholder which Flot already uses
|
||||
// for positioning
|
||||
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
|
||||
|
||||
o = plot.pointOffset({ x: 8, y: -1.2});
|
||||
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
|
||||
|
||||
// draw a little arrow on top of the last label to demonstrate
|
||||
// canvas drawing
|
||||
var ctx = plot.getCanvas().getContext("2d");
|
||||
ctx.beginPath();
|
||||
o.left += 4;
|
||||
ctx.moveTo(o.left, o.top);
|
||||
ctx.lineTo(o.left, o.top - 10);
|
||||
ctx.lineTo(o.left + 10, o.top - 5);
|
||||
ctx.lineTo(o.left, o.top);
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fill();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-down.gif
Normal file
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-down.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 B |
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-left.gif
Normal file
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-left.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-right.gif
Normal file
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-right.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 897 B |
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-up.gif
Normal file
BIN
wwwroot/BackendScript/assets/flot/examples/arrow-up.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 B |
38
wwwroot/BackendScript/assets/flot/examples/basic.html
Normal file
38
wwwroot/BackendScript/assets/flot/examples/basic.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>Simple example. You don't need to specify much to get an
|
||||
attractive look. Put in a placeholder, make sure you set its
|
||||
dimensions (otherwise the plot library will barf) and call the
|
||||
plot function with the data. The axes are automatically
|
||||
scaled.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 14; i += 0.5)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
|
||||
|
||||
// a null signifies separate line segments
|
||||
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
|
||||
|
||||
$.plot($("#placeholder"), [ d1, d2, d3 ]);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Europe (EU27)",
|
||||
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Japan",
|
||||
"data": [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "USA",
|
||||
"data": [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]]
|
||||
}
|
||||
75
wwwroot/BackendScript/assets/flot/examples/graph-types.html
Normal file
75
wwwroot/BackendScript/assets/flot/examples/graph-types.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>Flot supports lines, points, filled areas, bars and any
|
||||
combinations of these, in the same plot and even on the same data
|
||||
series.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 14; i += 0.5)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i < 14; i += 0.5)
|
||||
d3.push([i, Math.cos(i)]);
|
||||
|
||||
var d4 = [];
|
||||
for (var i = 0; i < 14; i += 0.1)
|
||||
d4.push([i, Math.sqrt(i * 10)]);
|
||||
|
||||
var d5 = [];
|
||||
for (var i = 0; i < 14; i += 0.5)
|
||||
d5.push([i, Math.sqrt(i)]);
|
||||
|
||||
var d6 = [];
|
||||
for (var i = 0; i < 14; i += 0.5 + Math.random())
|
||||
d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
|
||||
|
||||
$.plot($("#placeholder"), [
|
||||
{
|
||||
data: d1,
|
||||
lines: { show: true, fill: true }
|
||||
},
|
||||
{
|
||||
data: d2,
|
||||
bars: { show: true }
|
||||
},
|
||||
{
|
||||
data: d3,
|
||||
points: { show: true }
|
||||
},
|
||||
{
|
||||
data: d4,
|
||||
lines: { show: true }
|
||||
},
|
||||
{
|
||||
data: d5,
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
},
|
||||
{
|
||||
data: d6,
|
||||
lines: { show: true, steps: true }
|
||||
}
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
45
wwwroot/BackendScript/assets/flot/examples/image.html
Normal file
45
wwwroot/BackendScript/assets/flot/examples/image.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!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.image.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:400px;height:400px;"></div>
|
||||
|
||||
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
|
||||
|
||||
<p>With the image plugin, you can plot images. This is for example
|
||||
useful for getting ticks on complex prerendered visualizations.
|
||||
Instead of inputting data points, you put in the images and where
|
||||
their two opposite corners are supposed to be in plot space.</p>
|
||||
|
||||
<p>Images represent a little further complication because you need
|
||||
to make sure they are loaded before you can use them (Flot skips
|
||||
incomplete images). The plugin comes with a couple of helpers
|
||||
for doing that.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
|
||||
var options = {
|
||||
series: { images: { show: true } },
|
||||
xaxis: { min: -8, max: 4 },
|
||||
yaxis: { min: -8, max: 4 }
|
||||
};
|
||||
|
||||
$.plot.image.loadDataImages(data, options, function () {
|
||||
$.plot($("#placeholder"), data, options);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
wwwroot/BackendScript/assets/flot/examples/index.html
Normal file
44
wwwroot/BackendScript/assets/flot/examples/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="basic.html">Basic example</a></li>
|
||||
<li><a href="graph-types.html">Different graph types</a></li>
|
||||
<li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
|
||||
<li><a href="ajax.html">Updating graphs with AJAX</a> and <a href="realtime.html">real-time updates</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Being interactive:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="turning-series.html">Turning series on/off</a></li>
|
||||
<li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a> (both with selection plugin)</li>
|
||||
<li><a href="interacting.html">Interacting with the data points</a></li>
|
||||
<li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
|
||||
<li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
|
||||
</ul>
|
||||
|
||||
<p>Various features:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="symbols.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
|
||||
<li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
|
||||
<li><a href="multiple-axes.html">Multiple axes</a> and <a href="interacting-axes.html">interacting with the axes</a></li>
|
||||
<li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
|
||||
<li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
|
||||
<li><a href="percentiles.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
|
||||
<li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
|
||||
<li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
|
||||
<li><a href="pie.html">Pie charts</a> (with pie plugin)</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>With multiple axes, you sometimes need to interact with them. A
|
||||
simple way to do this is to draw the plot, deduce the axis
|
||||
placements and insert a couple of divs on top to catch events.
|
||||
Try clicking an axis.</p>
|
||||
|
||||
<p id="click"></p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
function generate(start, end, fn) {
|
||||
var res = [];
|
||||
for (var i = 0; i <= 100; ++i) {
|
||||
var x = start + i / 100 * (end - start);
|
||||
res.push([x, fn(x)]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
var data = [
|
||||
{ data: generate(0, 10, function (x) { return Math.sqrt(x)}), xaxis: 1, yaxis:1 },
|
||||
{ data: generate(0, 10, function (x) { return Math.sin(x)}), xaxis: 1, yaxis:2 },
|
||||
{ data: generate(0, 10, function (x) { return Math.cos(x)}), xaxis: 1, yaxis:3 },
|
||||
{ data: generate(2, 10, function (x) { return Math.tan(x)}), xaxis: 2, yaxis: 4 }
|
||||
];
|
||||
|
||||
var plot = $.plot($("#placeholder"),
|
||||
data,
|
||||
{
|
||||
xaxes: [
|
||||
{ position: 'bottom' },
|
||||
{ position: 'top'}
|
||||
],
|
||||
yaxes: [
|
||||
{ position: 'left' },
|
||||
{ position: 'left' },
|
||||
{ position: 'right' },
|
||||
{ position: 'left' }
|
||||
]
|
||||
});
|
||||
|
||||
// now for each axis, create a div
|
||||
|
||||
function getBoundingBoxForAxis(plot, axis) {
|
||||
var left = axis.box.left, top = axis.box.top,
|
||||
right = left + axis.box.width, bottom = top + axis.box.height;
|
||||
|
||||
// some ticks may stick out, enlarge the box to encompass all ticks
|
||||
var cls = axis.direction + axis.n + 'Axis';
|
||||
plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () {
|
||||
var pos = $(this).position();
|
||||
left = Math.min(pos.left, left);
|
||||
top = Math.min(pos.top, top);
|
||||
right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right);
|
||||
bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom);
|
||||
});
|
||||
|
||||
return { left: left, top: top, width: right - left, height: bottom - top };
|
||||
}
|
||||
|
||||
$.each(plot.getAxes(), function (i, axis) {
|
||||
if (!axis.show)
|
||||
return;
|
||||
|
||||
var box = getBoundingBoxForAxis(plot, axis);
|
||||
|
||||
$('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>')
|
||||
.data('axis.direction', axis.direction)
|
||||
.data('axis.n', axis.n)
|
||||
.css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" })
|
||||
.appendTo(plot.getPlaceholder())
|
||||
.hover(
|
||||
function () { $(this).css({ opacity: 0.10 }) },
|
||||
function () { $(this).css({ opacity: 0 }) }
|
||||
)
|
||||
.click(function () {
|
||||
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!")
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
93
wwwroot/BackendScript/assets/flot/examples/interacting.html
Normal file
93
wwwroot/BackendScript/assets/flot/examples/interacting.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>One of the goals of Flot is to support user interactions. Try
|
||||
pointing and clicking on the points.</p>
|
||||
|
||||
<p id="hoverdata">Mouse hovers at
|
||||
(<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>
|
||||
|
||||
<p>A tooltip is easy to build with a bit of jQuery code and the
|
||||
data returned from the plot.</p>
|
||||
|
||||
<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var sin = [], cos = [];
|
||||
for (var i = 0; i < 14; i += 0.5) {
|
||||
sin.push([i, Math.sin(i)]);
|
||||
cos.push([i, Math.cos(i)]);
|
||||
}
|
||||
|
||||
var plot = $.plot($("#placeholder"),
|
||||
[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
|
||||
series: {
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
},
|
||||
grid: { hoverable: true, clickable: true },
|
||||
yaxis: { min: -1.2, max: 1.2 }
|
||||
});
|
||||
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip">' + contents + '</div>').css( {
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
top: y + 5,
|
||||
left: x + 5,
|
||||
border: '1px solid #fdd',
|
||||
padding: '2px',
|
||||
'background-color': '#fee',
|
||||
opacity: 0.80
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
var previousPoint = null;
|
||||
$("#placeholder").bind("plothover", function (event, pos, item) {
|
||||
$("#x").text(pos.x.toFixed(2));
|
||||
$("#y").text(pos.y.toFixed(2));
|
||||
|
||||
if ($("#enableTooltip:checked").length > 0) {
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$("#tooltip").remove();
|
||||
var x = item.datapoint[0].toFixed(2),
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY,
|
||||
item.series.label + " of " + x + " = " + y);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#tooltip").remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#placeholder").bind("plotclick", function (event, pos, item) {
|
||||
if (item) {
|
||||
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
|
||||
plot.highlight(item.series, item.datapoint);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
6
wwwroot/BackendScript/assets/flot/examples/layout.css
Normal file
6
wwwroot/BackendScript/assets/flot/examples/layout.css
Normal file
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 50px;
|
||||
max-width: 800px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
118
wwwroot/BackendScript/assets/flot/examples/navigate.html
Normal file
118
wwwroot/BackendScript/assets/flot/examples/navigate.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!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>
|
||||
<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>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
|
||||
function sumf(f, t, m) {
|
||||
var res = 0;
|
||||
for (var i = 1; i < m; ++i)
|
||||
res += f(i * i * t) / (i * i);
|
||||
return res;
|
||||
}
|
||||
|
||||
var d1 = [];
|
||||
for (var t = 0; t <= 2 * Math.PI; t += 0.01)
|
||||
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
|
||||
var data = [ d1 ];
|
||||
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
var options = {
|
||||
series: { lines: { show: true }, shadowSize: 0 },
|
||||
xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
|
||||
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
|
||||
zoom: {
|
||||
interactive: true
|
||||
},
|
||||
pan: {
|
||||
interactive: true
|
||||
}
|
||||
};
|
||||
|
||||
var plot = $.plot(placeholder, data, options);
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
// 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) {
|
||||
e.preventDefault();
|
||||
plot.pan(offset);
|
||||
});
|
||||
}
|
||||
|
||||
addArrow('left', 55, 60, { left: -100 });
|
||||
addArrow('right', 25, 60, { left: 100 });
|
||||
addArrow('up', 40, 45, { top: -100 });
|
||||
addArrow('down', 40, 75, { top: 100 });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
57
wwwroot/BackendScript/assets/flot/examples/percentiles.html
Normal file
57
wwwroot/BackendScript/assets/flot/examples/percentiles.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!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.fillbetween.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:400px;"></div>
|
||||
|
||||
<p>Height in centimeters of individuals from the US (2003-2006) as function of
|
||||
age in years (source: <a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>).
|
||||
The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>
|
||||
|
||||
<p>For each point of a filled curve, you can specify an arbitrary
|
||||
bottom. As this example illustrates, this can be useful for
|
||||
plotting percentiles. If you have the data sets available without
|
||||
appropriate fill bottoms, you can use the fillbetween plugin to
|
||||
compute the data point bottoms automatically.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var males = {'15%': [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6], [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9], [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]], '90%': [[2, 96.8], [3, 105.2], [4, 113.9], [5, 120.8], [6, 127.0], [7, 133.1], [8, 139.1], [9, 143.9], [10, 151.3], [11, 161.1], [12, 164.8], [13, 173.5], [14, 179.0], [15, 182.0], [16, 186.9], [17, 185.2], [18, 186.3], [19, 186.6]], '25%': [[2, 89.2], [3, 94.9], [4, 104.4], [5, 111.4], [6, 117.5], [7, 120.2], [8, 127.1], [9, 132.9], [10, 136.8], [11, 144.4], [12, 149.5], [13, 154.1], [14, 163.1], [15, 169.2], [16, 170.4], [17, 171.2], [18, 172.4], [19, 170.8]], '10%': [[2, 86.9], [3, 92.6], [4, 99.9], [5, 107.0], [6, 114.0], [7, 113.5], [8, 123.6], [9, 129.2], [10, 133.0], [11, 140.6], [12, 145.2], [13, 149.7], [14, 158.4], [15, 163.5], [16, 166.9], [17, 167.5], [18, 167.1], [19, 165.3]], 'mean': [[2, 91.9], [3, 98.5], [4, 107.1], [5, 114.4], [6, 120.6], [7, 124.7], [8, 131.1], [9, 136.8], [10, 142.3], [11, 150.0], [12, 154.7], [13, 161.9], [14, 168.7], [15, 173.6], [16, 175.9], [17, 176.6], [18, 176.8], [19, 176.7]], '75%': [[2, 94.5], [3, 102.1], [4, 110.8], [5, 117.9], [6, 124.0], [7, 129.3], [8, 134.6], [9, 141.4], [10, 147.0], [11, 156.1], [12, 160.3], [13, 168.3], [14, 174.7], [15, 178.0], [16, 180.2], [17, 181.7], [18, 181.3], [19, 182.5]], '85%': [[2, 96.2], [3, 103.8], [4, 111.8], [5, 119.6], [6, 125.6], [7, 131.5], [8, 138.0], [9, 143.3], [10, 149.3], [11, 159.8], [12, 162.5], [13, 171.3], [14, 177.5], [15, 180.2], [16, 183.8], [17, 183.4], [18, 183.5], [19, 185.5]], '50%': [[2, 91.9], [3, 98.2], [4, 106.8], [5, 114.6], [6, 120.8], [7, 125.2], [8, 130.3], [9, 137.1], [10, 141.5], [11, 149.4], [12, 153.9], [13, 162.2], [14, 169.0], [15, 174.8], [16, 176.0], [17, 176.8], [18, 176.4], [19, 177.4]]};
|
||||
var females = {'15%': [[2, 84.8], [3, 93.7], [4, 100.6], [5, 105.8], [6, 113.3], [7, 119.3], [8, 124.3], [9, 131.4], [10, 136.9], [11, 143.8], [12, 149.4], [13, 151.2], [14, 152.3], [15, 155.9], [16, 154.7], [17, 157.0], [18, 156.1], [19, 155.4]], '90%': [[2, 95.6], [3, 104.1], [4, 111.9], [5, 119.6], [6, 127.6], [7, 133.1], [8, 138.7], [9, 147.1], [10, 152.8], [11, 161.3], [12, 166.6], [13, 167.9], [14, 169.3], [15, 170.1], [16, 172.4], [17, 169.2], [18, 171.1], [19, 172.4]], '25%': [[2, 87.2], [3, 95.9], [4, 101.9], [5, 107.4], [6, 114.8], [7, 121.4], [8, 126.8], [9, 133.4], [10, 138.6], [11, 146.2], [12, 152.0], [13, 153.8], [14, 155.7], [15, 158.4], [16, 157.0], [17, 158.5], [18, 158.4], [19, 158.1]], '10%': [[2, 84.0], [3, 91.9], [4, 99.2], [5, 105.2], [6, 112.7], [7, 118.0], [8, 123.3], [9, 130.2], [10, 135.0], [11, 141.1], [12, 148.3], [13, 150.0], [14, 150.7], [15, 154.3], [16, 153.6], [17, 155.6], [18, 154.7], [19, 153.1]], 'mean': [[2, 90.2], [3, 98.3], [4, 105.2], [5, 112.2], [6, 119.0], [7, 125.8], [8, 131.3], [9, 138.6], [10, 144.2], [11, 151.3], [12, 156.7], [13, 158.6], [14, 160.5], [15, 162.1], [16, 162.9], [17, 162.2], [18, 163.0], [19, 163.1]], '75%': [[2, 93.2], [3, 101.5], [4, 107.9], [5, 116.6], [6, 122.8], [7, 129.3], [8, 135.2], [9, 143.7], [10, 148.7], [11, 156.9], [12, 160.8], [13, 163.0], [14, 165.0], [15, 165.8], [16, 168.7], [17, 166.2], [18, 167.6], [19, 168.0]], '85%': [[2, 94.5], [3, 102.8], [4, 110.4], [5, 119.0], [6, 125.7], [7, 131.5], [8, 137.9], [9, 146.0], [10, 151.3], [11, 159.9], [12, 164.0], [13, 166.5], [14, 167.5], [15, 168.5], [16, 171.5], [17, 168.0], [18, 169.8], [19, 170.3]], '50%': [[2, 90.2], [3, 98.1], [4, 105.2], [5, 111.7], [6, 118.2], [7, 125.6], [8, 130.5], [9, 138.3], [10, 143.7], [11, 151.4], [12, 156.7], [13, 157.7], [14, 161.0], [15, 162.0], [16, 162.8], [17, 162.2], [18, 162.8], [19, 163.3]]};
|
||||
|
||||
var dataset = [
|
||||
{ label: 'Female mean', data: females['mean'], lines: { show: true }, color: "rgb(255,50,50)" },
|
||||
{ id: 'f15%', data: females['15%'], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
|
||||
{ id: 'f25%', data: females['25%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: 'f15%' },
|
||||
{ id: 'f50%', data: females['50%'], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: 'f25%' },
|
||||
{ id: 'f75%', data: females['75%'], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: 'f50%' },
|
||||
{ id: 'f85%', data: females['85%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: 'f75%' },
|
||||
|
||||
{ label: 'Male mean', data: males['mean'], lines: { show: true }, color: "rgb(50,50,255)" },
|
||||
{ id: 'm15%', data: males['15%'], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(50,50,255)" },
|
||||
{ id: 'm25%', data: males['25%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: 'm15%' },
|
||||
{ id: 'm50%', data: males['50%'], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: 'm25%' },
|
||||
{ id: 'm75%', data: males['75%'], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(50,50,255)", fillBetween: 'm50%' },
|
||||
{ id: 'm85%', data: males['85%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: 'm75%' }
|
||||
]
|
||||
|
||||
$.plot($("#placeholder"), dataset, {
|
||||
xaxis: { tickDecimals: 0 },
|
||||
yaxis: { tickFormatter: function (v) { return v + " cm"; } },
|
||||
legend: { position: 'se' }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
756
wwwroot/BackendScript/assets/flot/examples/pie.html
Normal file
756
wwwroot/BackendScript/assets/flot/examples/pie.html
Normal file
@@ -0,0 +1,756 @@
|
||||
<!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 Pie Examples</title>
|
||||
<!--[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.pie.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// data
|
||||
/*var data = [
|
||||
{ label: "Series1", data: 10},
|
||||
{ label: "Series2", data: 30},
|
||||
{ label: "Series3", data: 90},
|
||||
{ label: "Series4", data: 70},
|
||||
{ label: "Series5", data: 80},
|
||||
{ label: "Series6", data: 110}
|
||||
];*/
|
||||
/*var data = [
|
||||
{ label: "Series1", data: [[1,10]]},
|
||||
{ label: "Series2", data: [[1,30]]},
|
||||
{ label: "Series3", data: [[1,90]]},
|
||||
{ label: "Series4", data: [[1,70]]},
|
||||
{ label: "Series5", data: [[1,80]]},
|
||||
{ label: "Series6", data: [[1,0]]}
|
||||
];*/
|
||||
var data = [];
|
||||
var series = Math.floor(Math.random()*10)+1;
|
||||
for( var i = 0; i<series; i++)
|
||||
{
|
||||
data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 }
|
||||
}
|
||||
|
||||
// DEFAULT
|
||||
$.plot($("#default"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 1
|
||||
$.plot($("#graph1"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 2
|
||||
$.plot($("#graph2"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
background: { opacity: 0.8 }
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 3
|
||||
$.plot($("#graph3"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
background: { opacity: 0.5 }
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 4
|
||||
$.plot($("#graph4"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 5
|
||||
$.plot($("#graph5"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 6
|
||||
$.plot($("#graph6"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 7
|
||||
$.plot($("#graph7"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
combine: {
|
||||
color: '#999',
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 8
|
||||
$.plot($("#graph8"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius:300,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// GRAPH 9
|
||||
$.plot($("#graph9"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
tilt: 0.5,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
background: { opacity: 0.8 }
|
||||
},
|
||||
combine: {
|
||||
color: '#999',
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// DONUT
|
||||
$.plot($("#donut"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// INTERACTIVE
|
||||
$.plot($("#interactive"), data,
|
||||
{
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
}
|
||||
});
|
||||
$("#interactive").bind("plothover", pieHover);
|
||||
$("#interactive").bind("plotclick", pieClick);
|
||||
|
||||
});
|
||||
|
||||
function pieHover(event, pos, obj)
|
||||
{
|
||||
if (!obj)
|
||||
return;
|
||||
percent = parseFloat(obj.series.percent).toFixed(2);
|
||||
$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
|
||||
}
|
||||
|
||||
function pieClick(event, pos, obj)
|
||||
{
|
||||
if (!obj)
|
||||
return;
|
||||
percent = parseFloat(obj.series.percent).toFixed(2);
|
||||
alert(''+obj.series.label+': '+percent+'%');
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
div.graph
|
||||
{
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
float: left;
|
||||
border: 1px dashed gainsboro;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
display: block;
|
||||
margin-left: 400px;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
padding-top: 1em;
|
||||
margin-bottom: 0;
|
||||
clear: both;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
code
|
||||
{
|
||||
display: block;
|
||||
background-color: #eee;
|
||||
border: 1px dashed #999;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
color: #666;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
code b
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
ul li
|
||||
{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul.options li
|
||||
{
|
||||
list-style: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
ul li i
|
||||
{
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Pie Examples</h1>
|
||||
|
||||
<h2>Default with Legend</h2>
|
||||
<div id="default" class="graph"></div>
|
||||
<label for="default">
|
||||
Default pie graph with no options set.
|
||||
<code>
|
||||
$.plot($("#default"), data,<br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true<br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Default without Legend</h2>
|
||||
<div id="graph1" class="graph"></div>
|
||||
<label for="graph1">
|
||||
Default pie graph when legend is disabled. Since the labels would normally be outside the container, the graph is resized to fit.
|
||||
<code>
|
||||
$.plot($("#graph1"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
<b>legend: {<br/>
|
||||
show: false<br/>
|
||||
}</b><br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph2</h2>
|
||||
<div id="graph2" class="graph"></div>
|
||||
<label for="graph2">
|
||||
Added a semi-transparent background to the labels and a custom labelFormatter function.
|
||||
<code>
|
||||
$.plot($("#graph2"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
<b>label: {<br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
background: { opacity: 0.8 }<br/>
|
||||
}</b><br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph3</h2>
|
||||
<div id="graph3" class="graph"></div>
|
||||
<label for="graph3">
|
||||
Slightly more transparent label backgrounds and adjusted the radius values to place them within the pie.
|
||||
<code>
|
||||
$.plot($("#graph3"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
<b>radius: 3/4,</b><br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
<b>background: { opacity: 0.5 }</b><br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph4</h2>
|
||||
<div id="graph4" class="graph"></div>
|
||||
<label for="graph4">
|
||||
Semi-transparent, black-colored label background.
|
||||
<code>
|
||||
$.plot($("#graph4"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
radius: 3/4,<br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
background: { <br/>
|
||||
opacity: 0.5,<br/>
|
||||
<b>color: '#000'</b><br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph5</h2>
|
||||
<div id="graph5" class="graph"></div>
|
||||
<label for="graph5">
|
||||
Semi-transparent, black-colored label background placed at pie edge.
|
||||
<code>
|
||||
$.plot($("#graph5"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
<b>radius: 3/4,</b><br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
radius: 3/4,<br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
background: { <br/>
|
||||
opacity: 0.5,<br/>
|
||||
color: '#000'<br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph6</h2>
|
||||
<div id="graph6" class="graph"></div>
|
||||
<label for="graph6">
|
||||
Labels can be hidden if the slice is less than a given percentage of the pie (10% in this case).
|
||||
<br><span style="color: red">Note: you may need to refresh the page to see this effect.</span>
|
||||
<code>
|
||||
$.plot($("#graph6"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
<b>radius: 1,</b><br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
<b>radius: 2/3,</b><br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
<b>threshold: 0.1</b><br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph7</h2>
|
||||
<div id="graph7" class="graph"></div>
|
||||
<label for="graph7">
|
||||
All slices less than a given percentage of the pie can be combined into a single, larger slice (10% in this case).
|
||||
<br><span style="color: red">Note: you may need to refresh the page to see this effect.</span>
|
||||
<code>
|
||||
$.plot($("#graph7"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
<b>combine: {<br/>
|
||||
color: '#999',<br/>
|
||||
threshold: 0.1<br/>
|
||||
}</b><br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph8</h2>
|
||||
<div id="graph8" class="graph"></div>
|
||||
<label for="graph8">
|
||||
The radius can also be set to a specific size (even larger than the container itself).
|
||||
<code>
|
||||
$.plot($("#graph8"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
<b>radius:300,</b><br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
threshold: 0.1<br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Graph9</h2>
|
||||
<div id="graph9" class="graph" style="height: 250px;"></div>
|
||||
<label for="graph9">
|
||||
The pie can be tilted at an angle.
|
||||
<code>
|
||||
$.plot($("#graph9"), data, <br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
<b>tilt: 0.5,</b><br/>
|
||||
label: {<br/>
|
||||
show: true,<br/>
|
||||
radius: 1,<br/>
|
||||
formatter: function(label, series){<br/>
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';<br/>
|
||||
},<br/>
|
||||
background: { opacity: 0.8 }<br/>
|
||||
},<br/>
|
||||
combine: {<br/>
|
||||
color: '#999',<br/>
|
||||
threshold: 0.1<br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
legend: {<br/>
|
||||
show: false<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Donut</h2>
|
||||
<div id="donut" class="graph"></div>
|
||||
<label for="donut">
|
||||
A donut hole can be added.
|
||||
<code>
|
||||
$.plot($("#donut"), data,<br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
<b>innerRadius: 0.5,</b><br/>
|
||||
show: true<br/>
|
||||
}<br/>
|
||||
}<br/>
|
||||
});<br/>
|
||||
</code>
|
||||
</label>
|
||||
|
||||
<h2>Interactive</h2>
|
||||
<div id="interactive" class="graph"></div>
|
||||
<label for="interactive">
|
||||
The pie can be made interactive with hover and click events.
|
||||
<code>
|
||||
$.plot($("#interactive"), data,<br/>
|
||||
{<br/>
|
||||
series: {<br/>
|
||||
pie: { <br/>
|
||||
show: true<br/>
|
||||
}<br/>
|
||||
},<br/>
|
||||
<b>grid: {<br/>
|
||||
hoverable: true,<br/>
|
||||
clickable: true<br/>
|
||||
}</b><br/>
|
||||
});<br/>
|
||||
<b>$("#interactive").bind("plothover", pieHover);<br/>
|
||||
$("#interactive").bind("plotclick", pieClick);</b><br/>
|
||||
</code>
|
||||
<div id="hover"></div>
|
||||
</label>
|
||||
|
||||
<h2>Pie Options</h2>
|
||||
<ul class="options">
|
||||
<li style="border-bottom: 1px dotted #ccc;"><b>option:</b> <i>default value</i> - Description of option</li>
|
||||
<li><b>show:</b> <i>false</i> - Enable the plugin and draw as a pie.</li>
|
||||
<li><b>radius:</b> <i>'auto'</i> - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.</li>
|
||||
<li><b>innerRadius:</b> <i>0</i> - Sets the radius of the donut hole. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the radius, otherwise it will use the value as a direct pixel length.</li>
|
||||
<li><b>startAngle:</b> <i>3/2</i> - Factor of PI used for the starting angle (in radians) It can range between 0 and 2 (where 0 and 2 have the same result).</li>
|
||||
<li><b>tilt:</b> <i>1</i> - Percentage of tilt ranging from 0 and 1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn).</li>
|
||||
<li><b>offset:</b> <ul>
|
||||
<li><b>top:</b> <i>0</i> - Pixel distance to move the pie up and down (relative to the center).</li>
|
||||
<li><b>left:</b> <i>'auto'</i> - Pixel distance to move the pie left and right (relative to the center).</li>
|
||||
</ul>
|
||||
<li><b>stroke:</b> <ul>
|
||||
<li><b>color:</b> <i>'#FFF'</i> - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).</li>
|
||||
<li><b>width:</b> <i>1</i> - Pixel width of the border of each slice.</li>
|
||||
</ul>
|
||||
<li><b>label:</b> <ul>
|
||||
<li><b>show:</b> <i>'auto'</i> - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.</li>
|
||||
<li><b>radius:</b> <i>1</i> - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.</li>
|
||||
<li><b>threshold:</b> <i>0</i> - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.</li>
|
||||
<li><b>formatter:</b> <i>[function]</i> - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").</li>
|
||||
<li><b>radius:</b> <i>1</i> - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.</li>
|
||||
<li><b>background:</b> <ul>
|
||||
<li><b>color:</b> <i>null</i> - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.</li>
|
||||
<li><b>opacity:</b> <i>0</i> - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<li><b>combine:</b> <ul>
|
||||
<li><b>threshold:</b> <i>0</i> - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).</li>
|
||||
<li><b>color:</b> <i>null</i> - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.</li>
|
||||
<li><b>label:</b> <i>'Other'</i> - Label text for the combined slice.</li>
|
||||
</ul>
|
||||
<li><b>highlight:</b> <ul>
|
||||
<li><b>opacity:</b> <i>0.5</i> - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h2>Changes/Features</h2>
|
||||
<ul>
|
||||
<li style="list-style: none;"><i>v1.0 - November 20th, 2009 - Brian Medendorp</i></li>
|
||||
<li>The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.</li>
|
||||
<li>Added a new option (innerRadius) to add a "donut hole" to the center of the pie, based on comtributions from Anthony Aragues. I was a little reluctant to add this feature because it doesn't work very well with the shadow created for the tilted pie, but figured it was worthwhile for non-tilted pies. Also, excanvas apparently doesn't support compositing, so it will fall back to using the stroke color to fill in the center (but I recommend setting the stroke color to the background color anyway).</li>
|
||||
<li>Changed the lineJoin for the border of the pie slices to use the 'round' option. This should make the center of the pie look better, particularly when there are numerous thin slices.</li>
|
||||
<li>Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.</li>
|
||||
<li>The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.</li>
|
||||
<li><b>Hover and Click functionality are now availabe!</b><ul>
|
||||
<li>Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!</li>
|
||||
<li>Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available.
|
||||
<li>I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.</li>
|
||||
<li><span style="color: red;">Warning:</span> There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.</li>
|
||||
</ul></li>
|
||||
<li>Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.4 - July 1st, 2009 - Brian Medendorp</i></li>
|
||||
<li>Each series will now be shown in the legend, even if it's value is zero. The series will not get a positioned label because it will overlap with the other labels present and often makes them unreadable.</li>
|
||||
<li>Data can now be passed in using the standard Flot method using an array of datapoints, the pie plugin will simply use the first y-value that it finds for each series in this case. The plugin uses this datastructure internally, but you can still use the old method of passing in a single numerical value for each series (the plugin will convert it as necessary). This should make it easier to transition from other types of graphs (such as a stacked bar graph) to a pie.</li>
|
||||
<li>The pie can now be tilted at an angle with a new "tilt" option. Acceptable values range from 0-1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn). If the plugin determines that it will fit within the canvas, a drop shadow will be drawn under the tilted pie (this also requires a tilt value of 0.8 or less).</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.3.2 - June 25th, 2009 - Brian Medendorp</i></li>
|
||||
<li>Fixed a bug that was causing the pie to be shifted too far left or right when the legend is showing in some cases.</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.3.1 - June 24th, 2009 - Brian Medendorp</i></li>
|
||||
<li>Fixed a bug that was causing nothing to be drawn and generating a javascript error if any of the data values were set to zero.</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.3 - June 23rd, 2009 - Brian Medendorp</i></li>
|
||||
<li>The legend now works without any modifications! Because of changes made to flot and the plugin system (thanks Ole Laursen!) I was able to simplify a number of things and am now able to use the legend without the direct access hack that was required in the previous version.</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.2 - June 22nd, 2009 - Brian Medendorp</i></li>
|
||||
<li>The legend now works but only if you make the necessary changes to jquery.flot.js. Because of this, I changed the default values for pie.radius and pie.label.show to new 'auto' settings that change the default behavior of the size and labels depending on whether the legend functionality is available or not.</li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>v0.1 - June 18th, 2009 - Brian Medendorp</i></li>
|
||||
<li>Rewrote the entire pie code into a flot plugin (since that is now an option), so it should be much easier to use and the code is cleaned up a bit. However, the (standard flot) legend is no longer available because the only way to prevent the grid lines from being displayed also prevents the legend from being displayed. Hopefully this can be fixed at a later date.</li>
|
||||
<li>Restructured and combined some of the options. It should be much easier to deal with now.</li>
|
||||
<li>Added the ability to change the starting point of the pie (still defaults to the top).</li>
|
||||
<li>Modified the default options to show the labels to compensate for the lack of a legend.</li>
|
||||
<li>Modified this page to use a random dataset. <span style="color: red">Note: you may need to refresh the page to see the effects of some of the examples.</span></li>
|
||||
<br/>
|
||||
<li style="list-style: none;"><i>May 21st, 2009 - Brian Medendorp</i></li>
|
||||
<li>Merged original pie modifications by Sergey Nosenko into the latest SVN version <i>(as of May 15th, 2009)</i> so that it will work with ie8.</li>
|
||||
<li>Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.</li>
|
||||
<li>Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).</li>
|
||||
<li>Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.</li>
|
||||
<li>As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas</li>
|
||||
<li>Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.</li>
|
||||
<li>Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.</li>
|
||||
<li>Added a new option "sliceCombinePercent" that combines all slices smaller than the specified percentage into one larger slice. This is to help make the pie more attractive when there are a number of tiny slices. The options "sliceCombineColor" and "sliceCombineLabel" have also been added to change the color and name of the new slice if desired.</li>
|
||||
<li>Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900, 7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari (3.1.1, 4 beta 5528.16).
|
||||
</ul>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
83
wwwroot/BackendScript/assets/flot/examples/realtime.html
Normal file
83
wwwroot/BackendScript/assets/flot/examples/realtime.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>You can update a chart periodically to get a real-time effect
|
||||
by using a timer to insert the new data in the plot and redraw it.</p>
|
||||
|
||||
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// we use an inline data source in the example, usually data would
|
||||
// be fetched from a server
|
||||
var data = [], totalPoints = 300;
|
||||
function getRandomData() {
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
|
||||
// do a random walk
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50;
|
||||
var y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0)
|
||||
y = 0;
|
||||
if (y > 100)
|
||||
y = 100;
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
// zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i)
|
||||
res.push([i, data[i]])
|
||||
return res;
|
||||
}
|
||||
|
||||
// setup control widget
|
||||
var updateInterval = 30;
|
||||
$("#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);
|
||||
}
|
||||
});
|
||||
|
||||
// setup plot
|
||||
var options = {
|
||||
series: { shadowSize: 0 }, // drawing is faster without shadows
|
||||
yaxis: { min: 0, max: 100 },
|
||||
xaxis: { show: false }
|
||||
};
|
||||
var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
|
||||
|
||||
function update() {
|
||||
plot.setData([ getRandomData() ]);
|
||||
// since the axes don't change, we don't need to call plot.setupGrid()
|
||||
plot.draw();
|
||||
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
wwwroot/BackendScript/assets/flot/examples/resize.html
Normal file
61
wwwroot/BackendScript/assets/flot/examples/resize.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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.resize.js"></script>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
height: 100%; /* make the percentage height on placeholder work */
|
||||
}
|
||||
.message {
|
||||
padding-left: 50px;
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:80%;height:40%;"></div>
|
||||
|
||||
<p class="message"></p>
|
||||
|
||||
<p>Sometimes it makes more sense to just let the plot take up the
|
||||
available space. In that case, we need to redraw the plot each
|
||||
time the placeholder changes its size. If you include the resize
|
||||
plugin, this is handled automatically.</p>
|
||||
|
||||
<p>Try resizing the window.</p>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 14; i += 0.5)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
|
||||
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
var plot = $.plot(placeholder, [d1, d2, d3]);
|
||||
|
||||
// the plugin includes a jQuery plugin for adding resize events to
|
||||
// any element, let's just add a callback so we can display the
|
||||
// placeholder size
|
||||
placeholder.resize(function () {
|
||||
$(".message").text("Placeholder is now "
|
||||
+ $(this).width() + "x" + $(this).height()
|
||||
+ " pixels");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
wwwroot/BackendScript/assets/flot/examples/selection.html
Normal file
114
wwwroot/BackendScript/assets/flot/examples/selection.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!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.selection.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
|
||||
|
||||
<p>Flot supports selections through the selection plugin.
|
||||
You can enable rectangular selection
|
||||
or one-dimensional selection if the user should only be able to
|
||||
select on one axis. Try left-click and drag on the plot above
|
||||
where selection on the x axis is enabled.</p>
|
||||
|
||||
<p>You selected: <span id="selection"></span></p>
|
||||
|
||||
<p>The plot command returns a plot object you can use to control
|
||||
the selection. Click the buttons below.</p>
|
||||
|
||||
<p><input id="clearSelection" type="button" value="Clear selection" />
|
||||
<input id="setSelection" type="button" value="Select year 1994" /></p>
|
||||
|
||||
<p>Selections are really useful for zooming. Just replot the
|
||||
chart with min and max values for the axes set to the values
|
||||
in the "plotselected" event triggered. Enable the checkbox
|
||||
below and select a region again.</p>
|
||||
|
||||
<p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var data = [
|
||||
{
|
||||
label: "United States",
|
||||
data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
|
||||
},
|
||||
{
|
||||
label: "Russia",
|
||||
data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
|
||||
},
|
||||
{
|
||||
label: "United Kingdom",
|
||||
data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
|
||||
},
|
||||
{
|
||||
label: "Germany",
|
||||
data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
|
||||
},
|
||||
{
|
||||
label: "Denmark",
|
||||
data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
|
||||
},
|
||||
{
|
||||
label: "Sweden",
|
||||
data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
|
||||
},
|
||||
{
|
||||
label: "Norway",
|
||||
data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
|
||||
}
|
||||
];
|
||||
|
||||
var options = {
|
||||
series: {
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
},
|
||||
legend: { noColumns: 2 },
|
||||
xaxis: { tickDecimals: 0 },
|
||||
yaxis: { min: 0 },
|
||||
selection: { mode: "x" }
|
||||
};
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
placeholder.bind("plotselected", function (event, ranges) {
|
||||
$("#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 }
|
||||
}));
|
||||
});
|
||||
|
||||
placeholder.bind("plotunselected", function (event) {
|
||||
$("#selection").text("");
|
||||
});
|
||||
|
||||
var plot = $.plot(placeholder, data, options);
|
||||
|
||||
$("#clearSelection").click(function () {
|
||||
plot.clearSelection();
|
||||
});
|
||||
|
||||
$("#setSelection").click(function () {
|
||||
plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>There are plenty of options you can set to control the precise
|
||||
looks of your plot. You can control the ticks on the axes, the
|
||||
legend, the graph type, etc. The idea is that Flot goes to great
|
||||
lengths to provide sensible defaults so that you don't have to
|
||||
customize much for a good result.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||||
d2.push([i, Math.cos(i)]);
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.1)
|
||||
d3.push([i, Math.tan(i)]);
|
||||
|
||||
$.plot($("#placeholder"), [
|
||||
{ label: "sin(x)", data: d1},
|
||||
{ label: "cos(x)", data: d2},
|
||||
{ label: "tan(x)", data: d3}
|
||||
], {
|
||||
series: {
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
},
|
||||
xaxis: {
|
||||
ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
|
||||
},
|
||||
yaxis: {
|
||||
ticks: 10,
|
||||
min: -2,
|
||||
max: 2
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: { colors: ["#fff", "#eee"] }
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
wwwroot/BackendScript/assets/flot/examples/stacking.html
Normal file
77
wwwroot/BackendScript/assets/flot/examples/stacking.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!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.stack.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>With the stack plugin, you can have Flot stack the
|
||||
series. This is useful if you wish to display both a total and the
|
||||
constituents it is made of. The only requirement is that you provide
|
||||
the input sorted on x.</p>
|
||||
|
||||
<p class="stackControls">
|
||||
<input type="button" value="With stacking">
|
||||
<input type="button" value="Without stacking">
|
||||
</p>
|
||||
|
||||
<p class="graphControls">
|
||||
<input type="button" value="Bars">
|
||||
<input type="button" value="Lines">
|
||||
<input type="button" value="Lines with steps">
|
||||
</p>
|
||||
|
||||
<script id="source">
|
||||
$(function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d1.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d2.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d3.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var stack = 0, bars = true, lines = false, steps = false;
|
||||
|
||||
function plotWithOptions() {
|
||||
$.plot($("#placeholder"), [ d1, d2, d3 ], {
|
||||
series: {
|
||||
stack: stack,
|
||||
lines: { show: lines, fill: true, steps: steps },
|
||||
bars: { show: bars, barWidth: 0.6 }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
plotWithOptions();
|
||||
|
||||
$(".stackControls input").click(function (e) {
|
||||
e.preventDefault();
|
||||
stack = $(this).val() == "With stacking" ? true : null;
|
||||
plotWithOptions();
|
||||
});
|
||||
$(".graphControls input").click(function (e) {
|
||||
e.preventDefault();
|
||||
bars = $(this).val().indexOf("Bars") != -1;
|
||||
lines = $(this).val().indexOf("Lines") != -1;
|
||||
steps = $(this).val().indexOf("steps") != -1;
|
||||
plotWithOptions();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
wwwroot/BackendScript/assets/flot/examples/symbols.html
Normal file
49
wwwroot/BackendScript/assets/flot/examples/symbols.html
Normal file
@@ -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">
|
||||
<!--[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>
|
||||
</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 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>
|
||||
54
wwwroot/BackendScript/assets/flot/examples/thresholding.html
Normal file
54
wwwroot/BackendScript/assets/flot/examples/thresholding.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
71
wwwroot/BackendScript/assets/flot/examples/time.html
Normal file
71
wwwroot/BackendScript/assets/flot/examples/time.html
Normal file
File diff suppressed because one or more lines are too long
95
wwwroot/BackendScript/assets/flot/examples/tracking.html
Normal file
95
wwwroot/BackendScript/assets/flot/examples/tracking.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!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.crosshair.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px"></div>
|
||||
|
||||
<p>You can add crosshairs that'll track the mouse position, either
|
||||
on both axes or as here on only one.</p>
|
||||
|
||||
<p>If you combine it with listening on hover events, you can use
|
||||
it to track the intersection on the curves by interpolating
|
||||
the data points (look at the legend).</p>
|
||||
|
||||
<p id="hoverdata"></p>
|
||||
|
||||
<script type="text/javascript">
|
||||
var plot;
|
||||
$(function () {
|
||||
var sin = [], cos = [];
|
||||
for (var i = 0; i < 14; i += 0.1) {
|
||||
sin.push([i, Math.sin(i)]);
|
||||
cos.push([i, Math.cos(i)]);
|
||||
}
|
||||
|
||||
plot = $.plot($("#placeholder"),
|
||||
[ { data: sin, label: "sin(x) = -0.00"},
|
||||
{ data: cos, label: "cos(x) = -0.00" } ], {
|
||||
series: {
|
||||
lines: { show: true }
|
||||
},
|
||||
crosshair: { mode: "x" },
|
||||
grid: { hoverable: true, autoHighlight: false },
|
||||
yaxis: { min: -1.2, max: 1.2 }
|
||||
});
|
||||
var legends = $("#placeholder .legendLabel");
|
||||
legends.each(function () {
|
||||
// fix the widths so they don't jump around
|
||||
$(this).css('width', $(this).width());
|
||||
});
|
||||
|
||||
var updateLegendTimeout = null;
|
||||
var latestPosition = null;
|
||||
|
||||
function updateLegend() {
|
||||
updateLegendTimeout = null;
|
||||
|
||||
var pos = latestPosition;
|
||||
|
||||
var axes = plot.getAxes();
|
||||
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
||||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
|
||||
return;
|
||||
|
||||
var i, j, dataset = plot.getData();
|
||||
for (i = 0; i < dataset.length; ++i) {
|
||||
var series = dataset[i];
|
||||
|
||||
// find the nearest points, x-wise
|
||||
for (j = 0; j < series.data.length; ++j)
|
||||
if (series.data[j][0] > pos.x)
|
||||
break;
|
||||
|
||||
// now interpolate
|
||||
var y, p1 = series.data[j - 1], p2 = series.data[j];
|
||||
if (p1 == null)
|
||||
y = p2[1];
|
||||
else if (p2 == null)
|
||||
y = p1[1];
|
||||
else
|
||||
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||||
|
||||
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
||||
}
|
||||
}
|
||||
|
||||
$("#placeholder").bind("plothover", function (event, pos, item) {
|
||||
latestPosition = pos;
|
||||
if (!updateLegendTimeout)
|
||||
updateLegendTimeout = setTimeout(updateLegend, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>Here is an example with real data: military budgets for
|
||||
various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
|
||||
|
||||
<p>Since all data is available client-side, it's pretty easy to
|
||||
make the plot interactive. Try turning countries on/off with the
|
||||
checkboxes below.</p>
|
||||
|
||||
<p id="choices">Show:</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var datasets = {
|
||||
"usa": {
|
||||
label: "USA",
|
||||
data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
|
||||
},
|
||||
"russia": {
|
||||
label: "Russia",
|
||||
data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
|
||||
},
|
||||
"uk": {
|
||||
label: "UK",
|
||||
data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
|
||||
},
|
||||
"germany": {
|
||||
label: "Germany",
|
||||
data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
|
||||
},
|
||||
"denmark": {
|
||||
label: "Denmark",
|
||||
data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
|
||||
},
|
||||
"sweden": {
|
||||
label: "Sweden",
|
||||
data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
|
||||
},
|
||||
"norway": {
|
||||
label: "Norway",
|
||||
data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
|
||||
}
|
||||
};
|
||||
|
||||
// hard-code color indices to prevent them from shifting as
|
||||
// countries are turned on/off
|
||||
var i = 0;
|
||||
$.each(datasets, function(key, val) {
|
||||
val.color = i;
|
||||
++i;
|
||||
});
|
||||
|
||||
// insert checkboxes
|
||||
var choiceContainer = $("#choices");
|
||||
$.each(datasets, function(key, val) {
|
||||
choiceContainer.append('<br/><input type="checkbox" name="' + key +
|
||||
'" checked="checked" id="id' + key + '">' +
|
||||
'<label for="id' + key + '">'
|
||||
+ val.label + '</label>');
|
||||
});
|
||||
choiceContainer.find("input").click(plotAccordingToChoices);
|
||||
|
||||
|
||||
function plotAccordingToChoices() {
|
||||
var data = [];
|
||||
|
||||
choiceContainer.find("input:checked").each(function () {
|
||||
var key = $(this).attr("name");
|
||||
if (key && datasets[key])
|
||||
data.push(datasets[key]);
|
||||
});
|
||||
|
||||
if (data.length > 0)
|
||||
$.plot($("#placeholder"), data, {
|
||||
yaxis: { min: 0 },
|
||||
xaxis: { tickDecimals: 0 }
|
||||
});
|
||||
}
|
||||
|
||||
plotAccordingToChoices();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
wwwroot/BackendScript/assets/flot/examples/visitors.html
Normal file
90
wwwroot/BackendScript/assets/flot/examples/visitors.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!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.selection.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p>Visitors per day to the Flot homepage. Weekends are colored. Try zooming.
|
||||
The plot below shows an overview.</p>
|
||||
|
||||
<div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
|
||||
|
||||
<script id="source">
|
||||
$(function () {
|
||||
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
|
||||
|
||||
// first correct the timestamps - they are recorded as the daily
|
||||
// midnights in UTC+0100, but Flot always displays dates in UTC
|
||||
// so we have to add one hour to hit the midnights in the plot
|
||||
for (var i = 0; i < d.length; ++i)
|
||||
d[i][0] += 60 * 60 * 1000;
|
||||
|
||||
// helper for returning the weekends in a period
|
||||
function weekendAreas(axes) {
|
||||
var markings = [];
|
||||
var d = new Date(axes.xaxis.min);
|
||||
// go to the first Saturday
|
||||
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
|
||||
d.setUTCSeconds(0);
|
||||
d.setUTCMinutes(0);
|
||||
d.setUTCHours(0);
|
||||
var i = d.getTime();
|
||||
do {
|
||||
// when we don't set yaxis, the rectangle automatically
|
||||
// extends to infinity upwards and downwards
|
||||
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
|
||||
i += 7 * 24 * 60 * 60 * 1000;
|
||||
} while (i < axes.xaxis.max);
|
||||
|
||||
return markings;
|
||||
}
|
||||
|
||||
var options = {
|
||||
xaxis: { mode: "time", tickLength: 5 },
|
||||
selection: { mode: "x" },
|
||||
grid: { markings: weekendAreas }
|
||||
};
|
||||
|
||||
var plot = $.plot($("#placeholder"), [d], options);
|
||||
|
||||
var overview = $.plot($("#overview"), [d], {
|
||||
series: {
|
||||
lines: { show: true, lineWidth: 1 },
|
||||
shadowSize: 0
|
||||
},
|
||||
xaxis: { ticks: [], mode: "time" },
|
||||
yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
|
||||
selection: { mode: "x" }
|
||||
});
|
||||
|
||||
// now connect the two
|
||||
|
||||
$("#placeholder").bind("plotselected", function (event, ranges) {
|
||||
// do the zooming
|
||||
plot = $.plot($("#placeholder"), [d],
|
||||
$.extend(true, {}, options, {
|
||||
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
|
||||
}));
|
||||
|
||||
// don't fire event on the overview to prevent eternal loop
|
||||
overview.setSelection(ranges, true);
|
||||
});
|
||||
|
||||
$("#overview").bind("plotselected", function (event, ranges) {
|
||||
plot.setSelection(ranges);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
wwwroot/BackendScript/assets/flot/examples/zooming.html
Normal file
98
wwwroot/BackendScript/assets/flot/examples/zooming.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!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.selection.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div style="float:left">
|
||||
<div id="placeholder" style="width:500px;height:300px"></div>
|
||||
</div>
|
||||
|
||||
<div id="miniature" style="float:left;margin-left:20px">
|
||||
<div id="overview" style="width:166px;height:100px"></div>
|
||||
|
||||
<p id="overviewLegend" style="margin-left:10px"></p>
|
||||
</div>
|
||||
|
||||
<p style="clear:left">The selection support makes it easy to
|
||||
construct flexible zooming schemes. With a few lines of code, the
|
||||
small overview plot to the right has been connected to the large
|
||||
plot. Try selecting a rectangle on either of them.</p>
|
||||
|
||||
<script id="source">
|
||||
$(function () {
|
||||
// setup plot
|
||||
function getData(x1, x2) {
|
||||
var d = [];
|
||||
for (var i = 0; i <= 100; ++i) {
|
||||
var x = x1 + i * (x2 - x1) / 100;
|
||||
d.push([x, Math.sin(x * Math.sin(x))]);
|
||||
}
|
||||
|
||||
return [
|
||||
{ label: "sin(x sin(x))", data: d }
|
||||
];
|
||||
}
|
||||
|
||||
var options = {
|
||||
legend: { show: false },
|
||||
series: {
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
},
|
||||
yaxis: { ticks: 10 },
|
||||
selection: { mode: "xy" }
|
||||
};
|
||||
|
||||
var startData = getData(0, 3 * Math.PI);
|
||||
|
||||
var plot = $.plot($("#placeholder"), startData, options);
|
||||
|
||||
// setup overview
|
||||
var overview = $.plot($("#overview"), startData, {
|
||||
legend: { show: true, container: $("#overviewLegend") },
|
||||
series: {
|
||||
lines: { show: true, lineWidth: 1 },
|
||||
shadowSize: 0
|
||||
},
|
||||
xaxis: { ticks: 4 },
|
||||
yaxis: { ticks: 3, min: -2, max: 2 },
|
||||
grid: { color: "#999" },
|
||||
selection: { mode: "xy" }
|
||||
});
|
||||
|
||||
// now connect the two
|
||||
|
||||
$("#placeholder").bind("plotselected", function (event, ranges) {
|
||||
// clamp the zooming to prevent eternal zoom
|
||||
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
|
||||
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
|
||||
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
|
||||
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
|
||||
|
||||
// do the zooming
|
||||
plot = $.plot($("#placeholder"), getData(ranges.xaxis.from, ranges.xaxis.to),
|
||||
$.extend(true, {}, options, {
|
||||
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
|
||||
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
|
||||
}));
|
||||
|
||||
// don't fire event on the overview to prevent eternal loop
|
||||
overview.setSelection(ranges, true);
|
||||
});
|
||||
$("#overview").bind("plotselected", function (event, ranges) {
|
||||
plot.setSelection(ranges);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user