Wed, 24 Oct 2018 11:49:22 +0200
Renamed www directory to w to prevent too long filenames for the spiffs filesystem.
<!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>