Hi Team,
Please help me find a way I can pass dataPoints from a node.js function to the chart and allow it to refresh every time the datapoints are refreshed. The data will be sent in form of JSON format.
The java script branch runs well in node.js and data is shown
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var CanvasJS = require('./canvasjs.min'); var HazelcastClient = require('hazelcast-client').Client; var Config = require('hazelcast-client').Config; var config = new Config.ClientConfig(); config.networkConfig.addresses = [{host: '127.0.0.1', port: '5701'}]; var map = {}; HazelcastClient.newHazelcastClient().then(function (hazelcastClient) { map = hazelcastClient.getMap("mdstcnt"); setInterval(() => { readMap(map); }, 500); }); var dataPoints = []; var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title: { text: "Live Data" }, data: [{ type: "line", xValueType: "dateTime", xValueFormatString: "hh:mm TT", yValueFormatString: "#,###", showInLegend: true, dataPoints: dataPoints }] }); readMap(); function readMap(map) { map.get('MICROBUNDLE').then(function (entries) { console.log(entries); var entry = JSON.parse(entries); var entryTime = entry.time.split(":"); var time = new Date; time.setHours(parseInt(entryTime[0])); time.setMinutes(parseInt(entryTime[1])); dataPoints.push({x: time.getTime(), y: parseInt(entry.value)}); chart.render(); //setTimeout(readMap, 500); }); } } </script> </head> <body> <p>Chart</p> <div id="chartContainer" style="height: 300px; width: 100%;"></div> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
Hi Vishwas R,
I actually noticed that I need to parse JSON data before publishing it. I am trying to implement this on Node.js, however I have not reference code.