Sockets.io with canvasjs

[fbk]

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

[Suyash Singh]

@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

[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

[Suyash Singh]

@fbk,

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

___
Suyash Singh
Team CanvasJS

[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

[Suyash Singh]

@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

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

}
}

});

};`

[Suyash Singh]

@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