¿Cómo cargar datos de JSON a Highchart?
myJson
Se ve como esto
[{"1332879360000.0": 300.0, "1332797760000.0": 353.0,
"1332799320000.0": 358.0, "1332879780000.0": 302.0,
"1332800160000.0": 359.0, "1332880200000.0": 299.0,
"1332880620000.0": 298.0, "1332881040000.0": 301.0,
"1332881460000.0": 402.0, "1332880020000.0": 330.0,
"1332882300000.0": 466.0, "1332796620000.0": 519.0,
"1332800520000.0": 447.0, "1332797460000.0": 359.0,
"1332801000000.0": 442.0}]
Y quiero mostrar esos datos en Highchart, con el eje X es el formato de fecha,
("1332801000000.0" in JSON)
y el eje Y son datos(300.0 in JSON)
,
solo como un punto.
Me doy cuenta de que hay una demostración en Highchart.com, y se ejecuta datos en vivo. Copio eso, pero no quiero mostrarme animado. Simplemente muestre esos puntos a la vez y haga un cuadro. ¿Alguna solución? No estoy muy familiarizado con JavaScript. Pero creo que esto puede usar el mismo método.
<script type="text/javascript">
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: '/get_data',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>