Quantcast
Channel: Raspberry Pi Forums
Viewing all articles
Browse latest Browse all 4849

MicroPython • Re: How to draw simple chart on client side from server data

$
0
0
And printed response looks like:

Code:

>>> %Run -c $EDITOR_CONTENTip = 192.168.64.219temp 23.75<!DOCTYPE html><html></body> <body style="background-color:powderblue;"></body><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}.button { background-color: #4CAF50; border: 2px solid #000000;; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }.buttonRed { background-color: #d11d53; border: 2px solid #000000;; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head><body><center><h1>Garazna vrata</h1></center><br><br><form><center><center> <button class="button" name="DOOR" value="UP" type="submit">Odpri</button><br><br><center> <button class="buttonRed" name="DOOR" value="STOP" type="submit">Get Temp.</button><br><br><center> <button class="button" name="DOOR" value="DOWN" type="submit">Zapri</button></center></center></form><br><br><br><br><div>  <canvas id="myChart"></canvas></div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script>  var input = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23.75];  var labels = [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];  // build the labels on the fly. Could be provided  // from the application here as code uses RTC    //const labels = [];  //for(var i = 0; i < input.length; i ++ ){  //    labels.push(i);  }    const data = {      labels: labels,      datasets: [{        label: 'Temperatures',        data: input,        fill: false,        borderColor: 'rgb(75, 192, 192)',        tension: 0.1      }]    };  const ctx = document.getElementById('myChart');  new Chart(ctx, {    type: 'line',    data: data ,        options: {      scales: {        y: {          beginAtZero: true        }      }    }  });</script></body></html><!DOCTYPE html><html></body> <body style="background-color:powderblue;"></body><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}.button { background-color: #4CAF50; border: 2px solid #000000;; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }.buttonRed { background-color: #d11d53; border: 2px solid #000000;; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head><body><center><h1>Garazna vrata</h1></center><br><br><form><center><center> <button class="button" name="DOOR" value="UP" type="submit">Odpri</button><br><br><center> <button class="buttonRed" name="DOOR" value="STOP" type="submit">Get Temp.</button><br><br><center> <button class="button" name="DOOR" value="DOWN" type="submit">Zapri</button></center></center></form><br><br><br><br><div>  <canvas id="myChart"></canvas></div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script>  var input = ;  var labels = ;  // build the labels on the fly. Could be provided  // from the application here as code uses RTC    //const labels = [];  //for(var i = 0; i < input.length; i ++ ){  //    labels.push(i);  }    const data = {      labels: labels,      datasets: [{        label: 'Temperatures',        data: input,        fill: false,        borderColor: 'rgb(75, 192, 192)',        tension: 0.1      }]    };  const ctx = document.getElementById('myChart');  new Chart(ctx, {    type: 'line',    data: data ,        options: {      scales: {        y: {          beginAtZero: true        }      }    }  });</script></body></html>

Statistics: Posted by California — Sat Jan 20, 2024 3:32 pm



Viewing all articles
Browse latest Browse all 4849

Trending Articles