suzukiken/multiple-chart.html

## 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>
	<!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>