Created
June 2, 2010 13:05
-
-
Save dgmike/422333 to your computer and use it in GitHub Desktop.
Criando LineChart com o google Charts é fácil!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function drawVisualization() { | |
| // Create and populate the data table. | |
| var data = new google.visualization.DataTable(); | |
| data.addColumn('string', 'Ano'); | |
| data.addColumn('number', 'Visualizacoes'); | |
| // [ column, column, ... ] => row | |
| // column pode ser uma String/Int/Float/Date ou o seguinte objeto | |
| // { v: "", p : {} } => column, onde v = valor; p: properties | |
| // http://code.google.com/apis/visualization/documentation/reference.html#cell_object | |
| data.addRow([{v:"Jan", p:{dado_invisivel:'01/2010'}}, 10]); | |
| data.addRow([{v:"Fev", p:{dado_invisivel:'02/2010'}}, 20]); | |
| data.addRow([{v:"Mar", p:{dado_invisivel:'03/2010'}}, 40]); | |
| data.addRow([{v:"Abr", p:{dado_invisivel:'04/2010'}}, 80]); | |
| data.addRow([{v:"Mai", p:{dado_invisivel:'05/2010'}}, 70]); | |
| data.addRow([{v:"Jun", p:{dado_invisivel:'06/2010'}}, 70]); | |
| data.addRow([{v:"Jul", p:{dado_invisivel:'07/2010'}}, 80]); | |
| data.addRow([{v:"Ago", p:{dado_invisivel:'08/2010'}}, 40]); | |
| data.addRow([{v:"Set", p:{dado_invisivel:'09/2010'}}, 20]); | |
| data.addRow([{v:"Out", p:{dado_invisivel:'10/2010'}}, 30]); | |
| data.addRow([{v:"Nov", p:{dado_invisivel:'11/2010'}}, 30]); | |
| data.addRow([{v:"Dez", p:{dado_invisivel:'12/2010'}}, 37]); | |
| // Create and draw the visualization. | |
| table = new google.visualization.LineChart(document.getElementById('visualization')); | |
| table.draw(data, { title: 'Visualizacoes', | |
| width: 500, height: 400, | |
| legend: 'none', | |
| vAxis: {maxValue:100} | |
| } ); | |
| // Adicionando o evento de selecionar/click | |
| google.visualization.events.addListener(table, 'select', selectHandler); | |
| // Acao | |
| function selectHandler(e){ | |
| // getProperties pega os valores 'p' de | |
| // {v:"Dez", p:{dado_invisivel:'12/2010'}} | |
| // da coluna | |
| alert( data.getProperties(table.getSelection()[0].row, 0 ).dado_invisivel ) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Estou iniciando agora com o node, já sei desenvolver um CRUD porém neste uso o Mysql e quero que exiba no Google Charts pode me ajudar já tentei de todas as formos uma por exemplo foi essa que não é REST, ....
function drawChart() {
}// => mas aqui da um erro de fechamento
Vi que o melhor é criar uma API, to estudando bastante e testando porém, "abri" to pedindo ajuda.
Brigado!!