Need help with dynamic updating high chart

PHP
1

So I was able to export to json format, but not sure if the format is right for the chart.
but the chart is not showing… can someone help with this one

<html>
    <head>
        <title>Highcharts Live Test</title>
    </head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/highcharts.js"></script>
        <script>
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
           
            var chart;
            function requestData() {
                $.ajax({
                    // url: 'live-server-data.php',
                    url: 'https://mpimold.com/123/jsonexport.php',
                    success: function (point) {
                        var series = chart.series[0],
                            shift = series.data.length > 20;
                       
                        console.log(point);
                       
                        var timestamp = point[0];
                        var date = new Date(timestamp);
                        console.log(date);
                           
                        chart.series[0].addPoint(point, true, shift);
                       
                        setTimeout(requestData, 1000);
                    },
                    cache: false
                });
            }
           
            $(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'spline',
                        events: {
                            load: requestData
                        }
                    },
                    title: {
                        text: 'Live random data'
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150,
                        maxZoom: 20 * 1000
                    },
                    yAxis: {
                        minPadding: 0.2,
                        maxPadding: 0.2,
                        title: {
                            text: 'Value',
                            margin: 80
                        }
                    },
                    series: [{
                        name: 'Random data',
                        data: []
                    }]
                });
            });
        </script>
        <div id="container" style="width: 100%; height: 400px">
        </div>
    </body>
</html>

php

<?php
    //open connection to mysql db
    $connection = mysqli_connect("localhost","user","pass","dbname") or die("Error " . mysqli_error($connection));

    //fetch table rows from mysql db
    $sql = "select id, sensor1 from SensorData";
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));

    //create an array
    while($row =mysqli_fetch_assoc($result))
    {
        $emparray[]= array($row['id'], $row['sensor1']);
    }
    echo json_encode($emparray);
    //write to json file
    $fp = fopen('json.json', 'w');
    fwrite($fp, json_encode($emparray));
    fclose($fp);
    //close the db connection
    mysqli_close($connection);
?>
2

I may be showing my ignorance here, but in your PHP code, don’t you need to echo the JSON-encoded data rather than writing it into a file? Surely the file will be on the server, but the JavaScript cannot access it there. Or is “json.json” a special file that is another way of sending data back to the calling JS code?

3

Yeah the php code echo the json_encoded and additionally write it in to a file. There’s a echo command right above the writing file command.

4

Your chart renders for me, it just has no data.

Problem #1:
var timestamp = point[0];

This seems to be implying that the first data point in your data is actually a timestamp.
https://mpimold.com/123/jsonexport.php
This data set does not contain a timestamp element in the first point of the data.
var date = new Date(timestamp);
So your date object is telling the system “Invalid Date”, because you’re trying to stuff an object into the Date constructor.

That said, you don’t actually USE the date anywhere in your code. So… i’m not sure why you’ve got this in here in the first place.

Moving on.

Problem #2:
chart.series[0].addPoint(point, true, shift);
point is an array of all the datapoint objects. This is not a valid input to the addPoint function, which is expecting either a number, a string, a PointOptionsObject, or an Array containing numbers or strings. You’re giving it an Array of objects.

Problem #3:
Your xAxis is of type datetime. Your data feed does not provide a datetime for the points, so the system will have no idea where on the chart to put a point, even if it could understand your array of objects.

5

Sorry, you’re quite right, I didn’t notice that.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.