Datos de gráficos Reload vía JSON con Highcharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy intentando volver a cargar los datos para un gráfico Highcharts a través de JSON basado en un botón, haga clic en otra parte de la página. Inicialmente me gustaría mostrar un conjunto predeterminado de datos (que pasan por categoría), pero luego cargar nuevos datos en función de la entrada del usuario (el gasto por mes, por ejemplo). La forma más sencilla que puedo pensar para dar salida al JSON desde el servidor está pasando una solicitud GET a la página PHP, por ejemplo $. Get ( '/ masa / includes / live-chart.php? Mode = mes' , la recuperación de este valor del atributo ID del botón.
Esto es lo que tengo hasta ahora para recuperar los datos por defecto (el gasto por categoría). Necesidad de encontrar la forma de cargar completamente diferentes datos en el gráfico circular, en base a la entrada del usuario, a la carta:
$(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á la actualización de Javascript gracias a Robodude. John, que me tiene en el camino correcto aquí - gracias! Estoy ahora quedarse con la forma de sustituir los datos en el gráfico de la petición AJAX. Debo admitir que el siguiente código al .get $ () es muy probablemente de código de ejemplo, no entiendo completamente lo que está sucediendo cuando se ejecuta - tal vez hay una mejor manera de dar formato a los datos?
yo era capaz de hacer algunos progresos en la que el diagrama de carga ahora nuevos datos, sino que se añade en la parte superior de lo que ya existe. Sospecho que el culpable es esta línea:
options.series[0].data.push(data);
I intentado options.series [0] .setData (datos); pero nada pasa. En el lado positivo, la solicitud de obras AJAX sin problemas basan en el valor del menú de selección y no hay errores de Javascript. Aquí está el código en cuestión, sans trazar opciones:
$.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 Este es el formato que el gráfico está tirando de -. Muy simple, nombre de la categoría y el valor con \ n después de cada
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
Solución
EDITAR: La respuesta de abajo es más correcto
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);
});
Este es un ejemplo muy sencillo, ya que no tengo mis archivos aquí conmigo, pero la idea básica es que cada vez nuevas opciones para el usuario selecciona el material que quieren ver, vas a tener sustituir el. serie objeto de datos con la nueva información desde el servidor y luego volver a crear el gráfico utilizando el nuevo Highcharts.Chart ();.
Espero que esto ayude! John
EDIT:
Mira esto, la de algo 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]);
}
});
Yo tenía una mesa con información en el primer y último TDS que tenía que añadir a la gráfica circular. bucle I a través de cada una de las filas y de empuje en los valores. Nota: Yo uso chartoptions.series [0] .data ya que los gráficos circulares sólo tienen Serie 1
.Otros consejos
Las otras respuestas no funcionó para mí. He encontrado la respuesta en su documentación:
http://api.highcharts.com/highcharts#Series
Usando este método ( ver jsFiddle ejemplo ):
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] );
});
Es necesario borrar la matriz de edad a cabo antes de empujar los nuevos datos en el Hay muchas maneras de lograr esto pero he usado éste:.
options.series[0].data.length = 0;
Así que el código debería tener este aspecto:
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 el botón se hace clic en los datos antiguos se purga y sólo los nuevos datos debe aparecer. Espero que ayude.
En realidad, tal vez debería elegir el update función es mejor.
Aquí está el documento de la función update http://api.highcharts.com/highcharts#Series.update
Sólo puede escribir código como a continuación:
chart.series[0].update({data: [1,2,3,4,5]})
Estos códigos se fusionará la opción de origen, y actualizar los datos modificados.
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 = {};
});
Se necesita lavar serie los 'datos'.
data = {};
Si son mediante empuje para empujar los datos a los option.series dinámicamente .. sólo tiene que utilizar
options.series = [];
para desactivarla.
options.series = [];
$("#change").click(function(){
}
Siempre se puede cargar un conjunto de datos JSON
aquí i definida 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);
});
data = [150,300]; // data from ajax or any other way
chart.series[0].setData(data, true);
El setData llamará método redibujado.
Referencia: http://api.highcharts.com/highcharts/Series.setData
