PHP: Get data from database to feed JQuery chart

Question

data.php is returning:

{name: 'orcamento', data: [14000.00,8500.00,0.00]},{name: 'real', data: [2038.00,120.00,15000.00]},{name: 'desvio', data: [-11962.00,-8380.00,15000.00]}

I want to use this data to feed a chart. If I type the following code, it works well:

$(document).ready(function(){
    var options={
        chart: {
            renderTo:'container',
            type: 'bar'
        },
        title: {
            text: 'Total Anual'
        },
        xAxis: {
            categories: ['Vendas', 'Serviços', 'Outras']
        },
        series: [{name: 'orcamento', data: [14000.00,8500.00,0.00]},{name: 'real', data: [2038.00,120.00,15000.00]},{name: 'desvio', data: [-11962.00,-8380.00,15000.00]}]
    };
});

But the following code doesn't work:

$(document).ready(function(){
    var options={
        chart: {
            renderTo:'container',
            type: 'bar'
        },
        title: {
            text: 'Total Anual'
        },
        xAxis: {
            categories: ['Vendas', 'Serviços', 'Outras']
        },
        series: [$.get('data.php')]
    };
});

Why?

EDIT: I also tried this without luck:

$(document).ready(function(){
    var dados=[];
    $.ajax({
        url:'data.php',
        success: function(response){
            dados=response
        }
    });

    var options={
        chart: {
            renderTo:'container',
            type: 'bar'
        },
        title: {
            text: 'Total Anual'
        },
        xAxis: {
            categories: ['Vendas', 'Serviços', 'Outras']
        },
        series: [dados] 
    };
});

EDIT2: Also tried the following but I get an empty chart:

$(document).ready(function(){
    var dados=[];

    $.ajax({
        url:'data.php',
        success: function(response){
            dados=response
        },
        async:false
    });

    var options={
        chart: {
            renderTo:'container',
            type: 'bar'
        },
        title: {
            text: 'Total Anual'
        },
        xAxis: {
            categories: ['Vendas', 'Serviços', 'Outras']
        },
        series: [dados] 
    };

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

In JSONLint, I get the error:

Parse error on line 1:
{    name: 'orcamento', 
-----^
Expecting 'STRING', '}'

First off, you need to return valid JSON. It looks like you need an array wrapper [] around your entire JSON structure. Second, you can load async result into a variable like you are attempting to do, you need to set options.series from within a success callback to $.get() — Mike Brant
– Mike Brant, Commented Mar 27, 2014 at 19:53
Thanks, I checked JSONLint, and I got: Parse error on line 1: { name: 'orcamento', -----^ Expecting 'STRING', '}' — user882670
– user882670, Commented Mar 27, 2014 at 20:07

gabrieloliveira · Accepted Answer · 2014-03-27 20:31:38Z

0

In your edit question, the dados var probably isn't set when you define options. Because ajax response is made asynchronous. Try editing like this:

$(document).ready(function(){
    var dados=[];
    var options = {};
    $.ajax({
        url:'data.php',
        success: function(response){
            dados=$.parseJSON(response); // EDITED
            options={
                chart: {
                    renderTo:'container',
                    type: 'bar'
                },
                title: {
                    text: 'Total Anual'
                },
                xAxis: {
                    categories: ['Vendas', 'Serviços', 'Outras']
                },
                series: [dados] 
            };
            var chart = new Highcharts.Chart(options);
        }
    });
});

In PHP JSON result, put [] like this:

[{name: 'orcamento', data: [14000.00,8500.00,0.00]},{name: 'real', data: [2038.00,120.00,15000.00]},{name: 'desvio', data: [-11962.00,-8380.00,15000.00]}]

edited Mar 27, 2014 at 20:31

answered Mar 27, 2014 at 19:51

gabrieloliveira

5703 silver badges10 bronze badges

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

6 Comments

user882670 Over a year ago

Thanks, I tried your proposal, I got Uncaught Highcharts error #13: It doesn't make sense.

gabrieloliveira Over a year ago

Where is the call for chart function? Check if this is call after ajax success too.

gabrieloliveira Over a year ago

See my answer edited. You can use async:false too like suggested, by I personaly prefer put inside jQuery ajax call.

user882670 Over a year ago

The data pulled from the server is: [{name: 'orcamento', data: [14000.00,8500.00,0.00]}, {name: 'real', data: [2038.00,120.00,15000.00]}, {name: 'desvio', data: [-11962.00,-8380.00,15000.00]}] . I get an error in JSONLint "Parse error on line 2: [ { name: 'orcamento', --------------^ Expecting 'STRING', '}'" and no chart.

user882670 Over a year ago

Also tried it, please see my new question, since it seems the problem is the JSON: stackoverflow.com/questions/22700048/…

|

Jordan · Accepted Answer · 2014-03-27 19:12:17Z

0

$.get('data.php') will ignore the return results. See https://api.jquery.com/jQuery.get/

You have to use a callback.

Cheers, J

answered Mar 27, 2014 at 19:12

Jordan

1819 bronze badges

2 Comments

mituw16 Over a year ago

Agreed, also make sure the output headers are set to application/json in data.php

user882670 Over a year ago

Thanks, I changed my script, but still I get nothing: var dados=[]; $.ajax({ url:'data.php', success: function(response){ dados=response } }); var options={ chart: { renderTo:'container', type: 'bar' }, title: { text: 'Total Anual' }, xAxis: { categories: ['Vendas', 'Serviços', 'Outras'] }, series: [dados] }; var chart = new Highcharts.Chart(options);

Collectives™ on Stack Overflow

PHP: Get data from database to feed JQuery chart

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related