Home forums Using CanvasJS Sockets.io with canvasjs Reply To: Sockets.io with 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”);
}

}
}

});

};`