I have been trying to set up a dashboard with data from my google spreadsheet, using the HTML service. My code consists out of 4 different files;
- Main.gs ( consists out of doGet & getSsData )
- Index.html ( getContent from CSS and JS )
- StyleSheet.html
- JavaScript.html
When i execute my code and run it in the web application, it doesn't give me a dashboard but rather shows my raw code as output. (JS and CSS raw)
I've been searching different solutions such as this and this, but i could not make it work despite the solutions given there.
This is some of my code
main.gs
function doGet() {
var HTML = HtmlService.createTemplateFromFile("Index");
return HTML
.evaluate()
.setTitle('Dashboard demo')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getSpreadsheetData () {
var sheetId = ""
var data = SpreadsheetApp.openById(sheetId).getSheetByName("Leadverwerking").getDataRange().getValues();
Logger.log(data);
return (data.length > 1) ? data : null;
}
index
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src ="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
</head>
<body>
<div>
**content here**
</div>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
</body>
</html>
So i think it has something to do with the getContent function and the placement of this line of code, but i cannot figure out precisely what im doing wrong. Any ideas why it is not working ? Thankyou in advance!
EDIT
I've replaced my
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
with
<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>
And added a function in my main.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Now the webApp shows nothing at all.. but i guess the code is getting parsed ? Still no solution for the blank output.
Included JS
<script>
// Load the Visualization API and desired package
google.load("visualization", "1.0", {"packages":["controls"]});
$(function() {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(sendQuery);
});
function sendQuery() {
google.script.run
.withSuccesHandler(drawDashboard)
.withFailureHandler(function(msg) {
// Respond to failure conditions here.
$('#main-heading').text(msg);
$('#main-heading').addClass("error");
$('#error-message').show();
})
.getSpreadsheetData();
}
// Callback function to generate visualization using data in response parameter
function drawDashboard(response) {
$('#main-heading').addClass("hidden");
if(response == null) {
alert("Error: Invalid source data")
return;
}
else {
var data = google.visualization.arrayToDataTable(response,false);
var dashboard = new google.visualization.Dashboard(document.getElementsById("dashboard-div"));
var pieChart = new google.visualization.ChartWrapper ({
"chartType": "Piechart",
"containerId": "piechart-div",
// The pie chart will use the columns 'toelichting 1' and 'Beller'
// out of all the available ones.
'view" : { "columns": [1, 8]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var tlSlider = new google.visualization.ControlWrapper({
"controlType" : "NumberRangeFilter",
"containerId" : "slider-div",
"options": {
"filterColumnLabel": "Toelichting"
}
});
var beller = new google.visualization.ControlWrapper({
"controlType": "CategoryFilter",
"containerId": "selector-div",
"options": {
"filterColumnLabel": "Beller"
}
});
// afhankelijkheden opzetten tussen charts en controls
dashboard.bind(tlSlider, [pieChart,table]);
dashboard.bind(beller, [pieChart,table]);
// draw alle visualizations in het dashboard
dashboard.draw(data);
}
}
</script>
Included CSS
<!DOCTYPE html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.result-display {
margin-left: 15 px;
font-size: 125%;
}
.error {
color: #FF0000;
}
.hidden {
display: none;
}
.google-visualization-controls-label {
margin-left: 20px;
}
#dashboard-div {
width: 800px;
}
#control-div {
margin: 70px;
}
#charts-div {
margin: 10px;
}
#slider-div {
float:left;
}
#selector-div {
}
#piechart-div {
width: 50%;
height: 250px;
float:left;
}
#table-div {
width: 50%;
float:right;
}
</style>
Loading...
, which is correct i guess.. But no charts or anything – MisterDoesntKnowAnything Apr 03 '18 at 14:14