javascript - data - highcharts tooltip

Highcharts carga datos y no grafica

Question

Intento cargar datos dinámicamente en Highcharts, pero estoy teniendo problemas. Intenté hacer esto de muchas maneras y parece que los datos están cargados en el JS, pero el gráfico no está trazado.

Actualmente este es mi código en la función de document ready jQuery:

options = {
chart: {
renderTo: ''container'',
zoomType: ''x'',
animation: true,
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
type: ''datetime'',
title: {
text: null
},
},
yAxis: {
title: {
text: ''Size'',
},
},
legend: {
enabled: false
},
series: [{
data: []
}]
}
$.ajax({
type: "GET",
url: "works/load_data.php",
data: "id=3&mdate=2012-02&mxdate=2012-03",
success: function (items) {
var obj = eval(items).load;
var series = { data: [] };
$.each(obj, function (itemNo, item) {
series.data.push(item);
});
options.series.push(series);
},
cache: false,
});
var chart = new Highcharts.Chart(options);

No pasa nada en el gráfico. Pero si me registro para consolar las opciones de gráfico, obtengo esto:

Mi PHP hace eco de los datos como este: data = {load:[ {x: Date.UTC(2012,2,1,7,15), y: 0.012},{x: Date.UTC(2012,2,1,7,30), y: 0.068} ... ]}

Parece estar bien, al menos para mí. Pero no funciona :( ¿Puede alguien decirme qué estoy haciendo mal? Gracias.

Answer 1

AJAX es asíncrono, lo que significa que la llamada se produce después de que se renderiza el gráfico. Tratando de pegar la creación del gráfico después de su evento de éxito, así:

$.ajax({
type: "GET",
url: "works/load_data.php",
data: "id=3&mdate=2012-02&mxdate=2012-03",
success: function (items) {
var obj = eval(items).load;
var series = { data: [] };
$.each(obj, function (itemNo, item) {
series.data.push(item);
});
options.series.push(series);
var chart = new Highcharts.Chart(options);
},
cache: false,
});