CODEWITHSUNDEEP
phpajaxjsonhighcharts
Alex Hdz
Alex Hdz

Reputation: 35

Highcharts with JSON

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.

Upvotes: 1

Views: 3209

Answers (2)

Kliptu
Kliptu

Reputation: 199

This url may help you to create dynamic highchart that need to pull data from database.

In json.php code you can put your sql query and replace static array to dynamic array

http://www.kliptu.com/free-script/dynamic-highchart-example-with-jquery-php-json

The example also shows how to manage multiple series with json. And tooltips with all series data at mouse point.

You can modify example as per your script requirement.

Upvotes: 0

user1539426
user1539426

Reputation:

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: []
        }]
      });
    });
});​

Upvotes: 1

Related Questions