Introdução à Google Chart Tools
Veja neste artigo como criar gráficos usando a biblioteca Google Chart Tools, uma biblioteca simples porém muito poderosa com a qual podemos desenhar e interagir com diversos tipos de gráficos.
Artigos HTML e CSS Introdução à Google Chart Tools
Figura 1. Exemplos de gráficos criados com a Google Chart Tools
Listagem 1. Incorporando biblioteca
var chart = new google.visualization
Listagem 2. Desenhando o gráfico de torta
<div id="barras" style="width: 900px; height: 500px;"></div>
Listagem 3. desenhando gráficos Barras e Linhas
src='https://www.google.com/jsapi'></script>
Listagem 4. Desenhando a Tabela
Embora diferente dos outros exemplos no que diz respeito à importação do pacote table e no tipo de objeto array para armazenar os dados, ainda fica muito fácil de entender o desenrolar do código. Uma coisa interessante é no caso da segunda coluna ('number', 'Nota') que, como vocês podem ver, é um array que tem duas posições: uma para o valor "v:10" e outra para o texto formatado.
for(var i = 0; i < tam; i++){
//data.getFormattedValue(linha,coluna), para podermos obter o valor da célula
str += "Aluno: " + data.getFormattedValue(selection[i].row,0) + "; ";
Listagem 5. Manipulando evento select
Sobre o método getSelection, ele retorna um array dos itens selecionados (podemos selecionar mais de uma linha usando shift e ctrl), por isso precisamos varrê-lo com o for. Porém, não podemos acessar o valor diretamente, para isso usamos o método getFormattedValue que recebe o número da linha e coluna e retorna o valor da célula.