Home forums Using CanvasJS How can I plot values from .txt file ? Reply To: How can I plot values from .txt file ?

#14787

fbk
Member

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