2 Replies Latest reply on Apr 11, 2018 1:29 AM by Intel Corporation

    Web server update value of analog pin on graph


      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("<!DOCTYPE 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("<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>");


      I know why it doesn't work (it is displaying the same value all the time) but how get it to work?