Olá malta, estou a usar o flot para fazer uns gráficos bonitos em Javascript.
Estou a tentar fazer a actualização do gráfico com valores vindos de um ficheiro .txt mas não está a funcionar. Ainda estou a aprender Javascript e pelo que li a melhor forma de ler a informação de um ficheiro é através de um XMlHttpRequest(); Depois faço um parseInt() para transformar a informação em int e o gráfico não me é desenhado. Se eu substituo a variável por um valor qualquer inteiro sem ser a que vem do ficheiro então o gráfico já traça, o problema é mesmo a leitura do ficheiro. Alguém me consegue ajudar a ver o que estou a fazer mal?
O código:
Código (Javascript):
Obrigado pela ajuda!
Estou a tentar fazer a actualização do gráfico com valores vindos de um ficheiro .txt mas não está a funcionar. Ainda estou a aprender Javascript e pelo que li a melhor forma de ler a informação de um ficheiro é através de um XMlHttpRequest(); Depois faço um parseInt() para transformar a informação em int e o gráfico não me é desenhado. Se eu substituo a variável por um valor qualquer inteiro sem ser a que vem do ficheiro então o gráfico já traça, o problema é mesmo a leitura do ficheiro. Alguém me consegue ajudar a ver o que estou a fazer mal?
O código:
Código (Javascript):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progressão de CS's</title>
<link href="flot/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
var data = [],
totalPoints = 100;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
var request = new XMLHttpRequest();
request.open('GET', 'file:///D:/userdata/p11silva/Desktop/teste.txt', false);
request.send();
var textFileContent = request.responseText
var cs = parseInt(textFileContent)
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = cs; //É nesta parte do código que se eu substituo o valor do CS por um valor inteiro e o gráfico traça.
if (y < 0) {
y = 0;
} else if (y > 150) {
y = 150;
}
data.push(y);
}
/*Flot code*/
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
var updateInterval = 100;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [getRandomData()], {
series: {
shadowSize: 5 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 150
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Real-time CS's update</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<!--<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>-->
</div>
<div id="footer">
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progressão de CS's</title>
<link href="flot/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
var data = [],
totalPoints = 100;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
var request = new XMLHttpRequest();
request.open('GET', 'file:///D:/userdata/p11silva/Desktop/teste.txt', false);
request.send();
var textFileContent = request.responseText
var cs = parseInt(textFileContent)
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = cs; //É nesta parte do código que se eu substituo o valor do CS por um valor inteiro e o gráfico traça.
if (y < 0) {
y = 0;
} else if (y > 150) {
y = 150;
}
data.push(y);
}
/*Flot code*/
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
var updateInterval = 100;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [getRandomData()], {
series: {
shadowSize: 5 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 150
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Real-time CS's update</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<!--<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>-->
</div>
<div id="footer">
</div>
</body>
</html>
Obrigado pela ajuda!