Alimentando Gráfico JS+HTML dinamicamente

[rafael]

Não tenho idéia de como alimentar o gráfico (chartjs) dinamicamente

Quero que o gráfico atualize sozinho sem atualizar a página pegando dados do prisma
tipo assim:

Código Selecionar Expandir

enquanto verdadeiro inicio
a = sis.data(%S)
imprima(a) //aqui deveria passar o valor de "a" para o JS ou o navegador, não sei
sis.durma(5000)
fim


Já consegui algumas informações mas só dados gerados pelo próprio javascript:
http://jsbin.com/huyilagoli/edit?html,css,js,output

e dados estáticos pegos ao atualizar a página (mudar os valores ao atualizar a página é de boa, muito fácil):
https://www.sitepoint.com/fancy-responsive-charts-with-chart-js/

Alguém pode me ajudar?

[adalberto]

Rafael, no momento isto está além dos meus conhecimentos, se mais alguém souber sinta-se a vontade em responder.

Mas achei coisas interessantes que talvez possam te ajudar:

1 - https://pt.stackoverflow.com/questions/74258/receber-valores-do-php-json-no-javascript-para-gr%C3%A1ficos-chart-js

2 - https://webdesign.tutsplus.com/pt/tutorials/build-a-dynamic-dashboard-with-chartjs--webdesign-14363

3 - https://blog.vilourenco.com.br/como-montar-graficos-com-dados-dinamicos-em-html5-com-php-e-mysql/

Bem, o primeiro é um link de um post com a mesma questão, usando php + json. No seu caso, acho que o melhor caminho é usar Prisma + reg.pris, com saída em Html5 e javascript. (Se não me engano a lib reg.pris pode suprir a necessidade da lib json.);

Os dois últimos links são tutoriais em Português, a lógica é a mesma, basta tentar adaptar para os comandos Prisma.

Desculpe por apenas postar links, quando tiver um tempinho vou dar uma olhada melhor, viu.

Uma boa tática é ver como eles fazem isso em outras linguagens além do PHP, como Ruby, Python, e melhor ainda se tiver um tutorial Lua pois será preciso apenas traduzir os comandos e adaptar alguma ou outra coisa.

Falou, até mais.

[rafael]

Bem, eu também pensei em fazer o javascript ler um arquivo txt para apenas pegar o dado que eu quero.

Vou ver se consigo, por enquanto obrigado.

[adalberto]

Dê uma olhada nisso aqui também:

https://www.rgraph.net/canvas/docs/howto-use-ajax-to-update-your-charts.html

Sobre o Json, vc terá que usá-lo sim, pois é com ele que se tem acesso a dados direto do javascript, e é via js que é feito o update, pelo que vi.

[rafael]

Graças a Deus consegui!!!

PRIMEIRO:
salve um arquivo no formato json dentro da pasta que roda o servidor http:
teste.json

Código Selecionar Expandir


{"rede4":{"x":236,"y":20}}


coloque este código pra rodar na página e pegue os parâmetros que quiser:

Código Selecionar Expandir


var result="";
$.ajax({
url:"teste.json",
dataType: "json",
async: false, 
success:function(dados) {
result=dados;

}
   });

se quiser pegar o valor de x da rede4 no exemplo acima, é só usar result.rede4.x

Coloque este valor na parte que atualiza o grático

Anexo um exemplo

Coloque este canvas no seu código html para chamar.

Código Selecionar Expandir


<canvas id="trending-line-chart" height="108" width="468" style="width: 426px; height: 99px;"></canvas>