Skip to content

Instantly share code, notes, and snippets.

@suzukiken

suzukiken/multiple-chart.html

Created August 31, 2016 11:03
Show Gist options
  • Save suzukiken/e20f1431811f0671b5fc9ae8941a4987 to your computer and use it in GitHub Desktop.
Save suzukiken/e20f1431811f0671b5fc9ae8941a4987 to your computer and use it in GitHub Desktop.
Download ZIP
Draw chart of pressure, humidity, temperature and light measured by Bosch BME280. Milkcocoa for storing data and Charts.js for draw charts.
Raw
multiple-chart.html
<!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_press" height="100"></canvas>
<canvas id="canvas_temp" height="100"></canvas>
<canvas id="canvas_hum" height="100"></canvas>
<canvas id="canvas_light" height="100"></canvas>
<script type="text/javascript">
var canvas_press = document.getElementById("canvas_press").getContext("2d");
var canvas_temp = document.getElementById("canvas_temp").getContext("2d");
var canvas_hum = document.getElementById("canvas_hum").getContext("2d");
var canvas_light = document.getElementById("canvas_light").getContext("2d");
var data_press = {
labels: [],
datasets: [{
label: "Pressure (hPa)",
backgroundColor: "rgba(50, 50, 100, 0.2)",
borderColor: "rgba(50, 50, 100, 1)",
borderWidth: 1,
pointRadius: 0,
data: []
}]
};
var data_temp = {
labels: [],
datasets: [{
label: "Temperature (c)",
backgroundColor: "rgba(100, 50, 50, 0.2)",
borderColor: "rgba(100, 50, 50, 1)",
borderWidth: 1,
pointRadius: 0,
data: []
}]
};
var data_hum = {
labels: [],
datasets: [{
label: "Humidity (%)",
backgroundColor: "rgba(50, 100, 50, 0.2)",
borderColor: "rgba(50, 100, 50, 1)",
borderWidth: 1,
pointRadius: 0,
data: []
}]
};
var data_light = {
labels: [],
datasets: [{
label: "Light",
backgroundColor: "rgba(50, 50, 50, 0.2)",
borderColor: "rgba(50, 50, 50, 1)",
borderWidth: 1,
pointRadius: 0,
data: []
}]
};
var his = new MilkCocoa("xxxxxxxx.mlkcca.com").dataStore("xxxxxxxx").history();
his.sort("asc");
his.size(720);
var days = 1;
var date_from;
var date_to;
// querystring: from=2016-08-30&days=1
var querystring = window.location.search.substring(1);
if (querystring.length) {
var from = "";
var params = querystring.split("&");
for (var i = 0; i < params.length; i++) {
var kv = params[i].split("=");
if (kv[0] == "from") {
from = kv[1];
} else if (kv[0] == "days") {
days = parseInt(kv[1]);
}
}
var ymd = from.split("-");
if (ymd.length == 3) {
date_from = new Date(parseInt(ymd[0]), parseInt(ymd[1])-1, parseInt(ymd[2]));
}
}
if (!date_from) {
date_from = new Date();
date_from.setTime(date_from.getTime() - 86400000 * days);
}
var date_to = new Date();
date_to.setTime(date_from.getTime() + 86400000 * days);
his.span(date_from.getTime(), date_to.getTime());
his.on("data", function(data) {
for(var i=0; i<data.length; i++) {
var dt = new Date(data[i].timestamp).toLocaleString();
data_press.labels.push(dt);
data_temp.labels.push(dt);
data_hum.labels.push(dt);
data_light.labels.push(dt);
data_press.datasets[0].data.push(data[i].value.Press);
data_temp.datasets[0].data.push(data[i].value.Temp);
data_hum.datasets[0].data.push(data[i].value.Hum);
data_light.datasets[0].data.push(data[i].value.Light);
}
new Chart.Line(canvas_press, {data: data_press});
new Chart.Line(canvas_temp, {data: data_temp});
new Chart.Line(canvas_hum, {data: data_hum});
new Chart.Line(canvas_light, {data: data_light});
});
his.run();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment