Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

pedrotairum

[Resolvido] Gráfico Realtime com Flot

Mensagens Recomendadas

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!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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 :)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.