Skip to content

Instantly share code, notes, and snippets.

@literalplus

literalplus/00_DEMO.md

Last active June 28, 2017 06:51
Show Gist options
  • Save literalplus/58fb60be97d7c2f1aac1892361dfc0de to your computer and use it in GitHub Desktop.
Save literalplus/58fb60be97d7c2f1aac1892361dfc0de to your computer and use it in GitHub Desktop.
Download ZIP
This is a scrolling chart with random fake net usage data. In Production, this will be linked to real data. This is intended for the Zimon Project: https://github.com/realzimon/ng-zimon
Raw
00_DEMO.md
Raw
net-usage-chart.html
<!doctype html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body onload="ol()" style="background-color: #444; color: #fff; font-family: 'Helvetica Neue', Roboto, Calibri, sans-serif;">
<h1>HENLO I bims</h1>
<p>
Here's a scrolling chart with random fake net usage data.
In Production, this will be linked to real data.
</p>
<p>
Note how the green line disappears if there is no recent network usage!
</p>
<div>
<canvas height="600" width="800" id="newchart"></canvas>
<script type="text/javascript">
function ol() {
var labels = [];
for (var i = 0; i < 20; i++) {
labels.push("");
}
var datasets = [];
var props = {
type: 'line',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: false,
maintainAspectRatio: false,
title: {
display: true,
text: 'Wer saugt am meisten? (pro 30s)',
fontSize: 40,
fontColor: 'white'
},
scales: {
yAxes: [{
display: true,
ticks: {
fontColor: '#ffffff',
beginAtZero: true
},
gridLines: {
color: 'rgba(255,255,255,0.4)',
zeroLineColor: '#ffffff'
}
}],
xAxes: [{
display: true,
ticks: {
fontColor: '#ffffff',
beginAtZero: true,
suggestedMin: 0,
suggestedMax: 20
},
position: 'bottom',
gridLines: {
zeroLineColor: 'red'
}
}]
},
legend: {
display: false
},
tooltips: {
intersect: false
},
elements: {
line: {
fill: false,
lineTension: 0.1
}
},
animation: {
duration: 500
}
}
};
var myChart = new Chart(document.getElementById('newchart'), props);
var removeTestCounter = 0;
window.setInterval(function () {
var usages = [];
usages.push({mac: 'aa', hostname: 'aa', recentDownload: Math.random() * 50, color: 'red'});
usages.push({mac: 'bb', hostname: 'Zimon', recentDownload: Math.random() * 50, color: 'blue'});
usages.push({mac: 'dd', hostname: 'Daniel', recentDownload: Math.random() * 100, color: 'yellow'});
if (Math.random() > 0.6 && (removeTestCounter < 10 || removeTestCounter > 30)) {
usages.push({mac: 'cc', hostname: 'waffleiron', recentDownload: Math.random() * 50, color: 'lime'});
}
removeTestCounter++;
var macsToUsages = {};
usages.forEach(function (usage) {
macsToUsages[usage.mac] = usage;
});
datasets.forEach(function (dataset) {
var newUsage = macsToUsages[dataset.mac];
if (newUsage) {
updateDatasetFrom(newUsage, dataset);
usages.splice(usages.indexOf(newUsage), 1);
} else {
dataset.data.shift();
dataset.data.push(0);
var nonZeroDataPoints = dataset.data.filter(function (dataPoint) {
return dataPoint > 0;
});
if (nonZeroDataPoints.length === 0) {
console.log('Removing empty dataset', dataset);
datasets.splice(datasets.indexOf(dataset), 1);
}
}
});
usages.forEach(function (unusedUsage) {
var dataset = {};
updateDatasetFrom(unusedUsage, dataset);
console.log('Pushing new usage', unusedUsage, dataset);
datasets.push(dataset);
});
console.log('Updating chart with new data:', datasets);
myChart.update();
}, 2000);
}
function updateDatasetFrom(usage, dataset) {
if (!dataset.data) {
dataset.data = [];
for (var i = 0; i < 19; i++) {
dataset.data[i] = 0;
}
} else {
dataset.data.shift();
}
dataset.data.push(Math.round(usage.recentDownload));
dataset.borderColor = usage.color;
dataset.label = usage.hostname;
dataset.mac = usage.mac;
}
</script>
</div>
<a href="https://gist.github.com/xxyy/58fb60be97d7c2f1aac1892361dfc0de"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment