dgmike
6/2/2010 - 1:05 PM

Criando LineChart com o google Charts é fácil!

Criando LineChart com o google Charts é fácil!

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 )
  }
}​