138 lines
18 KiB
HTML
138 lines
18 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Flot Examples: Time Axes</title>
|
||
|
|
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||
|
|
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||
|
|
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
var d = [[-373597200000, 315.71], [-370918800000, 317.45], [-368326800000, 317.50], [-363056400000, 315.86], [-360378000000, 314.93], [-357699600000, 313.19], [-352429200000, 313.34], [-349837200000, 314.67], [-347158800000, 315.58], [-344480400000, 316.47], [-342061200000, 316.65], [-339382800000, 317.71], [-336790800000, 318.29], [-334112400000, 318.16], [-331520400000, 316.55], [-328842000000, 314.80], [-326163600000, 313.84], [-323571600000, 313.34], [-320893200000, 314.81], [-318301200000, 315.59], [-315622800000, 316.43], [-312944400000, 316.97], [-310438800000, 317.58], [-307760400000, 319.03], [-305168400000, 320.03], [-302490000000, 319.59], [-299898000000, 318.18], [-297219600000, 315.91], [-294541200000, 314.16], [-291949200000, 313.83], [-289270800000, 315.00], [-286678800000, 316.19], [-284000400000, 316.89], [-281322000000, 317.70], [-278902800000, 318.54], [-276224400000, 319.48], [-273632400000, 320.58], [-270954000000, 319.78], [-268362000000, 318.58], [-265683600000, 316.79], [-263005200000, 314.99], [-260413200000, 315.31], [-257734800000, 316.10], [-255142800000, 317.01], [-252464400000, 317.94], [-249786000000, 318.56], [-247366800000, 319.69], [-244688400000, 320.58], [-242096400000, 321.01], [-239418000000, 320.61], [-236826000000, 319.61], [-234147600000, 317.40], [-231469200000, 316.26], [-228877200000, 315.42], [-226198800000, 316.69], [-223606800000, 317.69], [-220928400000, 318.74], [-218250000000, 319.08], [-215830800000, 319.86], [-213152400000, 321.39], [-210560400000, 322.24], [-207882000000, 321.47], [-205290000000, 319.74], [-202611600000, 317.77], [-199933200000, 316.21], [-197341200000, 315.99], [-194662800000, 317.07], [-192070800000, 318.36], [-189392400000, 319.57], [-178938000000, 322.23], [-176259600000, 321.89], [-173667600000, 320.44], [-170989200000, 318.70], [-168310800000, 316.70], [-165718800000, 316.87], [-163040400000, 317.68], [-160448400000, 318.71], [-157770000000, 319.44], [-155091600000, 320.44], [-152672400000, 320.89], [-149994000000, 322.13], [-147402000000, 322.16], [-144723600000, 321.87], [-142131600000, 321.21], [-139453200000, 318.87], [-136774800000, 317.81], [-134182800000, 317.30], [-131504400000, 318.87], [-128912400000, 319.42], [-126234000000, 320.62], [-123555600000, 321.59], [-121136400000, 322.39], [-118458000000, 323.70], [-115866000000, 324.07], [-113187600000, 323.75], [-110595600000, 322.40], [-107917200000, 320.37], [-105238800000, 318.64], [-102646800000, 318.10], [-99968400000, 319.79], [-97376400000, 321.03], [-94698000000, 322.33], [-92019600000, 322.50], [-89600400000, 323.04], [-86922000000, 324.42], [-84330000000, 325.00], [-81651600000, 324.09], [-79059600000, 322.55], [-76381200000, 320.92], [-73702800000, 319.26], [-71110800000, 319.39], [-68432400000, 320.72], [-65840400000, 321.96], [-63162000000, 322.57], [-60483600000, 323.15], [-57978000000, 323.89], [-55299600000, 325.02], [-52707600000, 325.57], [-50029200000, 325.36], [-47437200000, 324.14], [-44758800000, 322.11], [-42080400000, 320.33], [-39488400000, 320.25], [-36810000000, 321.32], [-34218000000, 322.90], [-31539600000, 324.00], [-28861200000, 324.42], [-26442000000, 325.64], [-23763600000, 326.66], [-21171600000, 327.38], [-18493200000, 326.70], [-15901200000, 325.89], [-13222800000, 323.67], [-10544400000, 322.38], [-7952400000, 321.78], [-5274000000, 322.85], [-2682000000, 324.12], [-3600000, 325.06], [2674800000, 325.98], [5094000000, 326.93], [7772400000, 328.13], [10364400000, 328.07], [13042800000, 327.66], [15634800000, 326.35], [18313200000, 324.69], [20991600000, 323.10], [23583600000, 323.07], [26262000000, 324.01], [28854000000, 325.13], [31532400000, 326.17], [34210800000, 326.68], [36630000000, 327.18], [39308400000, 327.78], [41900400000, 328.92], [44578800000, 328.57], [47170800000, 327.37], [49849200000, 325.43], [52527600000, 323.36], [55119600000, 323.56], [57798000000, 324.80], [60390000000, 326.01], [63068400000, 326.77], [65746800000, 327.63], [68252400000, 327.75], [70930800000, 329.72], [73522800000, 330.07], [76201200000, 329.09], [78793200000, 32
|
||
|
|
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: { mode: "time" }
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#whole").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: { mode: "time" }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#nineties").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
min: (new Date(1990, 0, 1)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#latenineties").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
minTickSize: [1, "year"],
|
||
|
|
min: (new Date(1996, 0, 1)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ninetyninequarters").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
minTickSize: [1, "quarter"],
|
||
|
|
min: (new Date(1999, 0, 1)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ninetynine").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
minTickSize: [1, "month"],
|
||
|
|
min: (new Date(1999, 0, 1)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#lastweekninetynine").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
minTickSize: [1, "day"],
|
||
|
|
min: (new Date(1999, 11, 25)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime(),
|
||
|
|
timeformat: "%a"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#lastdayninetynine").click(function () {
|
||
|
|
$.plot("#placeholder", [d], {
|
||
|
|
xaxis: {
|
||
|
|
mode: "time",
|
||
|
|
minTickSize: [1, "hour"],
|
||
|
|
min: (new Date(1999, 11, 31)).getTime(),
|
||
|
|
max: (new Date(2000, 0, 1)).getTime(),
|
||
|
|
twelveHourClock: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add the Flot version string to the footer
|
||
|
|
|
||
|
|
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="header">
|
||
|
|
<h2>Time Axes</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="content">
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<div id="placeholder" class="demo-placeholder"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Monthly mean atmospheric CO<sub>2</sub> in PPM at Mauna Loa, Hawaii (source: <a href="http://www.esrl.noaa.gov/gmd/ccgg/trends/">NOAA/ESRL</a>).</p>
|
||
|
|
|
||
|
|
<p>If you tell Flot that an axis represents time, the data will be interpreted as timestamps and the ticks adjusted and formatted accordingly.</p>
|
||
|
|
|
||
|
|
<p>Zoom to: <button id="whole">Whole period</button>
|
||
|
|
<button id="nineties">1990-2000</button>
|
||
|
|
<button id="latenineties">1996-2000</button></p>
|
||
|
|
|
||
|
|
<p>Zoom to: <button id="ninetyninequarters">1999 by quarter</button>
|
||
|
|
<button id="ninetynine">1999 by month</button>
|
||
|
|
<button id="lastweekninetynine">Last week of 1999</button>
|
||
|
|
<button id="lastdayninetynine">Dec. 31, 1999</button></p>
|
||
|
|
|
||
|
|
<p>The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 1000!).</p>
|
||
|
|
|
||
|
|
<p>As an extra caveat, the timestamps are interpreted according to UTC and, by default, displayed as such. You can set the axis "timezone" option to "browser" to display the timestamps in the user's timezone, or, if you use timezoneJS, you can specify a time zone.</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="footer">
|
||
|
|
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|