I have a question! I have a voting system, which has a page that shows the live results of the vote, this page uses to show the charts and Google Charts background has an ajax code that runs every 1 second, which is always going to the file .xml search the voting data, but whenever you update with a slight wink in the graphic, and I believe that there is this wink when there are updates on the number of votes!
Can anyone help me solve this problem?
Code js:
window.setInterval(ajax, 1000);
function ajax() {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var res = ajax.responseXML;
var xml = this;
var votos1 = res.getElementsByTagName("votos")[0].firstChild.nodeValue;
var votos2 = res.getElementsByTagName("votos")[1].firstChild.nodeValue;
var votos3 = res.getElementsByTagName("votos")[2].firstChild.nodeValue;
var votos4 = res.getElementsByTagName("votos")[3].firstChild.nodeValue;
grafico(votos1, votos2, votos3, votos4);
}
}
ajax.open("POST", "votos.xml");
ajax.send(null);
}
function grafico(votos1, votos2, votos3, votos4){
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Numero de Votos'],
['Opção 1', votos1],
['Opção 2', votos2],
['Opção 3', votos3],
['Opção 4', votos4]
]);
var options = {
chart: {
title: 'Total Votações',
subtitle: 'Ajuda: Publico',
},
bars: 'vertical'
};
var chart = new google.charts.Bar(document.getElementById('grafico'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
XML structure:
<geral>
<opcao1>
<votos>5</votos>
<correta>true</correta>
</opcao1>
<opcao2>
<votos>10</votos>
<correta>false</correta>
</opcao2>
<opcao3>
<votos>1</votos>
<correta>false</correta>
</opcao3>
<opcao4>
<votos>20</votos>
<correta>false</correta>
</opcao4>
</geral>