web-dev-qa-db-fra.com

Recharger les données du graphique via JSON avec Highcharts

J'essaie de recharger les données d'un graphique Highcharts via JSON basé sur un clic de bouton ailleurs dans la page. Au départ, j'aimerais afficher un ensemble de données par défaut (dépenses par catégorie), puis charger de nouvelles données en fonction des entrées de l'utilisateur (dépenses par mois, par exemple). Le moyen le plus simple de sortir le fichier JSON du serveur est de transmettre une requête GET à la page PHP, par exemple, $. Get ('/ dough/includes/live-chart.php? mode = month ', en récupérant cette valeur à partir de l'attribut ID du bouton.

Voici ce que j'ai jusqu'à présent pour récupérer les données par défaut (dépenses par catégorie). Besoin de trouver comment charger des données complètement différentes dans le graphique à secteurs, en fonction des entrées de l'utilisateur, à la demande:

$(document).ready(function() {
            //This is an example of how I would retrieve the value for the button
            $(".clickMe").click(function() {
                var clickID = $(this).attr("id");
            });
            var options = {
                chart: {
                    renderTo: 'graph-container',
                    margin: [10, 175, 40, 40]
                },
                title: {
                    text: 'Spending by Category'
                },
                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: $'+ this.y;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            formatter: function() {
                                if (this.y > 5) return '$' + this.y;
                            },
                            color: 'white',
                            style: {
                                font: '13px Trebuchet MS, Verdana, sans-serif'
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    style: {
                        left: 'auto',
                        bottom: 'auto',
                        right: '50px',
                        top: '100px'
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Spending',
                    data: []
                }]
            };
            $.get('/dough/includes/live-chart.php', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                var data = {};
                $.each(items, function(itemNo, item) {
                    if (itemNo === 0) {
                        data.name = item;
                    } else {
                        data.y = parseFloat(item);
                    }
                });
                options.series[0].data.Push(data);
            });
            // Create the chart
            var chart = new Highcharts.Chart(options);
        });
        });

Toute aide serait grandement appréciée

EDIT

Voici le Javascript mis à jour grâce à Robodude. John, vous m'avez sur la bonne voie ici - merci! Je commence maintenant à me demander comment remplacer les données du graphique à partir de la demande AJAX. Je dois admettre que le code suivant le code $ .get () provient probablement de l'exemple de code, je ne comprends pas tout à fait ce qui se passe quand il est exécuté - peut-être qu'il existe un meilleur moyen de formater les données?

J'ai pu faire quelques progrès en ce que le graphique charge maintenant de nouvelles données, mais il s'ajoute à ce qui existe déjà. Je soupçonne que le coupable est cette ligne:

options.series[0].data.Push(data);

J'ai essayé options.series [0] .setData (data); mais rien ne se passe. Du côté positif, la requête AJAX fonctionne parfaitement en fonction de la valeur du menu de sélection et il n’ya pas d’erreur Javascript. Voici le code en question, sans options de graphique:

$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                var data = {};
                $.each(items, function(itemNo, item) {
                    if (itemNo === 0) {
                        data.name = item;
                    } else {
                        data.y = parseFloat(item);
                    }
                });
                options.series[0].data.Push(data);
            });
            // Create the chart
            var chart = new Highcharts.Chart(options);
        });
        $("#loadChart").click(function() {
            var loadChartData = $("#chartCat").val();
                $.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                    var data = {};
                    $.each(items, function(itemNo, item) {
                        if (itemNo === 0) {
                            data.name = item;
                        } else {
                            data.y = parseFloat(item);
                        }
                    });
                    options.series[0].data.Push(data);
                });
                // Create the chart
                var chart = new Highcharts.Chart(options);
            });
        });
    });

EDIT 2 Il s’agit du format utilisé par le graphique - très simple, nom de la catégorie et valeur avec\n les uns après les autres.

Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27
jqueryjsonhighcharts
44
NightMICU

EDIT: La réponse ci-dessous est plus correcte!

https://stackoverflow.com/a/8408466/387285

http://www.highcharts.com/ref/#series-object

HTML:

<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>

<div id="container" style="height: 400px"></div>

Javascript:

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline'
    },
    series: []
};

$("#change").click(function() {
    if ($("#list").val() == "A") {
        options.series = [{name: 'A', data: [1,2,3,2,1]}]
        // $.get('/dough/includes/live-chart.php?mode=month'
    } else {
        options.series = [{name: 'B', data: [3,2,1,2,3]}]
        // $.get('/dough/includes/live-chart.php?mode=newmode'
    } 

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

Ceci est un exemple très simple, car je n'ai pas mes fichiers ici, mais l'idée de base est que chaque fois que l'utilisateur sélectionne de nouvelles options pour le contenu qu'il souhaite voir, vous allez avoir à remplacer l'objet de données .series. avec les nouvelles informations de votre serveur, puis recréez le graphique en utilisant le nouveau Highcharts.Chart () ;.

J'espère que cela t'aides! John

MODIFIER:

Regardez ceci, c'est quelque chose sur lequel j'ai travaillé dans le passé:

$("table#tblGeneralInfo2 > tbody > tr").each(function (index) {
    if (index != 0) {
        var chartnumbervalue = parseInt($(this).find("td:last").text());
        var charttextvalue = $(this).find("td:first").text();
        chartoptions.series[0].data.Push([charttextvalue, chartnumbervalue]);
    }
});

J'ai eu une table avec des informations dans le premier et le dernier tds que je devais ajouter au diagramme à secteurs. Je passe en boucle dans chacune des lignes et insère les valeurs. Remarque: J'utilise chartoptions.series [0] .data car les graphiques à secteurs ne comportent qu'une série.

20
RoboKozo

Les autres réponses n'ont pas fonctionné pour moi. J'ai trouvé la réponse dans leur documentation:

http://api.highcharts.com/highcharts#Series

En utilisant cette méthode ( voir exemple JSFiddle ):

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

// the button action
$('#button').click(function() {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
103
jspooner

Vous devez effacer l'ancien tableau avant d'insérer les nouvelles données. Il y a plusieurs façons de le faire, mais j'ai utilisé celui-ci:

options.series[0].data.length = 0;

Donc, votre code devrait ressembler à ceci:

options.series[0].data.length = 0;
$.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                    var data = {};
                    $.each(items, function(itemNo, item) {
                        if (itemNo === 0) {
                            data.name = item;
                        } else {
                            data.y = parseFloat(item);
                        }
                    });
                    options.series[0].data.Push(data);
                });

Désormais, lorsque le bouton est cliqué, les anciennes données sont purgées et seules les nouvelles données doivent apparaître. J'espère que ça t'as aidé.

4
mcoffey

En fait, vous devriez peut-être choisir la fonction update qui est meilleure.
Voici le document de fonction updatehttp://api.highcharts.com/highcharts#Series.update

Vous pouvez simplement taper le code comme ci-dessous:

chart.series[0].update({data: [1,2,3,4,5]})

Ce code fusionnera l'option Origine et mettra à jour les données modifiées.

4
Abruzzi

La réponse correcte est:

$.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                    var data = {};
                    $.each(items, function(itemNo, item) {
                        if (itemNo === 0) {
                            data.name = item;
                        } else {
                            data.y = parseFloat(item);
                        }
                    });
                    options.series[0].data.Push(data);
                    data = {};
                });

Vous devez vider le tableau 'data'.

data = {};
2
Dipanjan

Vous pouvez toujours charger une donnée JSON

ici, j'ai défini le graphique comme espace de noms

 $.getJSON('data.json', function(data){
                Chart.options.series[0].data = data[0].data;
                Chart.options.series[1].data = data[1].data;
                Chart.options.series[2].data = data[2].data;

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

            });
1
Maanas Royy

Si vous êtes utilisez Push to Envoyez les données à option.series dynamiquement .. utilisez simplement

options.series = [];

pour le nettoyer.

options.series = [];
$("#change").click(function(){
}
1
Jamsi

data = [150,300]; // data from ajax or any other way chart.series[0].setData(data, true);

Le setData appellera la méthode de redessinage.

Référence: http://api.highcharts.com/highcharts/Series.setData

0
Amrit Shrestha