Currently i am facing difficulty creating Multiple Charts & Tables from
same spreadsheet but different range using the google app script.
Here is the image of my data source
[image: GOOGLE SHEET.PNG]
I managed to create multiple tables and charts with data source coming from
same spreadsheet different range but from the same column. Currently i have
a 3rd table which is from a different column in same spreadsheet which is
not getting published based on my code.
here is my code
code.gs
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 firstrow = 6; //11th row
var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow +
1, 6);
var data1 = range.getValues();
var data2 = sheet.getRange('A1:F5').getValues();
var data3 = sheet.getRange('H10:M16').getValues();
rows = {data1: data1, data2: data2, data3: data3};
return rows;
}
Line Chart multiple Table. HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js";></script>
</head>
<body>
<div id="lineoverall"></div>
<div id="table1"></div>
<div id="table2"></div>
<div id="table3"></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 data1 = google.visualization.arrayToDataTable(rows.data1, false);
var data2 = google.visualization.arrayToDataTable(rows.data2, false);
var data3 = google.visualization.arrayToDataTable(rows.data3, 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 chart1 = new
google.visualization.LineChart(document.getElementById("lineoverall"));
chart1.draw(data1, options);
var table1 = new
google.visualization.Table(document.getElementById("table1"));
table1.draw(data1, {showRowNumber: false, width: '50%', height:
'100%'});
var table3 = new
google.visualization.Table(document.getElementById("table3"));
table3.draw(data3, {showRowNumber: false, width: '50%', height:
'100%'});
}
</script>
</body>
</html>
not sure where my mistake is. i am quiet new to this scripting. Any help is
much appreciated.
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/6d4ba284-357e-48d0-8395-fa6151565553%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
