Invalid dates in Highcharts with data loaded by JSON

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

If all else fails, you may have to convert the date to milliseconds. highcharts works best with dates in milliseconds format. — Linger, Jun 04 '12 at 19:45

score 0 · Accepted Answer · answered Jun 04 '12 at 20:15

0

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'])

answered Jun 04 '12 at 20:15

Peter Pajchl

2,699
21
24

Okay, now I have dates but the data points appear to be bunched up.. ideas? – NightMICU Jun 04 '12 at 20:35
I think the problem might be the fact that there are >70 entries. Not sure why this did not occur to me before, I have since decided against using dates but I suspect your answer would work with far less entries. The data is located at http://opheliadesign.com/speedtest - battling it out with my sub-par ISP lol – NightMICU Jun 06 '12 at 18:54

Invalid dates in Highcharts with data loaded by JSON

1 Answers1