PHP JSON Highcharts load database result

Question

I'm stuck!

I need to create highchart with json result. I found some sources here but can't put this to work.

The closest I can get was doing this:

Chart options:

var options = {
    chart: {
        renderTo: 'tudo',
        defaultSeriesType: 'column',
        rightMargin: 80
    },

    title: {
        text: 'Weekdays'
    },
    subtitle: {
        text: 'Source: somewhere in a calendar'
    },

     xAxis: {
        labels: {
            enabled: false
    }
    },

    yAxis: [
        {
            min: 0,
            title: {
                text: 'Amount'
             }
        },
        {
            linkedTo: 0,
            opposite: true
        }
    ],

    series: []
};

ajax call:

$.getJSON('ajax/calc.ajax.php', function(data) {

        var series = [];

        $.each(data, function(key, value) {

            series.name = key;
            series.data = value;

            options.series.push(name);
        });

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

highchart loads ok, and fills the series with Series 1, Series 2 ....

but no graphic is made, he keeps blank. ( something like this: Demo).

wanna know if I'm missing something or everything.

Thanks

update: i change the sql, now i'm working with 2 fields, and with this, the grafic work perfect, now i just want to know if doing like this its ok.

header('Content-Type: application/json');

        while(!$res->EOF){

            //$json = array("group" => "Web", "action" => "list");
            $json[$res->fields["DESMAR"]] = array(intval($res->fields["QTD"]));
            //$json["users"] = array(array("name" => "JulioGreff", "status" => "online"));
            $res->MoveNext();
        }

        echo json_encode($json);

dont know if is this what u want, but returns [object Object] — Ricardo Binns
– Ricardo Binns, Commented Oct 18, 2011 at 17:43
json by firebug = {"nome":"TRANSFORMADOR 250VA 0-230-380V \/ 0,24V-0-48V","modelo":"TRANSFORMADOR","marca":"SEIT","valor":"318.87|542.08","qtdade":"0"} — Ricardo Binns
– Ricardo Binns, Commented Oct 18, 2011 at 17:44
edit some values: {"nome":"TRANSFORMADOR 250VA 0-230-380V \/ 0,24V-0-48V","valor":"318.87|542.08","qtdade":"0"} , this is the correct return — Ricardo Binns
– Ricardo Binns, Commented Oct 18, 2011 at 17:49

Bhesh Gurung · Accepted Answer · 2011-10-19 17:15:44Z

5

In your ajax call -

$.getJSON('ajax/calc.ajax.php', function(data) {
    var series = []; // <---------------------- must be object not array
    $.each(data, function(key, value) {
        series.name = key;
        series.data = value;
        options.series.push(name); // <-------- it should be series not name
    });
    var chart = new Highcharts.Chart(options);  
});

So, it would be as follows -

$.getJSON('ajax/calc.ajax.php', function(data) {        
    $.each(data, function(key, value) {
        var series = {}; // <-------------------- moved and changed to object
        series.name = key;
        series.data = value;
        options.series.push(series); // <-------- pushing series object
    });
    var chart = new Highcharts.Chart(options);  
});

Also, considering the JSON you are receiving -

{"nome":"TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V","modelo":"TRANSFORMADOR","marca":"SEIT","valor":"318.87|542.08","qtdade":"0"??}

what you are doing in the $.each -

series.data = value;

does not make sense.

series.data is an array. So, it could look like either as follows -

[y1, y2, y3, ....] // array of numbers (which are y values)

or as follows -

[[x1, y1], [x2, y2], [x3, y3], ....] // array of arrays of pair of numbers (x and y values)

or as follows -

// array of objects which can have x and y values as properties
[{                       
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

So, make sure that your PHP code produces a JSON that matches an array of one of the above, then series.data = value inside your $.each will work.

Update: Sorry, I do Java and have never done PHP so can't help you much with PHP. But, can you try with the following as your PHP, just to see if the chart shows up?

header('Content-Type: application/json');
$return_data = array(
    array(array(10, 20), array(20, 30), array(56, 30), array(50, 20)),
    array(array(10, 0), array(20, 10), array(56, 100), array(50, 40))
);
echo json_encode($return_data);

Update: To render pie while keeping the same PHP.

$.getJSON('ajax/calc.ajax.php', function(data) {        
    var series = { // <-------------------- create just one series object
        type: 'pie',
        data: [] //data array for new series
    }; 
    $.each(data, function(key, value) {
        series.data.push([key, value[0]]);            
    });
    options.series.push(series); // <-------- pushing series object
    var chart = new Highcharts.Chart(options);  
});

This should draw pie chart.

edited Oct 19, 2011 at 17:15

answered Oct 18, 2011 at 22:40

Bhesh Gurung

51.1k23 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Ricardo Binns Over a year ago

just a note, i dont know if php side its right to, will modify the question ( php part ) to show only the necessary.

Ricardo Binns Over a year ago

can u show me a example in php how to do it ? series are working.

Ricardo Binns Over a year ago

i'm trying something here, and i change the php to this, and the yAxis appears, but i did not understand the process: $return_data = array('valor' => '15');

Ricardo Binns Over a year ago

yes, meanwhile i did something here, and work, will update the main question , take a look and tell me if its good or not! :) - edit: check the update

Bhesh Gurung Over a year ago

@ric_bfa: Can you show the final json produced by your new PHP?

|

NT3RP · Accepted Answer · 2011-10-19 13:15:44Z

It looks like the problem lies in your PHP code. Highcharts expects a series to follow a particular format. In your case, things work out (partly) because name is one of the field it is looking for. The data, however, needs to be in one of three formats:

An array of y values (e.g. [0, 1, 2])
An array of arrays (x, y values; e.g. [[0,0], [1,1], [2,2]])
An array of objects meeting using point properties

You would want the last format, I think. For example:

var series = [];
series.name = "series1";
series.data = {y: 10}; //very minimalistic example of the object format
options.series.push(name);

To get your code to work, you might need to change the inside of your $.each function to something like this:

$.each(data, function(key, value) {
    series.name = key;

    series.data = {
        y: value.property_you_are_interested_in
    };

    options.series.push(name);
});

...of course, if you wanted to use one of the other forms, it would be pretty easy as well:

//First form (array of y values)
var series = {};
series.data = [];
$.each(data, function(key, value) {
    series.name = key;
    series.data.push(value.property_you_are_interested_in);
});
options.series.push(series);

//Second form (array of x, y values)
var series = {};
series.data = [];
$.each(data, function(key, value) {
    series.name = key;
    series.data.push([value.X_property_you_are_interested_in, value.Y_property_you_are_interested_in]);
});
options.series.push(series);

note: i'm showing only one db result, but the correct is return more then one line

Collectives™ on Stack Overflow

PHP JSON Highcharts load database result

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related