Clear data for JavaScript

294 views
Skip to first unread message

Marlon

unread,
Apr 10, 2012, 8:32:33 AM4/10/12
to Google Visualization API
hello, I'm using JavaScript to play the data in a div as parameters to
plot. But if I try to put two charts on the same HTML does not work.

How do I use or how clearChart do this work.

Code is presented below:

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart()
{
// Pegando os dados da div - Tudo vem daqui
var dados =
document.getElementById('chart_div').innerHTML;

// Colunas do inicio até |
var colunas = dados.substring(0, dados.indexOf('|'));
// Ajustando os dados gerais
dados = dados.substring(dados.indexOf('|') + 1);
// Valores do gráfico até ||
var valores = dados.substring(0, dados.indexOf('||'));
// Ajustando os dados gerais
dados = dados.substring(dados.indexOf('||') + 2);

var titulo = dados;

var data = new google.visualization.DataTable();

data.clearChart;

var colunaTipo = '';
var colunaNome = '';

while (colunas.length > 0)
{
colunaTipo = colunas.substring(0, colunas.indexOf(';'));
colunas = colunas.substring(colunas.indexOf(';')+1);
colunaNome = colunas.substring(0, colunas.indexOf(';'));
colunas = colunas.substring(colunas.indexOf(';')
+1);

data.addColumn(colunaTipo, colunaNome)
}

// Create the data table.

//data.addColumn(colunaTipo, colunaNome);
//data.addColumn('string', 'Ano');
//data.addColumn('number', 'Total Acidente(s)');
while (colunas.length > 0)
{
colunaTipo = colunas.substring(0, colunas.indexOf(';'));
colunas = colunas.substring(colunas.indexOf(';')+1);
colunaNome = colunas.substring(0, colunas.indexOf(';'));
colunas = colunas.substring(colunas.indexOf(';')
+1);

data.addColumn(colunaTipo, colunaNome)
}

var valoresRotulo = '';
var valoresValor = '';

while (valores.length > 0)
{
valoresRotulo = valores.substring(0, valores.indexOf(';'));
valores = valores.substring(valores.indexOf(';')+1);
valoresValor = valores.substring(0, valores.indexOf(';'));
valores = valores.substring(valores.indexOf(';')
+1);
// Gerando os dados
data.addRows([ [valoresRotulo, parseFloat(valoresValor)] ]);
}


// Set chart options
var options = {'title':titulo,
'width':400,
'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
//chart.getChart().clearChart()
chart.draw(data, options);

}
</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div">string;Ano;number;Total Acidente(s);|
2008;755980;2009;733365;2010;701496;||Acidentes de trabalho por ano</
div>
<div id="chart_div">string;Ano;number;Total Acidente(s);|Masculino;
755980;Femino;733365;||Acidentes de trabalho por sexo (2008-2010)</
div>
</body>
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:
755980,733365,701496&chs=340x200&chdl=2008|2009|2012&chco=67087b|
e3007a|00a8eb|79c471" alt="" />
</html>

asgallant

unread,
Apr 10, 2012, 10:27:17 AM4/10/12
to google-visua...@googlegroups.com
Your second "chart_div" needs to have a different id, as id's are unique to each element.  You then need to pull the data from the second div and run the same code on it, like this: http://jsfiddle.net/rm4fR/ 
Reply all
Reply to author
Forward
0 new messages