Highcharts get data from database

javascript php jquery json highcharts

10,038

Solution 1

To answer my own question, I changed the while loop to:

while($row = mysqli_fetch_array($result)) {
    $value = $row['value'];
    $timestamp = strtotime($row['datetime']) * 1000;
    $data[] = [$timestamp, (int)$value];
}

Solution 2

The problem is that you return string, you need to return data as numbers. I recommend to familar with json_encode() flags, like JSON_NUMERIC_CHECK. Secondly $data[] = "[$value, $timestamp]"; line needs to be array not string with printed bracket.

10,038

Author by

Bagwell

Updated on July 31, 2022

Comments

Bagwell over 1 year

I'm trying to graph some data from my database on a Highchart, but I can't seem to get the data to show.

I have the following PHP (snippet) that gets the data from the database and json_encodes it:

<?php

    $result = mysqli_query($cxn,"SELECT * FROM counter");

    while($row = mysqli_fetch_array($result)) {
        $value = $row['value'];
        $timestamp = strtotime($row['datetime']);
        $data[] = "[$value, $timestamp]";
    }   

    json_encode($data);

?>

The json_encode prints the following (I'm using datetime):

["[500, 1384122794]","[600, 1384153203]"]

I then have the following to graph the data:

<html>
    <body>
        <div id="container" style="height: 500px; min-width: 500px"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script>
            $(function() {
                $.getJSON('http://www.website.com/graph.php', function(data) { // I put website.com on purpose
                    // Create the chart
                    $('#container').highcharts('StockChart', {
                        rangeSelector : {
                            selected : 1
                        },

                        title : {
                            text : 'Title'
                        },

                        series : [{
                            name : 'AAPL',
                            data : data,
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                    });
                });

            });
        </script>
    </body>
</html>

The problem is that the graph doesn't actually show the points, it's just a blank graph.

What am I doing wrong?

Skandix about 5 years

While this may does solve the problem, it's difficult to see why. Please consider editing your answer to include an explanation of what you changed, why you changed it, and why it solves the problem.