Hello, I’m trying to build a web server that will updating a value of analog pin on a canvas chart. My code:
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=\"utf-8\" /><link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\"><script src=\"https://canvasjs.com/assets/script/canvasjs.min.js\"></script></head>");
client.println("<body>");
client.println("<div class=\"container\">");
client.println("<div id=\"chartContainer\" style=\"height: 370px; width: 100%;\"></div>");
client.println("<script>window.onload = function () {var dps = []; var chart = new CanvasJS.Chart(\"chartContainer\", { axisY: { includeZero: false }, data: [{ type: \"line\", dataPoints: dps }]});var xVal = 0;var yVal = 0; var updateInterval = 52;var dataLength = 50; var updateChart = function (count) { count = count || 1; for (var j = 0; j < count; j++) { yVal = "+String(analogRead(A0))+"; dps.push({ x: xVal, y: yVal }); xVal++; } if (dps.length > dataLength) { dps.shift(); } chart.render();};updateChart(dataLength);setInterval(function(){updateChart()}, updateInterval);}</script>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
I know why it doesn’t work (it is displaying the same value all the time) but how get it to work?