Use table from spreadsheet in google-visualization API - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Use table from spreadsheet in google-visualization API

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {/*from   w  w  w  . java2 s  .c  o  m*/
    var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/your id/edit#gid=0'
    );
    query.setQuery('SELECT A, B OFFSET 5'); //select specific cells from the table
    query.send(handleQueryResponse);
  }
  function handleQueryResponse(response) {
    if (response.isError()) {
      console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    var data = response.getDataTable();
    var options = {
      title: 'glue data from spreadsheet',
      height : 250,
    }
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options)
  }
  
      </script> 
   </head> 
   <body> 
      <div id="chart_div"></div>  
   </body>
</html>

Related Tutorials