BOAT Lab Construction Budget

Reads data from a google sheet and displays as interactive treemap

by blorgggg

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div  id="chart_div"></div>
<p>
  Explore Item (Left Click)    |      Go Back (Left Click)
</p>

JavaScript

google.charts.load('current', {
        'packages': ['treemap']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var queryString = encodeURIComponent('range=A1:E5');
				var googlesheetURL = 'https://docs.google.com/spreadsheets/d/1krvGEbomUrbKTlgyyJDi2p-9AwAO5aYU-BVCjtQ7nck/edit#gid=0';
        
        var query = new google.visualization.Query(
          googlesheetURL + queryString);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' heyyy ' + response.getDetailedMessage());
          return;
        }
        var data = response.getDataTable();

        /* alert('these are your values:'+data.getColumnLabel(0)); */


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


        /*
        data.addColumn('string', 'ID');
        data.addColumn('string', 'Parent');
        data.addColumn('number', 'Number Of Lines');
        data.addRows([
          ['Shakespeare', null, 0],

          ['Comedies', 'Shakespeare', null],
          ['Tragedies', 'Shakespeare', null],
          ['Histories', 'Shakespeare', null],
          ['Juliet', 'Romeo And Juliet', 118],
          ['Lady Capulet', 'Romeo And Juliet', 45],
          ['Lady Montague', 'Romeo And Juliet', 2],
          ['Mercutio', 'Romeo And Juliet', 62],
          ['Montague', 'Romeo And Juliet', 10],
          ['Paris', 'Romeo And Juliet', 23],
          ['Peter (Servant to Juliet\'s Nurse)', 'Romeo And Juliet', 13],
          ['Prince Escalus', 'Romeo And Juliet', 16],
          ['Romeo', 'Romeo And Juliet', 163],
          ['Sampson', 'Romeo And Juliet', 20],
          ['Tybalt', 'Romeo And Juliet', 17]
        ]);
        */

        var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        var options = {
          highlightOnMouseOver: true,
          maxDepth: 2,
         ...