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

This topic contains 5 replies, has 2 voices, and was last updated by  Vishwas R 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23760

    bjndugga
    Member

    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>

    #23771

    Vishwas R
    Keymaster

    @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

    #23782

    bjndugga
    Member

    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.

    #23789

    Vishwas R
    Keymaster

    @bjndugga,

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


    Vishwas R
    Team CanvasJS

    #23797

    bjndugga
    Member

    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>

    #23807

    Vishwas R
    Keymaster

    @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.