Highcharts not rendering data points

Question

I'm pulling some data from a database that I'm trying to render into a Highcharts stock chart. The data is pulled from the database with PHP and passed to the chart with a $.get(..php/line-data.php) call, and the data retrieved is supposed to be the data that is rendered on the chart.

The data is being returned in the following manner, and I have verified this by logging data in the console. It appears as such, with the first value being the UNIX-to-Javascript converted date/time (x-axis), and the second being the value (y-axis):

[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]

As an experiment, I tried just plugging this data straight into a basic demo Fiddle, and it seems to render fine.

FIDDLE HERE.

So what am I doing incorrectly? Everything seems to be set up correctly, but it's not rendering. This is what I see:

enter image description here

Here are the relevant portions of my code. Yes, I know that mysql_* is deprecated...I'll change it.

$.get('../php/line-data.php', function(data) {
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'total_mentions',
            margin: [20, 10, 10, 10],
            spacingTop: 0,
            spacingBottom: 1,
            spacingLeft: 0,
            spacingRight: 0
        },

        series : [{
            name : 'Total Mentions',
            data: data,
            type:'line',
            lineWidth:1,
            shadow:false,
            states: {
                hover: {
                    lineWidth:1
                }
            },
            id : 'dataseries',
            tooltip : {
                valueDecimals: 4,
                borderColor:'#DA7925',
                borderRadius: 0,
                borderWidth: 1,
                shadow: false
            },
            color:'#DA7925',
            fillOpacity:0.2
        }]
[more options...etc.]

No problems with this code. It's pulling the correct data and echoing how I expect it to.

<?php

    $expAddress = "URL";
    $expUser = "USERNAME";
    $expPwd = "PASSWORD";
    $database = "DB";
    $db = mysql_connect($expAddress, $expUser, $expPwd);
    mysql_select_db($database, $db);

    $ok = mysql_query("
                        SELECT 
                            DATE(created_at) AS create_date,
                            COUNT(id) AS total
                        FROM
                            tweets
                        WHERE 
                            subject LIKE 'word1'
                        OR  
                            subject LIKE 'word2'
                        GROUP BY 
                            DATE(created_at)");

    if (!$ok) {
        echo "<li>Mysql Error: ".mysql_error()."</li>";
    }
    else {
        while($row = mysql_fetch_assoc($ok)){           
            extract($row);
            $date = strtotime($create_date);
            $date *= 1000;
            $data[] = "[$date, $total]";
        }
        $tmp = join($data,',');
        echo "[".$tmp."]";
    }

?>

Jugal Thakkar · Accepted Answer · 2013-04-22T19:25:38.737

Have you tried parsing your data (string) into a javascript object before setting it to the series[i].data?

series : [{          
            data: JSON.parse(data)
        }]

What you are getting from php through $.get is basically string and NOT a javascript array of array of numbers, which is what you want. It may look like that, but it is as simple as "5"!=5, but parseInt("5")==5 same is the case with json objects, you need to parse the string into such an object before javascript or highcharts can interpret it correctly, highcharts could do it on your behalf, but it is not designed that way.

Try his fiddle to get an idea of the data types in picture

var data="[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]"
console.log(typeof data);    //string
var parsedData=JSON.parse(data);
console.log(typeof parsedData);    //object
console.log(typeof parsedData[0]);    //object [1362639600000, 8]
console.log(typeof parsedData[0][0]);    //number 1362639600000

When you paste the console value directly in the fiddle, you are actually pasting it as a valid javascript array, try using your console value wrapped by " quotes " and see that the exact issue is reproduced!!

Demo @ jsFiddle

An alternate approach could be using the $.getJSON() method instead. jQuery does the parsing for you before it calls your callback method

That fixed it! I don't know why I never considered that it would be coming in as a string. Originally, my code was using $.getJSON(), but I ended up formatting my PHP differently (incorrectly?) to send the data as JSON. Since $.getJSON() is probably a better way to do it, is there a simple fix for my current PHP code so that I can just pass it 'data'? — Jon, Apr 22 '13 at 19:28
@Jon, I would recommend using `json_encode` as Nils had already suggested, but didn't mention in the answer as that was not the problem, you json string was valid. Your currently php implementation may just work as is with `$.getJSON` Have a look at this http://stackoverflow.com/questions/12520865/convert-mysql-resultset-into-a-name-data-object-to-be-fed-into-highcharts/12525219#12525219 — Jugal Thakkar, Apr 22 '13 at 20:13
Many thanks! I'll try that out, and check out your other answer. Cheers! — Jon, Apr 22 '13 at 20:32

score -1 · Answer 2 · answered Apr 20 '13 at 07:59

Your problem is in either the output from the PHP script or when you receive the data in your Javascript (quite obvious).

First, don't do JSON by hand use json_encode (http://php.net/manual/en/function.json-encode.php). It's easier and it will guarantee that strings will be escaped properly.

Secondly, inspect your data variable with a debugger. You could also post the exact content of the variable to the question.

But basically, as long as it is working in the fiddle and not in your program you have not yet reproduced the error in your code properly in the fiddle.

For instance, you could replace data in your callback with the data you have in your fiddle to see if the code runs.

Highcharts not rendering data points

2 Answers2