image/w/chart.html

changeset 11
f816cf5b6bcb
parent 0
b74b0e4902c3
child 13
8f01b74bf1dd
equal deleted inserted replaced
10:29e2e2e0b9ef 11:f816cf5b6bcb
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Brew Log</title>
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8 <script src="js/jquery-1.12.4.min.js"></script>
9 <script src="js/Chart.min.js"></script>
10 <script src="js/ch-plug-anno.min.js"></script>
11 <link rel="stylesheet" href="app/styles/web.css">
12 <style>
13 canvas{
14 -moz-user-select: none;
15 -webkit-user-select: none;
16 -ms-user-select: none;
17 background: white;
18 }
19 </style>
20 </head>
21 <body>
22
23 <div id="tmap"></div>
24 <div style="width:95%; margin:0 auto; margin-top: 20px;">
25 <canvas id="myChart"></canvas>
26 </div>
27 <br>
28 <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>
29
30 <script>
31
32 var tokens = [];
33 var query = location.search;
34 query = query.slice(1);
35 query = query.split('&');
36 $.each(query, function(i,value){
37 var token = value.split('=');
38 var key = decodeURIComponent(token[0]);
39 var data = decodeURIComponent(token[1]);
40 tokens[key] = data;
41 });
42
43
44 var logfile = tokens["show"];
45 $('#tmap').append(logfile);
46
47
48 $.getJSON(logfile, function(data) {
49 var recipe = data.brew.map(function(item) {
50 return item.Recipe;
51 });
52 var brewdate = data.brew.map(function(item) {
53 return item.Date;
54 });
55 var labels = data.brew[0].brewdata.map(function(item) {
56 return item.Label;
57 });
58 var mlt_sp = data.brew[0].brewdata.map(function(item) {
59 return item.MLT_sp;
60 });
61 var mlt_pv = data.brew[0].brewdata.map(function(item) {
62 return item.MLT_pv;
63 });
64 var mlt_pwm = data.brew[0].brewdata.map(function(item) {
65 return item.MLT_pwm;
66 });
67 var hlt_sp = data.brew[0].brewdata.map(function(item) {
68 return item.HLT_sp;
69 });
70 var hlt_pv = data.brew[0].brewdata.map(function(item) {
71 return item.HLT_pv;
72 });
73 var hlt_pwm = data.brew[0].brewdata.map(function(item) {
74 return item.HLT_pwm;
75 });
76 var annos = data.brew[0].annotations.map(function(item) {
77 return item;
78 });
79
80 var ctx = document.getElementById("myChart");
81 var myChart = new Chart(ctx, {
82 type: 'line',
83 data: {
84 labels: labels,
85 datasets: [{
86 label: 'MLT sp',
87 backgroundColor: 'rgba(250, 0, 0, 0.4)',
88 borderColor: 'rgba(250, 0, 0, 0.4)',
89 borderDash: [8, 4],
90 pointBorderWidth: 1,
91 pointRadius: 1,
92 pointStyle: 'dash',
93 lineTension: 0,
94 data: mlt_sp,
95 fill: false
96 },{
97 label: 'MLT pv',
98 backgroundColor: 'rgba(54, 162, 235, 0.9)',
99 borderColor: 'rgba(54, 162, 235, 0.9)',
100 pointBorderWidth: 1,
101 pointRadius: 1,
102 lineTension: 0,
103 data: mlt_pv,
104 fill: false
105 },{
106 label: 'MLT pwm',
107 backgroundColor: 'rgba(63, 131, 191, 0.4)',
108 borderColor: 'rgba(63, 131, 191, 0.4)',
109 borderDash: [8, 4],
110 pointBorderWidth: 1,
111 pointRadius: 1,
112 pointStyle: 'dash',
113 lineTension: 0,
114 data: mlt_pwm,
115 fill: false
116 },{
117 label: 'HLT sp',
118 backgroundColor: 'rgba(255, 99, 132, 0.4)',
119 borderColor: 'rgba(255, 99, 132, 0.4)',
120 borderDash: [8, 4],
121 pointBorderWidth: 1,
122 pointRadius: 1,
123 pointStyle: 'dash',
124 lineTension: 0,
125 data: hlt_sp,
126 fill: false
127 },{
128 label: 'HLT pv',
129 backgroundColor: 'rgba(255, 206, 86, 0.9)',
130 borderColor: 'rgba(255, 206, 86, 0.9)',
131 pointBorderWidth: 1,
132 pointRadius: 1,
133 lineTension: 0,
134 data: hlt_pv,
135 fill: false
136 },{
137 label: 'HLT pwm',
138 backgroundColor: 'rgba(75, 192, 192, 0.4)',
139 borderColor: 'rgba(75, 192, 192, 0.4)',
140 borderDash: [8, 4],
141 pointBorderWidth: 1,
142 pointRadius: 1,
143 pointStyle: 'dash',
144 lineTension: 0,
145 data: hlt_pwm,
146 fill: false
147 }]
148 },
149 options: {
150 title: {
151 display: true,
152 fontSize: 18,
153 text: recipe
154 },
155 responsive: true,
156 legend: {
157 position: 'bottom'
158 },
159 animation: {
160 duration: 0
161 },
162 scales: {
163 xAxes: [{
164 display: true,
165 scaleLabel: {
166 display: true,
167 labelString: brewdate
168 }
169 }],
170 yAxes: [{
171 display: true,
172 scaleLabel: {
173 display: true,
174 labelString: 'Temperature'
175 }
176 }]
177 },
178 annotation: {
179 drawTime: "afterDraw",
180 annotations: annos
181 }
182 }
183 });
184 /* myChart.toBase64Image(); return pmg image string */
185 });
186 </script>
187
188 </body>
189 </html>
190

mercurial