!7

html {
  ret hhtml(hhead(
    loadJQuery()
    + htitle("ante! available computing power")
    + [[<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>]])
    + hbody(
      hSilentComputator()
    + [[<div style="width: 100%;"><canvas id="canvas"></canvas>]]
    + hjavascript([[

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

	// INITIALIZATION
	
	function randomScalingFactor() { return 5; }

		var config = {
			type: 'line',
			data: {
				labels: [],
				datasets: [{
					label: 'Computing devices',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [],
					fill: false,
				}, {
					label: 'Connected devices',
					backgroundColor: window.chartColors.yellow,
					borderColor: window.chartColors.yellow,
					data: [],
					fill: false,
				}, {
					data: [],
					showLine: false,
					pointRadius: 0
				}]
			},
			options: {
        legend: {
          labels: {
            filter: function(legendItem, chartData) {
              //return legendItem.dataSetIndex != 2;
              return legendItem.text != null;
            },
            fontSize: 18
          },
        },

				responsive: true,
				title: {
					display: true,
					text: 'ante! available computing power',
					fontSize: 32
				},
				tooltips: {
					mode: 'index',
					intersect: false,
					filter: function(item, data) { return item.datasetIndex < 2; }
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Time'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: ''
						},
						ticks: { stepSize: 1 }
					}]
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
			var start = +new Date(), n = -2;
			var lastValue = null;
		
		  var f;
  		function f() {
  		  $.get('http://butter.botcompany.de:8080/1013835/raw/n2', function(jsn) {
  		    jsn = JSON.parse(jsn);
    		  var value = jsn[1];
    		  var value2 = jsn[0];
    		  var value3 = jsn[1]+1; // dummy for max
    		  var diff = Math.round((new Date()-start)/$INTERVAL);
    		  var ds = config.data.datasets[0].data;
    		  var ds2 = config.data.datasets[1].data;
    		  var ds3 = config.data.datasets[2].data;
    		  var change = false;
    			while (n < diff) {
    			  ++n;
    				config.data.labels.push('');
    				if (lastValue == null) lastValue = value;
    				ds.push(value-lastValue);
    				lastValue = value;
    				ds2.push(value2);
    				ds3.push(value2+1);
    				change = true;
    			}
    			while (ds.length > 20) {
    			  config.data.labels.shift();
    			  ds.shift();
    				ds2.shift();
    				ds3.shift();
    			}
    			if (change) window.myLine.update();
    		});
  		}
  		setInterval(f, $INTERVAL);
  		f();
		};
	]].replace("$INTERVAL", str(5000)))));
}

Began life as a copy of #1013912