PHP JSON Highcharts résultat de base de données de charge

Question

Je suis bloqué!

Je dois créer highchart avec un résultat JSON. J'ai trouvé quelques sources ici mais ne peut pas mettre cela au travail.

Le plus proche que je peux obtenir FAISAIT ceci:

Options Graphique:

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

appel ajax:

$.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);  
});

charges highchart ok, et remplit la série avec Series 1, Series 2 ....

mais aucun graphique est fait, il garde en blanc. (Quelque chose comme ceci: Démo ).

veux savoir si je manque quelque chose ou tout.

Merci

Mise à jour:. Je change sql, maintenant je travaille avec 2 champs, et avec cela, le parfait travail Grafic, maintenant je veux juste savoir si faire comme ça son 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);

Answer 1

Dans appel ajax -

$.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);  
});

Alors, ce serait comme suit: -

$.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);  
});

En outre, compte tenu du JSON que vous recevez -

{ "nome": "TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V", "Modelo": "TRANSFORMADOR", "marca": "SEIT", "valeur": "318,87 | 542,08 », "qtdade": "0" ??}

ce que vous faites dans le $.each -

series.data = value;

n'a pas de sens.

series.data est un tableau. Ainsi, il pourrait ressembler à soit comme suit: -

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

ou comme suit: -

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

ou comme suit: -

// 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
}]

Alors, assurez-vous que votre code PHP produit un JSON qui correspond à un tableau de l'un des plus haut, puis series.data = value l'intérieur de votre $.each fonctionnera.

Mise à jour: Désolé, je ne Java et ne l'ai jamais fait PHP ne peut donc pas vous aider beaucoup avec PHP. Mais, pouvez-vous essayer avec comme votre PHP, juste pour voir si le graphique apparaît?

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);

Mise à jour:. Pour rendre la tarte tout en gardant le même 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);  
});

Ceci devrait dessiner diagramme circulaire.

Answer 2

Il semble que les mensonges de problème dans votre code PHP. Highcharts prévoit une série à suivre un format particulier . Dans votre cas, les choses fonctionnent (en partie) parce name est l'un des champs qu'il recherche. Les données, cependant, a besoin d'être dans l'un des trois formats:

• Un tableau de valeurs y (par exemple [0, 1, 2])
• un tableau de tableaux (valeurs x, y, par exemple [[0,0], [1,1], [2,2]])
• Un tableau d'objets en utilisant propriétés de point

Vous ne voudrait le dernier format, je pense. Par exemple:

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

Pour obtenir votre code au travail, vous devrez peut-être changer l'intérieur de votre fonction $.each à quelque chose comme ceci:

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

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

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

... bien sûr, si vous voulez utiliser l'une des autres formes, il serait assez facile ainsi:

//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);