You must be logged in to post your query.
Home › Forums › Chart Support › How can I plot values from .txt file ?
Hi guy, really need some good hands here !!!
I got a file with all data I need inside, I saved it as the text file, Ex : testgraph.txt
How can I plot those data, X axis will be set with 1,2,3,4…., Y axis will be set with values from the text file.
Need help !!!
Thanks a lot & I really appreciate :)
The text file’s values :
192
20
131
38
84
112
1234
3421
1241
2314
Why it doesn’t work ?
<!DOCTYPE html>
<?PHP
$file_handle = fopen("testgraph.txt", "r");
while (!feof($file_handle) ) {
$line_of_text = fgets($file_handle);
$parts = explode(' ', $line_of_text);
//print $parts[0]. "<BR>";
// $parts[0]. $parts[1].
}
fclose($file_handle);
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Generating DataPoints in a loop - jsFiddle demo by anjalij</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var limit = 100; //increase number of dataPoints by increasing this
var y = 0;
var x=0;
var data = []; var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
y = <?php echo $parts[i] ?>;
dataPoints.push({
x: i,
y: y
});
x+= 0.25;
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
title:{
text: "Generating DataPoints in a loop"
},
axisX:{
//minimum: 0,
//maximum: 300 ,
valueFormatString:"0.00"
},
data: data,
});
chart.render();
}//]]>
</script>
</head>
<body>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
My .txt file is here :
http://ladykillernicky.uni.me/testgraph.txt
Hi,
From what I can see you are trying to parse text file on the server side which is not required – we can do it on the client side itself. At the same time you have included PHP code inside javascript loop which will not work.
<?php echo $parts[i] ?>
Here is an example that I have created which parses your text file on the client side.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];
//Replace text file's path according to your requirement.
$.get("testgraph.txt", function(data) {
var x = 0;
var allLines = data.split('\n');
if(allLines.length > 0) {
for(var i=0; i< allLines.length; i++) {
dataPoints.push({x: x , y: parseInt(allLines[i])});
x += .25;
}
}
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Chart using Text File Data"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
chart.render();
});
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
—
Anjali
Thank you so so much for helping me out, I have had some roughly day to deal with this problem. May be all I need now to have some extra function such as zoom or scale to analyze the graph more easier.
Thank you with all shining stars above the sky !!! ^^
By the way, I’ve been wondering that, why my .txt file just have a few numbers as the link I posted above but the code I used from you finally plo a lot of points, looks like it repeatedly do it again the whole number of values
inside the .txt file. Please look at this link and you will know what I wanna say :
http://ladykillernicky.uni.me/graph.php
I’m using Firefox and Chrome to check them out but it shows the same results !!!
I know what the things came wrong i< allLines.length, but I can’t solve this problem.
The text file that you provided is testgraph.txt and the one that you using in above page is testECG.txt which has values that are repeating.
—
Sunil Urs
hi all,
i want to read a text file with information being updated every second and display it in a html bar graph (with a single bar) x-axis is the time and y-axis the frequency – i’ve been looking around to find a solution, tried a few codes from others but it didnt work, can someone help me please its got to be a web based technology html/jscript etc. Im totally a novice in this and your kind help would be great
thanks
@fbk,
Can you please provide us more information regarding the format of the dataPoints that you are storing in text file. Parsing the data stored in text file to the format accepted by CanvasJS should work fine in this case. For more information on retrieving data from a text file, please refer this stackoverflow thread.
___
Suyash Singh
Team CanvasJS
hi, thanks for reply
so the file is an outcome of MATLAB which when opens has two columns separated by space
and has about 20 entries..the file will be stored on same computer and is refreshed every 1sec.
from canvasJS threads i was able to come up with a solution to display randomly generated numbers in a graph but now its to be dealt with a file with real data.
looking forward for reply
thanks
@fbk,
Kindly refer this JSFiddle for an example on creating chart with data from text file.
The format of data used in text file (dataPoints.txt):
10 20
15 25
20 15
25 33
30 9
35 15
40 20
Also refer to this documentation page for more information on using date-time values in axisX.
___
Suyash Singh
Team CanvasJS
hi thanks
but thats not the case perhaps i described wrong
the file look like this (the first column is identifier that the value is positive or negative) and the second column
with actual value:
pos 0.20
neg 0.17
neg 0.43
pos 0.13
pos 0.27
neg 0.19
neg 0.49
pos 0.12
. .
. .
so on to about 20 entries – i know how to put time on x-axis(referenced from another tutorial)
and display its graph however with randomly generated numbers but not from a file.
thanks
hi thanks
but its not working the fiddle
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
Seems like the jsfiddle is working fine.
You need to create a text file say dataPoints.txt
with the content as shown below, browse it using the Choose File
input and click Open
.
pos 0.20
neg 0.17
neg 0.43
pos 0.13
pos 0.27
neg 0.19
neg 0.49
pos 0.12
If you are still facing any issue kindly reproduce the same in jsfiddle so that we can look into the issue and help you better.
___
Suyash Singh
Team CanvasJS
You must be logged in to reply to this topic.