SELECT UNIX_TIMESTAMP(datetime_column) as unix_timestamp FROM table ORDER BY datetime_column DESC.
$query = "SELECT * FROM (SELECT * FROM outside ORDER BY id DESC LIMIT $limit) AS foo ORDER BY id ASC"; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { $dataset1[] = array(($row['unixtime'] * 1000 ),$row['temperature']); }
It's really simple. First you make a PHP thing to serve the data:
<?php // this is get_data.php $time = $_GET['time']; $dataset1 = magic_function_to_fetch_outdoors_data_from_db($time); $dataset2 = magic_function_to_fetch_inoors_data_from_db($time); $data = array( "dataset1" => $dataset1, "dataset2" => $dataset2 ); echo json_encode($data); ?>
Then you modify your HTML links like so:
<ul id="period"> <li><a href="get_data.php?time=1h">1 hour</a></li> <li><a href="get_data.php?time=2h">2 hour</a></li> <li><a href="get_data.php?time=6h">6 hour</a></li> </ul>
Then you have some JS that looks something like this:
var $chart = $("#placeholder"), options = { lines: { show: true }, points: { show: false } // etc. }; function plotChart(data) { $.plot($chart, [ { data: data.dataset2, color: "#DE1B55", label: "Indoors" }, { data: data.dataset1, color: "#5F2BCF", label: "Outdoors" } ], options); } $("#period").on("click", "a", function () { var $link = $(this); $link.addClass("working"); $.ajax({ url: this.href, type: "GET", dataType: "json" }).done(function (data) { plotChart(data); }).fail(function () { alert("O noes!"); }).always(function () { $link.removeClass("working"); }); return false; // stops the browser from trying to follow the link });
And that's basically it.