jquery - update - Recargar los datos del gráfico a través de JSON con Highcharts

highcharts update()

Question

Estoy tratando de volver a cargar los datos para un gráfico de Highcharts a través de JSON basado en un clic de botón en otro lugar de la página. Inicialmente me gustaría mostrar un conjunto predeterminado de datos (gasto por categoría) pero luego cargar nuevos datos basados ​​en la entrada del usuario (gasto por mes, por ejemplo). La manera más fácil que se me ocurre para enviar el JSON desde el servidor es pasando una solicitud GET a la página PHP, por ejemplo $ .get (''/ dough / includes / live-chart.php? Mode = month'' , recuperando esto valor del atributo de ID del botón.

Aquí está lo que tengo hasta ahora para recuperar los datos predeterminados (gasto por categoría). Necesita encontrar cómo cargar datos completamente diferentes en el gráfico circular, según la demanda del usuario, a pedido:

$(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);
});
});

Cualquier ayuda sería muy apreciada

EDITAR

Aquí está el Javascript actualizado gracias a Robodude. John, me tienes en el camino correcto aquí, ¡gracias! Ahora estoy atascado con cómo reemplazar los datos en el gráfico de la solicitud AJAX. Debo admitir que el código que sigue a $ .get () probablemente provenga del código de muestra, no entiendo completamente qué está sucediendo cuando se ejecuta; ¿quizás haya una forma mejor de formatear los datos?

Pude hacer algunos progresos en cuanto a que ahora el gráfico carga nuevos datos, pero se agrega a lo que ya está allí. Sospecho que el culpable es esta línea:

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

Probé options.series [0] .setData (data); pero nada pasa. En el lado positivo, la solicitud de AJAX funciona de manera impecable en función del valor del menú de selección y no hay errores de Javascript. Aquí está el código en cuestión, sin opciones de gráfico:

$.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);
});
});
});

EDITAR 2 Este es el formato del que está sacando el gráfico: muy simple, el nombre y el valor de la categoría con / n después de cada uno.

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

Answer 1

EDIT: ¡la respuesta abajo es más correcta!

https://.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);
});

Este es un ejemplo muy simple ya que no tengo mis archivos aquí, pero la idea básica es que cada vez que el usuario seleccione nuevas opciones para las cosas que quiere ver, tendrá que reemplazar el objeto de datos .series con la nueva información de su servidor y luego vuelva a crear el gráfico con el nuevo Highcharts.Chart () ;.

¡Espero que esto ayude! John

EDITAR:

Mira esto, es algo de lo que he trabajado en el pasado:

$("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]);
}
});

Tenía una tabla con información en el primer y último tds que necesitaba agregar al gráfico circular. Recorro cada una de las filas e introduzco los valores. Nota: utilizo chartoptions.series [0] .data ya que los gráficos circulares solo tienen 1 serie.

Answer 2

En realidad, tal vez deberías elegir la función de update es mejor.
Aquí está el documento de update de funciones http://api.highcharts.com/highcharts#Series.update

Puedes simplemente escribir el código como a continuación:

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

Este código fusionará la opción de origen y actualizará los datos modificados.

Answer 3

La respuesta correcta es:

$.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 = {};
});

Debe vaciar la matriz de ''datos''.

data = {};

Answer 4

Las otras respuestas no funcionaron para mí. Encontré la respuesta en su documentación:

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

Usando este método ( vea el ejemplo de 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] );
});

Answer 5

Necesita borrar la matriz anterior antes de insertar los datos nuevos. Hay muchas maneras de lograr esto, pero utilicé este:

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

Entonces su código debería verse así:

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);
});

Ahora, cuando se hace clic en el botón, se borran los datos antiguos y solo aparecen los nuevos datos. Espero que ayude.

Answer 6

Si está utilizando push para enviar los datos a la opción .series dinámicamente ... solo use

options.series = [];

para limpiarlo

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

Answer 7

Siempre puedes cargar datos JSON

aquí definí el gráfico como espacio de nombres

 $.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);
});

Answer 8

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

El setData llamará al método de redibujar.

Referencia: http://api.highcharts.com/highcharts/Series.setData