Dygraph

Plotter Mode

by Oleg

HTML

<script src="http://dygraphs.com/dygraph.js"></script>
<div id="div_g" style="width: 600px; height: 300px;"></div>
<br>
<input type="checkbox" id="trig" name="last" value="1">
<label for="trig">Fix to end.</label>

JavaScript

$(document).ready(function() {
      
var data = [], xVal = 0,  yVal = 100;

var chart = new Dygraph(document.getElementById("div_g"), data,
{
  showRangeSelector: true,
  labels: ['Time', 'Random']
});

var updateChart = function(count) {
  count = count || 1;

  for (var j = 0; j < count; j++) {
    yVal = yVal + Math.round(5 + Math.random() * (-10));
    data.push([xVal, yVal]);
    xVal++;
  };
  
  var win = 50000;
  var del = data.length - win;
  if (del > 0) data.splice(0, del);
};

var renderChart = function() {
  var samples = 2000;
  var ls = data.length - 1;
  var fs = (ls >= samples ? ls - samples : 0);
  var rg = [data[fs][0], data[ls][0]];
  var opt = {'file': data, 'dateWindow': rg};

  if (!$('#trig').prop('checked')) {
    delete opt['dateWindow'];
    if (chart.dateWindow_) { 
	    if (chart.dateWindow_[0] < data[0][0]) chart.dateWindow_[0] = data[0][0];
			if (chart.dateWindow_[1] < data[0][0]) chart.dateWindow_ = null;
    }
  }
  
  chart.updateOptions(opt);
}

setInterval(function() { renderChart() },  200);

setInterval(function() { updateChart(500) }, 10);

});