JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" />
<div id="myChart" style="height:300px; width:500px;"></div>
<button>Start Updates</button>
JavaScript
//from www.meccanismocomplesso.org
//by F.Nelli Dec 2013
// this is based on a buffer of 19 values.
$(document).ready(function(){
//refresh time (in millisec)
var t = 2000;
//samples to draw
var n = 20;
var x = (new Date()).getTime(); // current time
//buffer of n samples
var data = [];
for(i=0; i<n; i++){
data.push([x - (n-1-i)*t,0]);
}
var options = {
axes: {
xaxis: {
numberTicks: 4,
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%H:%M:%S'},
min : data[0][0],
//max : data[19][0]
max: data[data.length-1][0]
},
yaxis: {min:0, max: 1,numberTicks: 6,
tickOptions:{formatString:'%.1f'}
}
},
seriesDefaults: {
rendererOptions: { smooth: true}
}
};
var plot1 = $.jqplot ('myChart', [data],options);
$('button').click( function(){
doUpdate();
$(this).hide();
});
function doUpdate() {
if(data.length > n-1){
data.shift();
}
var y = Math.random();
var x = (new Date()).getTime();
data.push([x,y]);
// if (plot1) {
// plot1.destroy();
//}
plot1.series[0].data = data;
//il problema è che adesso i valori su y delle ticks non sono più statici
//e cambiano ad ogni aggiornamento, quindi cambia la logica sottostante
// devo intervenire sui valori all'interno di options.
options.axes.xaxis.min = data[0][0];
options.axes.xaxis.max = data[data.length-1][0];
// plot1 = $.jqplot ('myChart', [data],options);
plot1.resetAxesScale();
plot1.replot();
// plot1.replot(); // = $.jqplot ('myChart', [data],options);
setTimeout(doUpdate, t);
}
});