Recharger les données cartographiques via JSON avec Highcharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de recharger les données pour un graphique Highcharts via JSON basé sur un bouton, cliquez ailleurs dans la page. Dans un premier temps, je voudrais afficher un ensemble par défaut des données (dépenses par catégorie) mais charger de nouvelles données basées sur les entrées utilisateur (dépenses par mois, par exemple). La meilleure façon que je peux penser à la sortie JSON du serveur est en passant une requête GET à la page PHP, par exemple $. Get ( « / pâte / includes / live-chart.php? Mode = mois » , récupérer cette valeur de l'attribut ID du bouton.
Voici ce que j'ai à ce jour pour récupérer les données par défaut (dépenses par catégorie). Il faut trouver comment charger des données complètement différentes dans le diagramme circulaire, en fonction des commentaires des utilisateurs, 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
EDIT
Voici les mises à jour grâce à Javascript Robodude. John, tu me as sur la bonne voie - merci! Je suis maintenant se retrouver avec la façon de remplacer les données sur le graphique de la requête AJAX. Je dois admettre que le code suivant la .get de $ () est le plus susceptible de code exemple, je ne comprends pas bien ce qui se passe lorsqu'il est exécuté - peut-être il y a une meilleure façon de formater les données?
Je suis en mesure de faire des progrès en ce que le tableau se charge maintenant de nouvelles données mais il est ajouté au-dessus de ce qui est déjà là. Je soupçonne que le coupable est cette ligne:
options.series[0].data.push(data);
I essayé options.series [0] .setData (données); mais rien ne se passe. Sur le côté positif, la demande AJAX fonctionne parfaitement basée sur la valeur du menu de sélection et il n'y a pas d'erreur Javascript. Voici le code en question, sans options de tableau:
$.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 Ceci est le format que le tableau tire de -., Nom de la catégorie et la valeur très simple 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
La solution
EDIT: La réponse en 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 puisque je n'ai pas mes fichiers ici avec moi, mais l'idée de base est que chaque fois que l'utilisateur sélectionne de nouvelles options pour les choses qu'ils veulent voir, vous allez avoir remplacer. données série objet avec les nouvelles informations de votre serveur, puis recréer le graphique à l'aide du nouveau Highcharts.Chart ();.
Hope this helps! John
EDIT:
Check this out, son de quelque chose que 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'avais une table avec des informations dans les première et dernière tds que je devais ajouter au camembert. Je boucle à travers chacune des rangées et poussée dans les valeurs. Note:. J'utilise chartoptions.series [0] .data depuis camemberts ont seulement 1 série
Autres conseils
Les autres réponses ne fonctionnent pas pour moi. J'ai trouvé la réponse dans la 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] );
});
Vous devez effacer l'ancien tableau avant de pousser les nouvelles données Il y a plusieurs façons d'y parvenir, mais j'utilisé celui-ci.
options.series[0].data.length = 0;
Alors 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);
});
lorsque le bouton est cliqué les anciennes données sont purgés et seules les nouvelles données devrait apparaître. Hope qui aide.
En fait, peut-être vous devriez choisir la fonction update est mieux.
Voici le document de la fonction update http://api.highcharts.com/highcharts#Series.update
Vous pouvez taper le code comme ci-dessous:
chart.series[0].update({data: [1,2,3,4,5]})
Ce code fusionner l'option d'origine, et mettre à jour les données modifiées.
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 « données ».
data = {};
Si vous sont avec poussée pour pousser les données vers les option.series dynamiquement .. il suffit d'utiliser
options.series = [];
pour l'effacer.
options.series = [];
$("#change").click(function(){
}
Vous pouvez toujours charger des données JSON
i ici défini comme espace de nom graphique
$.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);
});
data = [150,300]; // data from ajax or any other way
chart.series[0].setData(data, true);
Le setData appellera redessiner méthode.
Référence: http://api.highcharts.com/highcharts/Series.setData
