iambigd/jqplot-realtime

## jqplot-realtime
<HTML>
<HEAD>
<!--[if lt IE 9]><script type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
<script type="text/javascript" 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>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<link href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
    var t = 1000;
    var x = (new Date()).getTime(); // current time
    var n = 5;//20;
    data = [];
	//先做一些假的值為起點

    for(i=0; i<n; i++){
       data.push([x - (n-1-i)*t,0]);
    }


    var options = {
        axes: {
            xaxis: {
                numberTicks: 10,
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%H:%M:%S'},
                min : data[0][0],
                max: data[data.length-1][0]
            },
            yaxis: {
                min:0,
                max: 1,
                numberTicks: 15,
                tickOptions:{formatString:'%.1f'}
            }
        },
        seriesDefaults: {
            color: '#00ff00',      // CSS color spec to use for the line.  Determined automatically.
            rendererOptions: { smooth: true}
        },
        legend: {
            show: true,
            location: 'e',     // compass direction, nw, n, ne, e, se, s, sw, w.
            placement : "outside",
            rendererOptions: {
                // set to true to replot when toggling series on/off
                // set to an options object to pass in replot options.
                seriesToggle: 'normal',
                seriesToggleReplot: {resetAxes: true}
            }
        },
        grid: {
            drawBorder: false,
            shadow: false,
            drawGridLines: true,        // wether to draw lines across the grid or not.
            gridLineColor: '#cccccc',    // *Color of the grid lines.
            background: '#000',      // CSS color spec for background color of grid.
            borderColor: '#777',     // CSS color spec for border around grid.
            borderWidth: 1.0           // pixel width of border around grid.
        }
};


    console.log(data);
   var plot1 = $.jqplot ('targetPlot', [data],options);

   $('button').click( function(){
      doUpdate();
      $(this).hide();
   });

   function doUpdate() {
      if(data.length > n-1){

         data.shift();
		 console.log('after shift:');
		 console.log(data.length);
      }

      var y = Math.random();
      var x = (new Date()).getTime();
      data.push([x,y]);
	  console.log('add new one');
	  console.log(data.length);
      if (plot1) {
     	plot1.destroy();
      }
      plot1.series[0].data = data;
      options.axes.xaxis.min = data[0][0];
      options.axes.xaxis.max = data[data.length-1][0];
      //$('.jqPlot').remove();
      //$('#plotContainer').append('<div class="jqPlot" id="targetPlot" style="height:300px; width:300px;"></div>');
      //$('#plotContainer').append('<div class="jqPlot"  id="controllerPlot" style="margin-top: 30px; height:300px; width:300px;"></div>');
	  console.log(data);
      plot1 = $.jqplot('targetPlot', [data],options);
      setTimeout(doUpdate, t);
   }
});
</script>
<div id="plotContainer"> no remove
    <div class="jqPlot" id="targetPlot" style="height:600px; width:600px;"></div>
</div>
<button>Start Updates</button>
</BODY>
</HTML>
	<HTML>
	<HEAD>
	<!--[if lt IE 9]><script type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
	<script type="text/javascript" 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>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
	<link href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	$(document).ready(function(){
	var t = 1000;
	var x = (new Date()).getTime(); // current time
	var n = 5;//20;
	data = [];
	//先做一些假的值為起點

	for(i=0; i<n; i++){
	data.push([x - (n-1-i)*t,0]);
	}


	var options = {
	axes: {
	xaxis: {
	numberTicks: 10,
	renderer:$.jqplot.DateAxisRenderer,
	tickOptions:{formatString:'%H:%M:%S'},
	min : data[0][0],
	max: data[data.length-1][0]
	},
	yaxis: {
	min:0,
	max: 1,
	numberTicks: 15,
	tickOptions:{formatString:'%.1f'}
	}
	},
	seriesDefaults: {
	color: '#00ff00', // CSS color spec to use for the line. Determined automatically.
	rendererOptions: { smooth: true}
	},
	legend: {
	show: true,
	location: 'e', // compass direction, nw, n, ne, e, se, s, sw, w.
	placement : "outside",
	rendererOptions: {
	// set to true to replot when toggling series on/off
	// set to an options object to pass in replot options.
	seriesToggle: 'normal',
	seriesToggleReplot: {resetAxes: true}
	}
	},
	grid: {
	drawBorder: false,
	shadow: false,
	drawGridLines: true, // wether to draw lines across the grid or not.
	gridLineColor: '#cccccc', // *Color of the grid lines.
	background: '#000', // CSS color spec for background color of grid.
	borderColor: '#777', // CSS color spec for border around grid.
	borderWidth: 1.0 // pixel width of border around grid.
	}
	};


	console.log(data);
	var plot1 = $.jqplot ('targetPlot', [data],options);

	$('button').click( function(){
	doUpdate();
	$(this).hide();
	});

	function doUpdate() {
	if(data.length > n-1){

	data.shift();
	console.log('after shift:');
	console.log(data.length);
	}

	var y = Math.random();
	var x = (new Date()).getTime();
	data.push([x,y]);
	console.log('add new one');
	console.log(data.length);
	if (plot1) {
	plot1.destroy();
	}
	plot1.series[0].data = data;
	options.axes.xaxis.min = data[0][0];
	options.axes.xaxis.max = data[data.length-1][0];
	//$('.jqPlot').remove();
	//$('#plotContainer').append('<div class="jqPlot" id="targetPlot" style="height:300px; width:300px;"></div>');
	//$('#plotContainer').append('<div class="jqPlot" id="controllerPlot" style="margin-top: 30px; height:300px; width:300px;"></div>');
	console.log(data);
	plot1 = $.jqplot('targetPlot', [data],options);
	setTimeout(doUpdate, t);
	}
	});
	</script>
	<div id="plotContainer"> no remove
	<div class="jqPlot" id="targetPlot" style="height:600px; width:600px;"></div>
	</div>
	<button>Start Updates</button>
	</BODY>
	</HTML>