--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/image/www/chart.html Sat Oct 20 13:23:15 2018 +0200
@@ -0,0 +1,190 @@
+<!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="app/styles/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>
+ <br>
+ <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>
+
+ <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>
+