J'essaie de recharger les données d'un graphique Highcharts via JSON en fonction d'un clic sur un bouton situé 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 de l'entrée de l'utilisateur (dépenses par mois, par exemple). Le moyen le plus simple auquel je pense pour sortir le JSON du serveur est de passer 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). J'ai besoin de trouver comment charger des données complètement différentes dans le graphique circulaire, 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.
EDITAR
Voici le Javascript mis à jour grâce à Robodude. John, vous m'avez mis sur la bonne voie - merci ! Je suis maintenant bloqué sur la façon de remplacer les données sur le graphique à partir de la requête AJAX. Je dois admettre que le code qui suit le $.get() est très probablement un exemple de code, je ne comprends pas bien ce qui se passe lorsqu'il est exécuté - peut-être y a-t-il une meilleure façon de formater les données ?
J'ai pu progresser dans la mesure où le graphique charge maintenant de nouvelles données, mais celles-ci sont ajoutées à celles qui sont déjà présentes. Je pense 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. En revanche, la requête AJAX fonctionne parfaitement en fonction de la valeur du menu de sélection et il n'y a pas d'erreur Javascript. Voici le code en question, sans les options du 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é pour le graphique - très simple, le nom de la catégorie et la valeur avec le nom de la catégorie. \n après chaque.
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
