image/w/chart.html

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Brew Log</title>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <script src="js/jquery-1.12.4.min.js"></script>
 <script src="js/Chart.min.js"></script>
 <script src="js/ch-plug-anno.min.js"></script>
 <link rel="stylesheet" href="css/web.css">
 <style>
   canvas{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	background: white;
   }
 </style>
</head>
<body>

 <div id="tmap"></div>
 <div style="width:95%; margin:0 auto; margin-top: 20px;">
  <canvas id="myChart"></canvas>
 </div>
 <div class="menu">
  <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>
  <form action="logs.html"><input type="submit" class="button" value="Brouw logs"></form>
 </div>

 <script>
var tokens = [];
var query = location.search;
query = query.slice(1);
query = query.split('&');
$.each(query, function(i,value){    
  var token = value.split('=');   
  var key = decodeURIComponent(token[0]);     
  var data = decodeURIComponent(token[1]);
  tokens[key] = data;
});

var logfile = tokens["show"];
$('#tmap').append(logfile);


$.getJSON(logfile, function(data) {
  var recipe = data.brew.map(function(item) {
    return item.Recipe;
  });
  var brewdate = data.brew.map(function(item) {
    return item.Date;
  });
  var labels = data.brew[0].brewdata.map(function(item) {
    return item.Label;
  });
  var mlt_sp = data.brew[0].brewdata.map(function(item) {
    return item.MLT_sp;
  });
  var mlt_pv = data.brew[0].brewdata.map(function(item) {
    return item.MLT_pv;
  });
  var mlt_pwm = data.brew[0].brewdata.map(function(item) {
    return item.MLT_pwm;
  });
  var hlt_sp = data.brew[0].brewdata.map(function(item) {
    return item.HLT_sp;
  });
  var hlt_pv = data.brew[0].brewdata.map(function(item) {
    return item.HLT_pv;
  });
  var hlt_pwm = data.brew[0].brewdata.map(function(item) {
    return item.HLT_pwm;
  });
  var annos = data.brew[0].annotations.map(function(item) {
    return item;
  });

  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
	label: 'MLT sp',
	backgroundColor: 'rgba(250, 0, 0, 0.4)',
	borderColor: 'rgba(250, 0, 0, 0.4)',
	borderDash: [8, 4],
	pointBorderWidth: 1,
	pointRadius: 1,
	pointStyle: 'dash',
	lineTension: 0,
	data: mlt_sp,
	fill: false
      },{
	label: 'MLT pv',
	backgroundColor: 'rgba(54, 162, 235, 0.9)',
	borderColor: 'rgba(54, 162, 235, 0.9)',
	pointBorderWidth: 1,
	pointRadius: 1,
	lineTension: 0,
	data: mlt_pv,
	fill: false
      },{
	label: 'MLT pwm',
	backgroundColor: 'rgba(63, 131, 191, 0.4)',
	borderColor: 'rgba(63, 131, 191, 0.4)',
	borderDash: [8, 4],
	pointBorderWidth: 1,
	pointRadius: 1,
	pointStyle: 'dash',
	lineTension: 0,
	data: mlt_pwm,
	fill: false
      },{
	label: 'HLT sp',
	backgroundColor: 'rgba(255, 99, 132, 0.4)',
	borderColor: 'rgba(255, 99, 132, 0.4)',
	borderDash: [8, 4],
	pointBorderWidth: 1,
	pointRadius: 1,
	pointStyle: 'dash',
	lineTension: 0,
	data: hlt_sp,
	fill: false
      },{
	label: 'HLT pv',
	backgroundColor: 'rgba(255, 206, 86, 0.9)',
	borderColor: 'rgba(255, 206, 86, 0.9)',
	pointBorderWidth: 1,
	pointRadius: 1,
	lineTension: 0,
	data: hlt_pv,
	fill: false
      },{
	label: 'HLT pwm',
	backgroundColor: 'rgba(75, 192, 192, 0.4)',
	borderColor: 'rgba(75, 192, 192, 0.4)',
	borderDash: [8, 4],
	pointBorderWidth: 1,
	pointRadius: 1,
	pointStyle: 'dash',
	lineTension: 0,
	data: hlt_pwm,
	fill: false
      }]
    },
    options: {
      title: {
        display: true,
	fontSize: 18,
        text: recipe
      },
      responsive: true,
      legend: {
	position: 'bottom'
      },
      animation: {
	duration: 0
      },
      scales: {
	xAxes: [{
	  display: true,
	  scaleLabel: {
	    display: true,
	    labelString: brewdate
	  }
	}],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Temperature'
          }
        }]
      },
      annotation: {
	drawTime: "afterDraw",
	annotations: annos
      }
    }
  });
  /* myChart.toBase64Image(); return pmg image string */
});
 </script>

</body>
</html>