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.
|
