FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Reading Exernal data from URL not working in line Graph › Reply To: Reading Exernal data from URL not working in line Graph

December 19, 2018 at 3:35 pm #23797

bjndugga

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