Jump to content
pedrotairum

[Resolvido] Gráfico Realtime com Flot

Recommended Posts

pedrotairum

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:

<!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>

Obrigado pela ajuda!

Share this post


Link to post
Share on other sites
pedrotairum

Já consegui resolver este problema.

O que fiz foi um pequeno código PHP para ir buscar a info ao ficheiro TXT e depois carregá-la então no gráfico.

Se mais alguém estiver interessado em usar o 'Flot Charts' e precisarem do código posso partilhar :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.