instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips)) customTooltips: false, // Array - Array of string names to attach tooltip events tooltipEvents: ["mousemove", "touchstart", "touchmove"], // String - Tooltip background colour tooltipFillColor: "rgba(0,0,0,0.8)", // String - Tooltip label font declaration for the scale label tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // Number - Tooltip label font size in pixels tooltipFontSize: 14, // String - Tooltip font weight style tooltipFontStyle: "normal", // String - Tooltip label font colour tooltipFontColor: "#fff", // String - Tooltip title font declaration for the scale label tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // Number - Tooltip title font size in pixels tooltipTitleFontSize: 14, // String - Tooltip title font weight style tooltipTitleFontStyle: "bold", // String - Tooltip title font colour tooltipTitleFontColor: "#fff", // Number - pixel width of padding around tooltip text tooltipYPadding: 10, // Number - pixel width of padding around tooltip text tooltipXPadding: 10, // Number - Size of the caret on the tooltip tooltipCaretSize: 8, // Number - Pixel radius of the tooltip border tooltipCornerRadius: 6, // Number - Pixel offset from point x to tooltip edge tooltipXOffset: 10, // String - Template string for single tooltips tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", // String - Template string for multiple tooltips multiTooltipTemplate: "<%= value %>", // Function - Will fire on animation progression. onAnimationProgress: function() {}, // Function - Will fire on animation completion. onAnimationComplete: function() {} }// fim do arquivo ChartConfig.jsAqui comeca o index.html: 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Realtime plot</title> <script src="/socket.io/socket.io.js"></script></head><body> <canvas id="meusDados" width="900" height="400"></canvas> <script src="js/Chart.js"></script> <script src="js/ChartConfig.js"></script> <script language="javascript"> // conjunto de dados vazio var formatoDados = { labels: [], datasets: [{ fillColor: "rgba(172,194,132,0.4)", strokeColor: "#ACC26D", pointColor: "#fff", pointStrokeColor: "#9DB86D", data: [] }] }; var meusDados = document.getElementById("meusDados").getContext("2d"); var myChart = new Chart(meusDados).Line(formatoDados); </script> <script> var socket = io(); var cont = 1; var valores = []; socket.on('serialData', function(res) { if (cont > 81) { myChart.removeData(); //socket.disconnect(); //console.log("serialport closed"); } myChart.addData([res.dado], cont++); //console.log(res.dado); }); </script></body></html>Observe que, apos instanciar o objeto do socket, eu verifico o evento que foi criado no servidor 'serialData' e efetuo a leitura desse valor atraves de uma callback. Observe que ele chega em forma de objeto e precisamos acessar o campo 'dado' para obter o valor desejado. Utilizo a variavel cont para servir como eixo das abscissas, os dados provenientes da serial comporao o eixo das ordenadas. Inicialmente o conjunto de dados e vazio e ele e preenchido com os dados da serial. Por motivos de visualizacao, eu decidi remover o conjunto de dados quando o contador for maior do que 81, caso contrario, se o fluxo de dados for muito grande, voce podera perceber travamentos no seu browser.Pronto, o seu aplicativo esta pronto para receber dados da serial e plotar em tempo real.Execute o seguinte comando para iniciar o servidor node em terminal:node server.jsVoce vera uma mensagem indicando que o servidor esta "escutando" na porta 3000.Para verificar o funcionamento, abra um navegador e digite o endereco http://localhost:3000Algumas melhorias ainda precisam ser feitas