jquery - etiquetas - highcharts line label

¿Por qué Highcharts no aceptará el valor UTC de mi JSON?

Question

Estoy tratando de obtener algunos datos formateados JSON de un feed COSM en un gráfico simple, pero estoy teniendo problemas para hacerlo. No estoy seguro de si estoy entendiendo mal cómo funciona el conjunto de series (incluso después de revisar la documentación que contiene).

Este es mi código con experimentos en él (eventualmente quiero obtener los datos JSON transmitidos a través de un bucle, pero por ahora solo traté de empujar manualmente un segundo punto de datos).

$(document).ready(function(){
var options = {
chart: {
renderTo: ''container'',
type: ''line'',
marginRight: 130,
marginBottom: 25
},
title: {
text: ''Temperature'',
x: -20 //center
},
xAxis: {
//type: ''datetime'',
},
yAxis: {
title: {
text: ''Temperature (°C)''
},
plotLines: [{
value: 0,
width: 1,
color: ''#808080''
}]
},
tooltip: {
formatter: function() {
return ''<b>''+ this.series.name +''</b><br/>''+
this.x +'': ''+ this.y +''°C'';
}
},
legend: {
layout: ''vertical'',
align: ''right'',
verticalAlign: ''top'',
x: -10,
y: 100,
borderWidth: 0
},
exporting: {
enabled: false
},
series: [{"name":"Temperature", "data":[]}]
};
$.getJSON(''http://api.cosm.com/v2/feeds/79903.json?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g'', function(data)
{
var xval = data.datastreams[7].at;
var yval = parseFloat(data.datastreams[7].current_value);
alert(xval);
alert(yval);
var pointChart = new Array(xval, yval);
options.series[0].data.push(pointChart);
xval = data.datastreams[2].at;
yval = parseFloat(data.datastreams[2].current_value);
pointChart = [xval, yval];
options.series[0].data.push(pointChart);
//options.series[0].data.push(data.datastreams[7].at, 25);
alert(options.series[0].data[0]);
alert(options.series[0].data[1]);
});
var chart = new Highcharts.Chart(options);
});

JSON se ve así:

{
"version" : "1.0.0",
"created" : "2012-10-12T05:01:53.231981Z",
"status" : "live",
"location" : {
},
"datastreams" : [{
"max_value" : "100.0",
"min_value" : "0.0",
"at" : "2012-10-22T01:28:12.610947Z",
"id" : "Battery_Level",
"current_value" : "88"
}, {
"max_value" : "30431.0",
"min_value" : "-26691.0",
"at" : "2012-10-22T01:22:32.905001Z",
"id" : "Heading",
"current_value" : "95"
}, {
"max_value" : "64.9304",
"min_value" : "21.6153",
"at" : "2012-10-22T01:30:52.656318Z",
"unit" : {
"symbol" : "%"
},
"id" : "Humidity",
"current_value" : "55.7556"
}, {
"max_value" : "32684.0",
"min_value" : "0.0",
"at" : "2012-10-22T01:30:52.656318Z",
"id" : "Light_Level",
"current_value" : "37"
}, {
"max_value" : "649994.0",
"min_value" : "-139994.0",
"at" : "2012-10-18T06:47:56.226880Z",
"unit" : {
"symbol" : "µT"
},
"id" : "Magnetic_X",
"current_value" : "-24.90"
}, {
"max_value" : "99997.0",
"min_value" : "-9.9006731e+24",
"at" : "2012-10-18T06:47:56.226880Z",
"unit" : {
"symbol" : "µT"
},
"id" : "Magnetic_Y",
"current_value" : "7.35"
}, {
"max_value" : "432.0",
"min_value" : "-3950.0",
"at" : "2012-10-18T06:47:56.226880Z",
"unit" : {
"symbol" : "µT"
},
"id" : "Magnetic_Z",
"current_value" : "7.10"
}, {
"max_value" : "25.59",
"min_value" : "11.1",
"at" : "2012-10-22T01:30:52.656318Z",
"unit" : {
"symbol" : "°C"
},
"id" : "Temperature",
"current_value" : "22.3800"
],
}

Según tengo entendido, Highcharts acepta valores de fecha / hora formateados UTC para el eje x. ¿El UTC que viene de mi feed JSON no es válido?

Answer 1

Debe convertir los valores de fecha y hora en una marca de tiempo de Unix, y luego Highcharts lo aceptará.

Date.UTC(2010, 0, 1)

Eche un vistazo a este tutorial sobre cómo trabajar con objetos de fecha en Javascript.