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

Reading Exernal data from URL not working in line Graph

Viewing 6 posts - 1 through 6 (of 6 total)
  • December 17, 2018 at 4:34 pm #23760

    bjndugga

    Hi Team,

    I am trying to write a small application for Education Purposes and demostration. I have data that can been accessed from the URL as below:

    http://localhost:5701/hazelcast/rest/maps/mdstcnt/CMB

    Which return data in a plaintext as :

    03:50,93

    which I need to format into x and y values and display on a line chart.

    The x values are however dateTime format therefore I am trying to show the changes in the Y values that is on a far right as shown above.

    Here is the script:

      <script>
            window.onload = function () {

                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
                        }]
                });

                updateData();


                function formatPublish(hzdata) {

                    var points = hzdata.split(",");

                    var time = new Date;
                    var xTime=points[0].split(":");
                    
                    time.setHours(parseInt(xTime[0]));
                    time.setMinutes(parseInt(xTime[1]));

                    dataPoints.push({x: time.getTime(), y: parseInt(points[1])});


                    chart.render();
                    setTimeout(updateData, 500);

                }

                function updateData() {
                    $.get("http://localhost:5701/hazelcast/rest/maps/mdstcnt/CMB", formatPublish);
                }
            }
        </script>
    December 18, 2018 at 11:43 am #23771

    Vishwas R

    @bjndugga,

    The data that you are getting from the service is in CSV format which you should parse it to the format accepted by CanvasJS before passing to the chart. Please take a look at our documentation on Creating Chart from CSV Data for step by step tutorial on the same.

    —
    Vishwas R
    Team CanvasJS

    December 18, 2018 at 9:37 pm #23782

    bjndugga

    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.

    December 19, 2018 at 10:25 am #23789

    Vishwas R

    @bjndugga,

    Please take a look at this sample project on integrating CanvasJS in NodeJS.

    —
    Vishwas R
    Team CanvasJS

    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>
    December 20, 2018 at 10:27 am #23807

    Vishwas R

    @bjndugga,

    Can you kindly share sample project over Google-Drive or Onedrive so that we can run it locally at our end, understand the use-case better and help you out.

    —
    Vishwas R
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.