Recharger graphique des données via JSON avec Highcharts

Je suis en train de recharger les données pour un Highcharts graphique via JSON basé sur un bouton, cliquez ailleurs dans la page. D'abord, je voudrais afficher un ensemble par défaut de données (les dépenses par catégorie), mais ensuite charger de nouvelles données de base sur la saisie de l'utilisateur (les dépenses par mois, par exemple). La meilleure façon que je peux penser à la sortie du JSON à partir du serveur est en passant d'une requête GET à la page PHP, par exemple $.get('/pâte/includes/live-graphique.le php?mode=mois", la récupération de cette valeur à partir du bouton d'attribut ID de la.

Voici ce que j'ai jusqu'à présent pour récupérer les données par défaut (les dépenses par catégorie). Besoin de trouver comment charger complètement différentes données dans le graphique, basée sur la saisie de l'utilisateur, sur 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

MODIFIER

Voici la mise à jour du Javascript grâce à Robodude. Jean, vous m'avez sur la bonne voie ici - merci! Je suis maintenant coincé avec la façon de remplacer les données sur le graphique à partir de la requête AJAX. Je dois avouer que le code qui suit l' $.get() est le plus probable à partir de l'exemple de code, je ne suis pas entièrement comprendre ce qui se passe quand il est run - peut-être il ya une meilleure façon de mettre en forme les données?

J'ai été en mesure de réaliser des progrès en ce que le graphique se charge désormais de nouvelles données, mais il est ajouté au-dessus de ce qui existe déjà. Je soupçonne que le coupable est cette ligne:

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

J'ai essayé les options.série[0].setData(données); mais rien ne se passe. Sur le côté positif, la requête AJAX fonctionne parfaitement basé sur la valeur de l'sélectionnez menu et il n'y a pas des erreurs Javascript. Voici le code en question, sans 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
C'est le format que la carte est tire de très simple, nom de la catégorie et de la valeur avec \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