I am really stuck with my webpage that I would like to display gauges on, which update themselves with new data from a MySQL database. I have a couple of files to get it to work but it doesn't work. The first file is called data.php and it contains (sorry, comments in Dutch):

```
    <?php

    // Datum aanmaken om bovenaan de pagina te zetten
    date_default_timezone_set('Europe/Amsterdam');
    $vandaagtijd = date("d-m-Y, H:i");

    include_once "/externalpw/mysql_pw.php";
    $link = mysql_pconnect($MyHostname, $MyUsername, $MyPassword) or die("Error verbinden met DB: " . mysql_error());

    //Eerst de elektra en het gas selecteren in die database en dan daarmee aan de gang
    $db = mysql_select_db("elekgas", $link);
    if (!$db) {
            mysql_close($link);
            die("Error selecteren DB: " . mysql_error());
    }

    // Actuele waaarden op van huidig verbruik en meterstanden
    $result1 = mysql_query("SELECT gebr_laag_tarief AS glt, gebr_hoog_tarief AS ght, leve_laag_tarief AS llt, leve_hoog_tarief AS lht, huidig_verbruik AS hv, huidig_levering AS hl, gas FROM meetwaarden ORDER BY id DESC LIMIT 1");

    if (!$result1) {
            mysql_close($link);
            die("Error met query1: " . mysql_error());
    }
while ($row = mysql_fetch_assoc($result1)) {
        $data[] = $row;
}

?>

var jsonarray = <?php echo json_encode($data); ?>;

```

In the second file, my main file, I have this section to refresh the php output:

```
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$.post('index4.php'), function(data){
$(data.result).each(function(i, item){
$.append("<?= $" + item.key + " = " + item.value + "; ?>");
});
}, "jsonp");
});
</script>

```

My div to refresh contains basically nothing. I just want to return a new value for the gauges. The gauges themselves will use an interval function to update themselves. That gauge-code is below for clarity. What happens, however, it returns NaN (Not a Number). I have the feeling in need to imply some JSON\_encode here to get it all working but I have no clue as how to get it going.

In the data.php `echo JSON_encode($result1);` seems a good start but then how to get it out in the main file? Obviously, the load('data.php') is not the way to go here...

```
<canvas id="gauge2"
     width="200" height="200"
     data-type="canv-gauge"
     data-title="Vermogen"
     data-min-value="0"
     data-max-value="400"
     data-major-ticks="0 100 200 300 400"
     data-minor-ticks="5"
     data-stroke-ticks="true"
     data-units="kWh"
     data-value-format="3.2"
     data-glow="true"
     data-animation-delay= false
     data-animation-duration=
     data-animation-fn=
     data-colors-needle="#dd0000 #0000ff"
     data-highlights="0 100 #a9feff, 100 300 #bbffaa, 300 400 #ffffaa"
     data-onready="setInterval( function() { Gauge.Collection.get('gauge2').setValue(<?= $hl; ?>);}, 5000);">
    </canvas>

```

I do know these questions have come by multiple times but I am not really a star as it comes to AJAX and JSON. So all help is appreciated! Thanks.