Display graph in realtime with JQuery / AJAX / PHP

<!--?php define("DB_HOST", "XXXX"); define("DB_USER", "XXXX"); define("DB_PASS", "XXXX"); define("DB_NAME", "XXXX"); // Define the number of points you want to have in your graph define("MAX_RESULT", "500"); $GLOBALS['con_db'] = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME) or die(exit()); $GLOBALS['con_db']--->set_charset("utf8");
 
$result = $GLOBALS['con_db']-&gt;query("Select * FROM (SELECT id,date," . $_GET['type'] . " FROM historic ORDER BY id DESC LIMIT 0," . MAX_RESULT.") AS T ORDER BY id ASC") or die($GLOBALS['con_db']-&gt;error . __LINE__);
$GLOBALS['con_db']-&gt;close();
 
$html = '[[';
while (($row = $result-&gt;fetch_array(MYSQL_BOTH)) == TRUE) {
    $html.='["'.$row[1].'", '.$row[2].'],';
}
$html = substr($html, 0, strlen($html) - 1);
$html .= ']]';
 
header('Content-Type: application/json');
echo $html;
?&gt;

<!-- TO BE ADDED INTO THE HEAD SECTION -->RT Graphs<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><script src="jquery.jqplot.min.js" language="javascript"></script><script src="plugins/jqplot.canvasTextRenderer.min.js"></script><script src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script><script src="plugins/jqplot.dateAxisRenderer.min.js"></script><!-- TO BE ADDED INTO THE BODY SECTION --><script>// <![CDATA[
$(document).ready(function () {
        // Get the data through an AJAX process
        var ajaxDataRenderer = function (url) {
            var ret = null;
            $.ajax({
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };
 
        // The url for our json data
        var jsonurlT = "data.php?type=temperature";
 
        function graphT() {
            // Empty the container before adding a new graph
            $('#chartT').html('');
 
            // Get the data to be shown
            var ret = ajaxDataRenderer(jsonurlT);
            if (ret == null) {
                $('#chartT').html("
 
 
 
 
 
<div class='alert alert-danger text-center'>CHARTS ARE NOT AVAILABLE AT THIS TIME</div>
 
 
 
 
");
                return false;
            }
 
            // Draw the graph
            var plotT = $.jqplot('chartT', ret, {
                title: "Temperature variation",
                // Do not show points on the graph
                series: [{showMarker: false}],
                axesDefaults: {
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
                axes: {
                    xaxis: {
                        label: "Date",
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {formatString: '%X'},
                        // Begin at x=0
                        pad: 0
                    },
                    yaxis: {
                        label: "Temperature in °C",
                        // Scale
                        min: 15,
                        max: 50
                    }
                }
            });
        }
 
        // Show graph on page load
        graphT();
        // Refresh graph every 10seconds
        setInterval(graphT, 10000);
    })
    ;
// ]]></script>