Coder Forum

JavaScript Code

<?php
echo '<script id="source">
$(function () {
    var d = [';
 
		$result=mysql_query("SELECT * FROM tabelle WHERE user=$userid ORDER BY datum ASC");
 
		while($row=mysql_fetch_array($result))
			{
			$timestamp = strtotime(''.$row[datum].'');
 
			echo '[';
			echo $timestamp;
			echo ',';
			echo $row[wert];
			echo '],';
			}
 
	echo '];';
 
 
	echo '
    for (var i = 0; i < d.length; ++i)
      d[i][0] += 60 * 60 * 1000;
 
    function weekendAreas(axes) {
        var markings = [];
        var d = new Date(axes.xaxis.min);
        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
        d.setUTCSeconds(0);
        d.setUTCMinutes(0);
        d.setUTCHours(0);
        var i = d.getTime();
        do {
            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" },
        selection: { mode: "x" },
        grid: { markings: weekendAreas }
    };
 
    var plot = $.plot($("#placeholder"), [{ data: d, label: "Gewicht", color: "green", lineWidth: 12}], [d], options);
 
    var overview = $.plot($("#overview"), [d], {
        series: {
            lines: { show: true, lineWidth: 1 , fill: true},
            shadowSize: 0
        },
        xaxis: { ticks: [], mode: "time" },
        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
        selection: { mode: "x" }
    });
 
 
    $("#placeholder").bind("plotselected", function (event, ranges) {
        plot = $.plot($("#placeholder"), [d],
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));
 
        overview.setSelection(ranges, true);
    });
 
    $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });
});
</script>';

JavaScript Code

// first correct the timestamps - they are recorded as the daily
27	    // midnights in UTC+0100, but Flot always displays dates in UTC
28	    // so we have to add one hour to hit the midnights in the plot
29	    for (var i = 0; i < d.length; ++i)
30	      d[i][0] += 60 * 60 * 1000;
31	 
32	    // helper for returning the weekends in a period
33	    function weekendAreas(axes) {
34	        var markings = [];
35	        var d = new Date(axes.xaxis.min);
36	        // go to the first Saturday
37	        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
38	        d.setUTCSeconds(0);
39	        d.setUTCMinutes(0);
40	        d.setUTCHours(0);
41	        var i = d.getTime();
42	        do {
43	            // when we don't set yaxis, the rectangle automatically
44	            // extends to infinity upwards and downwards
45	            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
46	            i += 7 * 24 * 60 * 60 * 1000;
47	        } while (i < axes.xaxis.max);
48	 
49	        return markings;
50	    }

PHP Quellcode

echo '<script id="source">
$(function () {
 
var data = [';
 
$result=mysql_query("SELECT * FROM tabelle WHERE user=$userid ORDER BY datum DESC LIMIT 5");
 
		while($row=mysql_fetch_array($result))
			{
			$timestamp = strtotime($row[datum]);
 
			echo '[';
			echo $timestamp;
			echo ',';
			echo $row[wert];
			echo '],';
			}
 
	echo '];';
 
echo '
	$.plot($("#placeholder"), [data], {
  xaxis: {
    mode: "time",
    timeformat: "%d.%m.%y"
  }
});
});
</script>';