dati del grafico ricarica tramite JSON con Highcharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto cercando di ricaricare i dati per un grafico Highcharts tramite JSON basato su un pulsante clicca altrove nella pagina. Inizialmente vorrei visualizzare un insieme predefinito di dati (spesa per categoria), ma poi caricare i nuovi dati in base all'input dell'utente (la spesa per mese, per esempio). Il modo più semplice che posso pensare per emettere il JSON dal server è passando una richiesta GET alla pagina PHP, ad esempio $. Get ( '/ pasta / include / live-chart.php? Mode = mese' , il recupero di questo valore dal attributo ID del pulsante.
Ecco quello che ho finora per recuperare i dati di default (la spesa per categoria). Hanno bisogno di trovare come caricare i dati completamente diversi nel grafico a torta, in base all'input dell'utente, su richiesta:
$(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);
});
});
Qualsiasi aiuto sarebbe molto apprezzato
Modifica
Ecco il codice JavaScript grazie aggiornati a Robodude. Giovanni, mi hai sulla strada giusta qui - grazie! Ora sto rimanere bloccati con il modo di sostituire i dati sul grafico dalla richiesta AJAX. Devo ammettere che il codice seguente il $ .get () è più probabile dal codice di esempio, non capisco appieno ciò che sta succedendo quando viene eseguito - forse c'è un modo migliore per formattare i dati?
Sono riuscito a fare qualche progresso che il grafico carica ora i nuovi dati, ma viene aggiunto in cima a ciò che già esiste. Ho il sospetto che il colpevole è questa linea:
options.series[0].data.push(data);
Ho cercato options.series [0] .setData (dati); ma non succede nulla. Sul lato positivo, le opere richiesta Ajax senza problemi in base al valore del menu di selezione e non ci sono errori Javascript. Ecco il codice in questione, sans Opzioni grafico:
$.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);
});
});
});
Modifica 2 Questo è il formato che il grafico sta tirando da -. Molto semplice, nome della categoria e il valore con \ n dopo ogni
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
Soluzione
EDIT: La risposta in basso è più corretto
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);
});
Questo è un esempio molto semplice dal momento che non ho i miei file qui con me, ma l'idea di base è che ogni volta che nuove opzioni per l'utente seleziona la roba che vogliono vedere, si sta andando ad avere sostituire il. oggetto serie di dati con le nuove informazioni dal server e quindi ricreare il grafico utilizzando il nuovo Highcharts.Chart ();.
Spero che questo aiuti! John
EDIT:
Check this out, la sua da qualcosa su cui ho lavorato in passato:
$("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]);
}
});
Ho avuto una tabella con le informazioni nel primo e ultimo TDS che avevo bisogno di aggiungere al grafico a torta. I ciclo attraverso ciascuna delle righe e spingere nei valori. Nota: Io uso chartoptions.series [0] .data dal grafici a torta hanno solo 1 serie
.Altri suggerimenti
Le altre risposte non ha funzionato per me. Ho trovato la risposta nella loro documentazione:
http://api.highcharts.com/highcharts#Series
Con questo metodo ( vedere JSFiddle esempio ):
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] );
});
È necessario cancellare la vecchia matrice fuori prima di spingere i nuovi dati in Ci sono molti modi per ottenere questo risultato, ma ho usato questo:.
options.series[0].data.length = 0;
Quindi, il codice dovrebbe essere simile a questo:
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);
});
Ora, quando il pulsante viene premuto i vecchi dati vengono eliminati e solo i nuovi dati dovrebbe comparire. Speranza che aiuta.
In realtà forse si dovrebbe scegliere la funzione update è meglio.
Ecco il documento della funzione update http://api.highcharts.com/highcharts#Series.update
Si può semplicemente digitare il codice come di seguito:
chart.series[0].update({data: [1,2,3,4,5]})
Questi codici si fonderà l'opzione origine e aggiornare i dati modificati.
risposta corretta è:
$.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 = {};
});
È necessario svuotare serie dei 'dati'.
data = {};
Se sono utilizzando spinta per spingere i dati ai option.series dinamicamente .. basta usare
options.series = [];
per cancellarlo.
options.series = [];
$("#change").click(function(){
}
È sempre possibile caricare un data json
qui ho definito grafico come spazio dei nomi
$.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);
Il setData chiamerà il metodo redraw.
Riferimento: http://api.highcharts.com/highcharts/Series.setData
