JSFiddle - React, Tailwind, and code Playground

by Fabio Nelli

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 = 1000;
//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);
    setTimeout(doUpdate, t);
}

});