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

}
}

});

};`

[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

[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

[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

[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

[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

[fbk]

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

[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

[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

[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

[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

[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

[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

[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&#8217;, “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&#8217;,”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

[fbk]

hi thanks
but its not working the fiddle