Hello, I am trying to create a dynamic chart with highchart, for now I only manage to add the data through a json, what I try is that the size of the chart will vary as data like this example comes in.
My chart is like this and every time you enter a data the chart is enlarged and if I have many points it becomes possible, what I need is that the oldest points will disappear as in the example
Chart code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Pie Chart</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var chart;
function getTemperatures() {
$.ajax({
url: 'https://secure-brushlands-10563.herokuapp.com/sensors',
dataType: 'json',
success: function (data) {
var temperaturas = [];
var fechas = [];
$.each(data, function (key, val) {
temperaturas.push(val.temperatura);
fechas.push(val.fecha);
});
chart.xAxis[0].setCategories(fechas);
chart.series[0].setData(temperaturas);
setTimeout(getTemperatures, 1000);
},
cache: false
});
}
$(document).ready(function () {
// draw chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
animation: Highcharts.sgv,
marginRight: 10,
events: {
load:
getTemperatures
}
},
title: {
text: 'Temperaturas',
x: -20 //center
},
subtitle: {
text: 'Fuente: Sensor DHT11 - Arduino',
x: -20
},
xAxis: {
//categories:
tickPixelInterval: 150,
type: 'datetime',
},
yAxis: {
title: {
text: 'Temperatura (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
//quitando los creditos
enabled: true
},
exporting: {
//deshabilitando el boton de print
enabled: false
},
series: [{
name: 'Temperatura',
}]
});
});
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="/js/chartTheme.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thank you!