How to add more than one Google chart on a page from the same Google spreadsheet but different range

Question

My Google Sheet Data Looks like this

I am trying to create a Dashboard with 2 Tables and a Line chart based on my data.

I managed to create a single table and Line chart earlier obtained from same data range, but I am having difficulties creating 2 different tables whose data source is from the same google sheet but different cell range.

Here is my Code.

Code 1

function doGet(e) {

  return HtmlService
    .createTemplateFromFile("Line Chart multiple Table")
    .evaluate()
    .setTitle("Google Spreadsheet Chart")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

function getSpreadsheetData() {

  var ssID = "1qkDFf4sYMgPZhGAoEf7vrXbBPmno6Tt4UT_zd5M8xLo";
  var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
  var data1 = sheet.getDataRange({A6: F16}).getValues();
  var data2 = sheet.getDataRange({A1: F4}).getValues();
  var rows = {data1: data1,data2: data2};

  return rows;
}

Code 2

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="line"></div>
  <div id="table1"></div>
  <div id="table2"></div>

  <script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    
    google.charts.load('current', {'packages':['table']});
    
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function getSpreadsheetData() {
    google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
    
    }

    function drawChart(rows) {
    
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var options = {
        title: 'SPC Chart',
        legend: 'none',
        chartArea: {
          width: '60%'
        },
        vAxis: {
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 12
          }
        }
      };

      
      var chart = new google.visualization.LineChart(document.getElementById("line"));
      chart.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'});
      
      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});

    }
  </script>
</body>

</html>

I am quite new and unsure on how to proceed.

Sai Ram · Accepted Answer · 2018-12-11T07:55:03.933

The following code helped me to achieve what i wanted.

Code 1

function doGet(e) {
  
  return HtmlService
  .createTemplateFromFile("Line Chart multiple Table")
  .evaluate()
  .setTitle("Google Spreadsheet Chart")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

function getSpreadsheetData() {
  
  var ssID  = "1qkDFf4sYMgPZhGAoEf7vrXbBPmno6Tt4UT_zd5M8xLo";
  var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
  var data2 = sheet.getRange('A1:F5').getValues();
  var firstrow = 6; // 6th row
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
  var data1 = range.getValues();
  //var data1 = sheet.getRange('A6:F15').getValues();
  rows   = {data1: data1, data2: data2};

  return rows;

Code 2

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="line"></div>
  <div id="table1"></div>
  <div id="table2"></div>

  <script>
    google.charts.load('current', {'packages':['table']});
    
    google.charts.load('current', {packages: ['corechart', 'line']});
     
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function getSpreadsheetData() {
    google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
    
    }

    function drawChart(rows) {
    
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);
      
      
      var options = {
        title: 'SPC Chart',
        legend: 'none',
        chartArea: {
          width: '60%'
        },
        vAxis: {
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 12
          }
        }
      };

      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});
      
      var chart = new google.visualization.LineChart(document.getElementById("line"));
      chart.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'});
      
      

    }
  </script>
</body>

</html>

How to add more than one Google chart on a page from the same Google spreadsheet but different range

1 Answers1