Home forums Using CanvasJS Sockets.io with canvasjs

This topic contains 7 replies, has 2 voices, and was last updated by  Suyash Singh 4 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #15188

    fbk
    Member

    hi
    amazing library, too happy to use it – however is there any example to use sockets.io with canvasjs
    (i want to use it over localhost and display it on a mobile or tablet), or anybody experienced it before – an anyone suggest an example or some sort of support would be appreciated.
    thanks
    best

    #15200

    Suyash Singh
    Moderator

    @fbk,

    Please download the sample project.

    Kindly follow the following steps:
    1. Setup NodeJS.
    2. Setup environment for socket.io.
    3. Run the command – node index.js from the given project.
    4. Browse – http://localhost:3000 and you should be able to see your chart.

    ___
    Suyash Singh
    Team CanvasJS

    #15202

    fbk
    Member

    thanks alot Suyash Singh, however when i use canvasjs dynamic chart with this its giving me error canvasjs not defined!
    var chart = new CanvasJS.Chart(“chartContainer” at this line…is there something i need to install extra ?
    thanks in advance
    best

    #15209

    Suyash Singh
    Moderator

    @fbk,

    Please make sure that you have included CanvasJS library in your project.

    ___
    Suyash Singh
    Team CanvasJS

    #15215

    fbk
    Member

    hi,
    thanks for reply – well of corse i have added and followed up with required libraries etc..it displays the static chart but when i copy paste the live or dynamic chart examples, its not displaying..
    any ideas?
    thanks

    #15218

    Suyash Singh
    Moderator

    @fbk,

    Please create a sample project reproducing the problem that you are facing and share it with us, so that we can have a look at your code and help you out.
    ___
    Suyash Singh
    Team CanvasJS

    #15231

    fbk
    Member

    Hi, so this below it the code where all the drawing of epochcharts is taking place ..its working though but i really want canvasjs chart to be drawn here..am calling this function in html as a script and the file generator so far creates some data which you can see the “data” coming from..there are other javascript files to start the file generator and the server to start listen to port 5000 but i dont think thats necessary to paste here..anyway your help much appreciated here.
    thanks

    /**
    * Starts the client and server pushing functionality
    */
    var startClientServer = function () {

    function timestamp() {
    return (new Date).getTime() / 1000;
    }

    //Get the URL to hand into the connect call
    var http = location.protocol;
    var slashes = http.concat(“//”);
    var host = slashes.concat(window.location.hostname);

    //Socket IO communications
    var socket = io.connect(host);

    var lastState = 0;

    var counter = 0;

    var chartData = [
    // The first layer
    {
    label: “EEG”,
    values: [{time: 1370044800, y: 0}, {time: timestamp(), y: 0}]
    },

    // The second layer
    {
    label: “NIRS”,
    values: [{time: 1370044800, y: 0}, {time: timestamp(), y: 0}]
    },

    {
    label: “STATE PROB”,
    values: [{time: 1370044800, y: 0}, {time: timestamp(), y: 0}]
    }
    ];

    var chart = $(‘#lineChart’).epoch({
    type: ‘time.line’,
    data: chartData,
    axes: [‘top’, ‘left’, ‘bottom’, ‘right’],
    fps: 50,
    margins: ‘big’
    });

    /*
    * Receiving data from the server
    */
    var lastTime = 0;
    socket.on(‘dataSet’, function (data) {
    console.log(“DATA ” + data + ‘ item #’ + ++counter);
    if (data) {
    var dataArr = data.split(” “);
    //debugger;

    var eegValue = dataArr[1];
    var nirsValue = dataArr[3];
    var stateValue = dataArr[4];
    var stateProb = dataArr[6];
    var resultState = 0;
    var resultProbability = 0;
    if (dataArr[0] == “Neg”)
    eegValue = eegValue * (-1);
    //eegValue = eegValue *1;
    if (dataArr[2] == “Neg”)
    nirsValue = nirsValue * (-1);

    if (dataArr[5] == “Neg”)
    stateProb = stateProb * (-1);

    //nirsValue = nirsValue * 1;
    if (stateValue == 1 && dataArr[5] == “Neg”)
    resultState = 0;

    else if (stateValue == 1 && dataArr[5] == “Pos”)
    resultState = 1;
    else
    resultState = lastState;
    lastState = resultState;
    // resultProbability = stateProb * 1;
    // if ( resultState == 0 )
    // resultProbability = resultProbability * -1;

    chart.push([
    {time: timestamp(), y: eegValue},
    {time: timestamp(), y: nirsValue},
    {time: timestamp(), y: stateProb}
    ]);

    if (lastState == 1) {
    $(“#head1”).removeClass(“face__standard”);
    $(“#head1”).removeClass(“face__sad”);
    $(“#head1”).addClass(‘face face__happy’);
    }
    else {
    if (lastState == 0) {
    $(“#head1”).removeClass(“face__happy”);
    $(“#head1”).removeClass(“face__standard”);
    $(“#head1”).addClass(“face face__sad”);
    }

    }
    }

    });

    };`

    #15260

    Suyash Singh
    Moderator

    @fbk,

    Please make sure that the chart options are passed in the format as required by CanvasJS and it should work fine.
    ___
    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.