Skip to content

Instantly share code, notes, and snippets.

@suzukiken
Last active August 31, 2016 10:52
Show Gist options
  • Save suzukiken/684ba24dbff0ab567ddd625d82d2c65d to your computer and use it in GitHub Desktop.
Save suzukiken/684ba24dbff0ab567ddd625d82d2c65d to your computer and use it in GitHub Desktop.
A chart of atmospheric pressure measured with Bosch BME280 using Milkcocoa and Charts.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<title>ESPr-BME280</title>
</head>
<body>
<canvas id="canvas" height="80"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas').getContext('2d');
var chart_data = {
labels: [],
datasets: [{
label: "pressure (hPa)",
backgroundColor: "rgba(50, 50, 100, 0.2)",
borderColor: "rgba(50, 50, 100, 1)",
borderWidth: 1,
pointRadius: 0,
data: []
}]
};
var ds = new MilkCocoa('xxxxxxx.mlkcca.com').dataStore('xxxxxxxx');
ds.stream().size(100).sort('desc').next(function(err, data){
for(var i=0; i<data.length; i++) {
var dt = new Date(data[i].timestamp).toLocaleString();
chart_data.labels.push(dt);
chart_data.datasets[0].data.push(data[i].value.Press);
}
new Chart.Line(canvas, {data: chart_data});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment