Home forums Using CanvasJS Reading Exernal data from URL not working in line Graph Reply To: Reading Exernal data from URL not working in line Graph

#23797

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.

    This is the sample Code I had written

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://canvasjs.com/assets/script/canvasjs.min.js”></script>
</body>
</html>