Question

I’m trying to create a chart using data from my database calling json, but its not showing the results in the chart.
Here’s my code so far:

$(document).ready(function() {
function requestData() {
$.ajax({
        url: 'data.php',
        datatype: 'json',
        success: function(data) {
        alert(data);
        chart.series[0].setData(data[0]);
        },
        cache: false
    });
}
var chart;
chart = new Highcharts.Chart({
    chart: {
            renderTo: 'container',
            type: 'line',
            events: {
               load: requestData
            }
            },
    xAxis: {
  },
  yAxis: {
     title: {
        text: 'Value'
     }
  },

series: [{
         name: 'Random data',
         data: []
            }]
});

});

And here’s my data.php code

$query = "SELECT tiempo,Fp1Ref 
        FROM GraficaEEG limit 10";
$data = mysqli_query($dbc, $query);
$i=0;
while($row = mysqli_fetch_array($data)) {
    $row['tiempo'] = (float) $row['tiempo'];
    $rows[$i]=array($row['tiempo'],(float)$row['Fp1Ref']); 
    $i++;
}
echo json_encode($rows);

The data i receive is this:

[[0,3001],[0.005,4937.22],[0.01,4130.55],[0.015,4213.15],[0.02,4010.61],[0.025,3914.34],[0.03,3785.33],[0.035,3666.13],[0.04,3555.25],[0.045,3447.77]]

So i think is the proper way to pass data for the chart, so i don’t quite get whats wrong, thank you in advance.

Answer 1

I think the problem is that when your requestData() function is fired the chart variable still isn’t fully built and doesn’t know it has the series property.
To fix this, instead of chart in your requestData() function, reference this (which means the chart object in that context).
I tried this out in jsfiddle here http://jsfiddle.net/elcabo/p2r6g/.
Also post the js code below.

$(function () {
    $(document).ready(function() {

        //Function bits
        function requestData(event) {
            var tiemposAlAzar = [[10,20],[20,50]];
            //The 'this' will refer to the chart when fired
            this.series[0].setData(tiemposAlAzar);
        };

        var chart;

        //Chart bits
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                events:{
                    load: requestData                           
                }
            },
            xAxis: {},
            yAxis: {
                title: {
                text: 'Value'
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
      });
    });
});​