Projects

by stephan00

HTML

<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <div id="chart_div" style="width: 1440px; height: 800px;"></div>

JavaScript

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

function drawSheetName() {
			 var queryString = encodeURIComponent('A:D');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1MQ_joEixO8Atn0z-NWYWrgVPaFuj_rGPn2mny4EdFlk/edit#gid=0' + queryString);
      query.send(handleQueryResponse);
    

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      
      var data = response.getDataTable();
      var chart = new google.visualization.TreeMap(document.getElementById('chart_div'));
      chart.draw(data, null);
      
      var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        var options = {
          maxDepth: 1,
        	minColor: '#f00',
        	midColor: '#e7711c',
        	maxColor: '#0d0',
    			showScale: true,
          headerHeight: 50,
          fontColor: '#ffffff',
          fontSize: '13',
          headerColor: '#0000FF',
          showScale: true,
    			generateTooltip: showFullTooltip
  				};
          
        tree.draw(data, options);

 function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' + '<b>' + 'Progress: ' + '</b>' + (Math.round(value * 100)) + '% completed' + '<br>' + '<br>' + '<span style="font-size:11px">' + 'Click <a href="https://docs.google.com/spreadsheets/d/1MQ_joEixO8Atn0z-NWYWrgVPaFuj_rGPn2mny4EdFlk/edit#gid=0" target="_blank">here</a> to add/edit project information.</span></div>';}
			
      }
      }