ajax - example - highcharts update data
Cargar datos en Highcharts con Ajax (2)
Estoy tratando de actualizar los gráficos altos en la carga de la página y en seleccionar el cambio de menú con la llamada JQUERY AJAX. Se están devolviendo datos en formato [[10,1228800000], [10,1228800000]]. El gráfico está en blanco y no grafica ninguno de los datos.
Intenté varias soluciones publicadas aquí pero ninguna funcionó.
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: ''stats'',
defaultSeriesType: ''spline''
},
title: {text:''''},
xAxis: {
type: ''datetime''
},
yAxis: {},
series: []
};
var month = ''July'';
$.ajax({
type: "POST",
data: "month="+month,
url: "update_visits_chart",
success: function (data) {
options.series.push(data);
chart = new Highcharts.Chart(options);
}
});
Cualquier error? gracias por adelantado. EDITAR:
CÓDIGO MÁS RECIENTE QUE TODAVÍA NO FUNCIONA:
var options = {
chart: {
renderTo: ''stats'',
type: ''spline''
},
title: {
text: ''''
},
xAxis: {
type:''datetime'',
tickInterval: 30 * 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: ''%b %e''
},
labels: {
rotation: -45,
align: ''right''
}
},
yAxis: {
title: {
text: ''Number of visits''
},
min: 0
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat(''%b %e'', this.x) +''<br />''+this.y+'' visit(s)'';
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: ''Number of Visits'',
data: []
}]
};
var month = ''July'';
$.ajax({
type: "POST",
url: "update_visits_chart",
data: "month="+month,
success: function(data){
options.series[0].data = data;
chart = new Highcharts.Chart(options);
}
});
Debe establecer data
directamente en series porque los data
ya son una matriz multidimensional.
El siguiente código lo arreglará.
Cambiar options.series.push(data);
a options.series = data;
Debe usar el método setData del objeto serie como se describe en la documentación. En su caso, es options.series[0].setData(Data)
Y creo que tienes que convertir el resultado de Ajax de la cadena en un objeto / matriz real usando JSON.parse(data)
.
EDITAR: @Ricardo Lohmann: en la llamada ajax no especificó el tipo de datos que espera en la respuesta, por lo que jQuery adivinará el tipo de datos. Pero no reconocerá una cadena que comience con [
como JSON y dudo que su respuesta se publique con la application/json
tipo mime application/json
correcta. Entonces, especificar el tipo de mimo correcto también debería resolver el problema. Pero no tengo un ejemplo del responsable ajax completo del interrogador. Así que solo estoy adivinando, también.
Recomiendo la siguiente llamada ajax:
$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: ''json'',
success: function(data){
options.series[0].setData(data);
}
});
@Jugal Thakkar
$.getJSON
es solo un atajo para la llamada ajax anterior, pero es menos flexible porque tienes menos opciones.