Question

I cannot seem to get the xAxis in Highcharts to display the date from data loaded via JSON. Also, when I hover over a data point, the label says “Invalid date.”

Here is the PHP code used to generate the data:

function fetchLineChart() {
    $fetchData = $this->db->query("SELECT download, upload, date FROM speed_entries ORDER BY date DESC");

    while ($data = $fetchData->fetch()) {
        $date = date("Y, m, d", strtotime($data['date']));
        $downloadData[] = array('Date.UTC(' . $date . ')', (float)$data['download']);
        $uploadData[] = array('Date.UTC(' . $date . ')', (float)$data['upload']);
    }
    $result = array('download' => $downloadData, 'upload' => $uploadData);
    echo json_encode($result);
}

And here is the jQuery for the chart

$(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'lineChart',
                        type: 'line'
                    },
                    title: {
                        text: 'Download / Upload Results'
                    },
                    subtitle: {
                        text: 'Source: Speedtest.net'
                    },
                    yAxis: {
                            title: {
                                    text: 'Speed'
                            },
                            plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                            }]
                    },
                    xAxis: {
                        type: 'datetime'
                     },
                    series: [{
                        name: 'Download',
                        lineWidth: 2,
                        marker: {
                            radius: 2
                        },
                        data: []
                    }, {
                        name: 'Upload',
                        data: []
                    }]
                };

                $.getJSON('class.speed.php?mode=lineChart', null, function(json) {
                    var downloads = json.download;
                    var uploads = json.upload;

                    options.series[0].data = downloads;
                    options.series[1].data = uploads;

                    chart = new Highcharts.Chart(options);
                });
            });

Everything else works, the data lines are displayed correctly. Just cannot figure out how to make the date work.

Thanks

Answer 1

I might be wrong here but by setting xAxis to ‘datetime’, you are telling Highcharts they you will supply date in form of miliseconds (that is integer) but instead your are passing in a string. Why don’t you generate, as Linger already suggested, miliseconds directly in your php function?

$miliseconds = strtotime($data['date']) * 1000;
$downloadData[] = array($miliseconds, (float)$data['download'])