Forum Replies Created

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • in reply to: Sockets.io with canvasjs #15231

    fbk

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

    }
    }

    });

    };`

    in reply to: Sockets.io with canvasjs #15215

    fbk

    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

    in reply to: Sockets.io with canvasjs #15202

    fbk

    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

    in reply to: How can I plot values from .txt file ? #15195

    fbk

    hi again,
    i have an assignment to change the charting library from epoch charts to any other – which i decided to chose canvasjs – can anyone give me an example to it? however, the file is coming in from a local server and is being rendered via charting lirary – it has nodejs and sockets.io , since im new to it i dont know where to start from..
    any helpful comments appreciated
    thanks

    in reply to: How can I plot values from .txt file ? #14939

    fbk

    this is the text file..

    Neg 0.75 Pos 0.65 Neg 0.75
    Pos 0.63 Pos 0.74 Pos 0.74
    Pos 0.84 Pos 0.88 Pos 0.88
    Neg 0.54 Neg 0.57 Neg 0.57
    Pos 0.67 Pos 0.67 Pos 0.67
    Pos 0.83 Pos 0.89 Pos 0.83
    Neg 0.56 Neg 0.55 Neg 0.56
    Pos 0.68 Pos 0.60 Pos 0.68
    Neg 0.58 Neg 0.58 Neg 0.58
    Neg 0.74 Neg 0.64 Neg 0.74
    Pos 0.66 Pos 0.56 Pos 0.66
    Pos 0.89 Neg 0.94 Neg 0.94
    Neg 0.76 Neg 0.70 Neg 0.76
    Pos 0.67 Pos 0.69 Pos 0.69
    Neg 0.80 Neg 0.56 Neg 0.80
    Neg 0.78 Neg 0.87 Neg 0.87
    Neg 0.69 Neg 0.69 Neg 0.69
    Pos 0.88 Pos 0.84 Pos 0.88
    Neg 0.75 Neg 0.78 Neg 0.78
    Pos 0.66 Pos 0.64 Pos 0.66
    Pos 0.89 Pos 0.87 Pos 0.89
    Neg 0.77 Neg 0.75 Neg 0.77
    Neg 0.54 Neg 0.58 Neg 0.58
    Pos 0.57 Pos 0.58 Pos 0.58
    Neg 0.57 Neg 0.59 Neg 0.59
    Neg 0.58 Neg 0.54 Neg 0.58
    Pos 0.54 Pos 0.54 Pos 0.54
    Neg 0.56 Neg 0.59 Neg 0.59
    Neg 0.68 Neg 0.64 Neg 0.68
    Pos 0.75 Pos 0.74 Pos 0.75
    Neg 0.65 Neg 0.69 Neg 0.69
    Pos 0.58 Pos 0.59 Pos 0.59
    Neg 0.75 Neg 0.74 Neg 0.75

    in reply to: How can I plot values from .txt file ? #14938

    fbk

    hi all,
    thanks a lot specially Suyash for his kind help, Ok so now i have this running
    http://jsfiddle.net/a9ks2w43/45/ but what i want now is

    – it should read directly from the location the text file is placed in a local machine and user dont have to point it to open, as the file changes every 1sec and bring in new data
    i tried using ‘get’ but i think im not placing something right, as im new to it

    – how do i open this lower graph in a new browser window and not in this window
    I again tried some tutorials but i guess some expert help is needed here.

    help much appreciated
    thanks

    in reply to: How can I plot values from .txt file ? #14855

    fbk

    hi
    i got it :)) thanks a lott!
    best

    in reply to: How can I plot values from .txt file ? #14854

    fbk

    hi Suyash,
    so nice of you to respond back, however like i said its still managing to go row wise and not column wise. i.e. the display should be in graph
    neg .75 pos 0.65 neg0.80 and neg 0.54 however its displaying row wise in first set and it runs like this neg 0.75 pos 0.67 pos 0.65.
    this is what my code is also displaying so far – and am trying to find some help that could bring the required result.
    thanks a lot – looking forward, been a great help

    in reply to: How can I plot values from .txt file ? #14844

    fbk

    thanks Suyash!
    i had managed to traverse but unfortunately row wise
    am looking into what you suggested,
    the file has more than one columns like i mentioned

    Neg 0.75 Pos 0.65 Neg 0.75
    Pos 0.63 Pos 0.74 Pos 0.74
    Pos 0.84 Pos 0.88 Pos 0.88
    Neg 0.54 Neg 0.57 Neg 0.57
    Pos 0.67 Pos 0.67 Pos 0.67
    Pos 0.83 Pos 0.89 Pos 0.83
    Neg 0.56 Neg 0.55 Neg 0.56
    Pos 0.68 Pos 0.60 Pos 0.68
    Neg 0.58 Neg 0.58 Neg 0.58
    Neg 0.74 Neg 0.64 Neg 0.74

    but my code http://jsfiddle.net/a9ks2w43/16/ goes line by line and not column wise!!
    so its basically three graphs in one display
    with their corresponding neg and pos

    thanks for your suggestion am looking into it again

    in reply to: How can I plot values from .txt file ? #14837

    fbk

    dear all,
    your kind reply would be highly appreciated
    as mentioned earlier..

    1- i want to be able to read all of the text file with ‘pos’ or ‘neg’ string inside and plot its values on Yaxis
    right now its only doing the first column. however there are more than three columns.
    http://jsfiddle.net/a9ks2w43/5/ for reference

    apologies for constant bugging but i really am new to all of this
    thanks for help

    in reply to: How can I plot values from .txt file ? #14833

    fbk

    hi
    thanks to you the fiddle you referred worked after a few changes, i managed to work it out, great help 🙂
    however how to make it work for three columns of same type? please have a look whats going wrong
    http://jsfiddle.net/a9ks2w43/5/
    thanks in advance

    in reply to: How can I plot values from .txt file ? #14832

    fbk

    hi
    thanks to you the fiddle you referred worked after a few changes, i managed to work it out, great help :)
    however how to make it work for three columns of same type?
    thanks in advance

    in reply to: How can I plot values from .txt file ? #14820

    fbk

    hi
    thanks for your kind reply but
    – it doesnt display in my browser chrome (Version 57.0.2987.133 (64-bit)
    – however please see this https://jsfiddle.net/rsoom3j1/ its taking random numbers and displaying live line graph
    i just need to improvise on this and create a graph that would take inputs from file which has columns and display
    values in graph – first column tells if its neg or positive and second the value
    thanks a lot

    in reply to: How can I plot values from .txt file ? #14787

    fbk

    hi
    so nice of you to bear with me ..im a dummy as you can see
    anyway here is the whole code please let me know how can i start reading the file instead of random numbers and plot a graph using this code
    the file has following contents and is updated every second
    Neg 0.75
    Pos 0.63
    Pos 0.82
    Neg 0.54
    Pos 0.67
    Pos 0.83
    Neg 0.56
    Pos 0.68
    Neg 0.58
    Neg 0.71
    Pos 0.66
    Neg 0.89
    Neg 0.71
    Pos 0.63
    Neg 0.8
    Neg 0.71
    Neg 0.69
    Pos 0.88
    Neg 0.73
    Pos 0.61
    Pos 0.89
    Neg 0.72
    Neg 0.54
    Pos 0.53
    Neg 0.57
    Neg 0.58
    Pos 0.54
    Neg 0.56
    Neg 0.68
    Pos 0.75
    Neg 0.65
    Pos 0.53
    Neg 0.72
    END -999

    the code is as follows
    <!DOCTYPE HTML>
    <html>

    <head>
    <script type=”text/javascript”>
    window.onload = function () {

    // dataPoints
    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];

    var chart = new CanvasJS.Chart(“chartContainer”,{
    zoomEnabled: true,
    title: {
    text: “testing ”
    },
    toolTip: {
    shared: true

    },
    legend: {
    verticalAlign: “top”,
    horizontalAlign: “center”,
    fontSize: 14,
    fontWeight: “bold”,
    fontFamily: “calibri”,
    fontColor: “dimGrey”
    },
    axisX: {
    title: “RR @ 1 sec”
    },
    axisY:{
    prefix: ‘ ‘,
    includeZero: false
    },
    data: [{
    // dataSeries1
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “result1”,
    dataPoints: dataPoints1
    },
    {
    // dataSeries2
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “result2” ,
    dataPoints: dataPoints2
    },
    {
    // dataSeries3
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “Average” ,
    dataPoints: dataPoints3
    }],
    legend:{
    cursor:”pointer”,
    itemclick : function(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }
    }
    });

    var updateInterval = 1000;
    // initial value
    var yValue1 = 000;
    var yValue2 = 000;
    var yValue3 = 000;

    var time = new Date;
    /*time.setHours(9);
    */ /*time.setMinutes(30);*/
    time.setSeconds(00);
    time.setMilliseconds(00);
    // starting at 9.30 am

    var updateChart = function (count) {
    count = count || 1;

    // count is number of times loop runs to generate random dataPoints.

    for (var i = 0; i < count; i++) {

    // add interval duration to time
    time.setTime(time.getTime()+ updateInterval);

    // generating random values
    var deltaY1 = .5 + Math.random() *(-.5-.5);
    var deltaY2 = .5 + Math.random() *(-.5-.5);
    var deltaY3 = .5 + Math.random() *(-.5-.5);

    // adding random value and rounding it to two digits.
    yValue1 = Math.round((yValue1 + deltaY1)*100)/100;
    yValue2 = Math.round((yValue2 + deltaY2)*100)/100;
    yValue3 = Math.round((yValue3 + deltaY3)*100)/100;

    // pushing the new values
    dataPoints1.push({
    x: time.getTime(),
    y: yValue1
    });
    dataPoints2.push({
    x: time.getTime(),
    y: yValue2
    });
    dataPoints3.push({
    x: time.getTime(),
    y: (yValue1+yValue2)/2
    });
    };

    // updating legend text updated with y Value
    chart.options.data[0].legendText = ” result1 ” + yValue1;
    chart.options.data[1].legendText = ” result2 ” + yValue2;
    chart.options.data[2].legendText = ” Average ” + yValue3;

    chart.render();
    /* opens a smiley if positive and a sad smiley if negative value*/
    if(yValue3 > 0)
    {

    window.open(‘https://s-media-cache-ak0.pinimg.com/736x/4e/5c/f7/4e5cf7d4ccb9c59b6620a9c71944d51e.jpg’, “emowindow”,”width=400, height= 400″)
    } else if (yValue3 < 0)
    {
    window.open(‘https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055’,”emowindow”,”width=400, height= 400″)
    }
    };

    // generates first set of dataPoints
    updateChart(1000);

    // update chart after specified interval
    setInterval(function(){updateChart()}, updateInterval);
    }
    </script>
    <script type=”text/javascript” src= “script/canvasjs.min.js”></script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 500px; width: 60%;”>
    </div>
    </body>
    </html>

    i truly appreciate your kind efforts towards this!
    thanks in advance

    in reply to: How can I plot values from .txt file ? #14786

    fbk

    hi thanks
    but its not working the fiddle

Viewing 15 posts - 1 through 15 (of 18 total)