On load my web app is producing this error:
DataTables warning: table id=data-table - Requested unknown parameter '9' for row 21, column 9. For more information about this error, please see http://datatables.net/tn/4
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData(){
var spreadSheetId = "1VzHY8fTq8OsXhpHYHESSSPxeVNOnqxpjcsyWJpbuEOs"; //CHANGE
var dataRange = "Base Stats!A2:L"; //CHANGE
var range = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
var values = range.values;
return values;
}
//INCLUDE JAVASCRIPT AND CSS FILES
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('JavaScript'); ?> <!--INCLUDE JavaScript.html FILE-->
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
<!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
</table>
</div>
</div>
</body>
</html>
JavaScript.html
<script>
/*
*THIS FUNCTION CALLS THE getData() FUNCTION IN THE Code.gs FILE,
*AND PASS RETURNED DATA TO showData() FUNCTION
*/
google.script.run.withSuccessHandler(showData).getData();
//THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
//CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
columns: [
{"title":"Date Added"},
{"title":"SpotRacer"},
{"title":"Brand"},
{"title":"Model"},
{"title":"Acceleration"},
{"title":"Speed (MPH)"},
{"title":"Speed (KPH)"},
{"title":"Handling (%)"},
{"title":"Star Rating"},
{"title":"Comments"},
{"title":"Score (Cumlative)"},
{"title":"Score (Weighted)"}
]
});
});
}
</script>
I'm not sure what is causing the error with that specific row and column, but perhaps has something to do with the column not displaying plain text? Column 9 is 'Star Rating'.
Google Sheet: SpotRacers Fanbase Database
In your script, Sheets.Spreadsheets.Values.get of Sheets API is used. In this case, the retrieved values are 2-dimensional array. But, for example, when all rows are not embedded by the cell values (for example, the 1st row has the values in the columns "A", "B", "C", and the 2nd row has the values in the columns "A" and "B".), the lengths of all rows are different. I'm worried about this situation. So, I thought that the reason for your issue might be due to this.
If my understanding of your current issue was correct, how about the following modification?
From:
function getData(){
var spreadSheetId = "###"; //CHANGE
var dataRange = "Base Stats!A2:L"; //CHANGE
var range = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
var values = range.values;
return values;
}
To:
function getData(){
var spreadSheetId = "###"; // Please set your Spreadsheet ID.
var sheet = SpreadsheetApp.openById(spreadSheetId).getSheetByName("Base Stats");
var values = sheet.getRange("A2:L" + sheet.getLastRow()).getDisplayValues();
return values;
}
In this modification, the values are retrieved using getDisplayValues(). And, the data is retrieved from the data range.
Note:
When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.
You can see the detail of this in the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".
Reference:
getDisplayValues()
I am trying to create a line chart of changes in prices every minute. I need to be able to pull the data from my site. I can't get the chart to load if I use datetime for the x axis.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "sampleData.json",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 480});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
I can create a chart using the following for sampleData.json:
{
"cols": [
{"id":"","label":"X","pattern":"","type":"string"},
{"id":"","label":"Line 1","pattern":"","type":"number"},
{"id":"","label":"Line 2","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"1","f":null},{"v":3,"f":null},{"v":4,"f":null}]},
{"c":[{"v":"2","f":null},{"v":1,"f":null},{"v":2,"f":null}]},
{"c":[{"v":"3","f":null},{"v":1,"f":null},{"v":3,"f":null}]},
{"c":[{"v":"4","f":null},{"v":1,"f":null},{"v":1,"f":null}]},
{"c":[{"v":"5","f":null},{"v":2,"f":null},{"v":5,"f":null}]}
]
}
But when I try to change x to a datetime, it won't load.
{
"cols": [
{"id":"","label":"X","pattern":"","type":"datetime"},
{"id":"","label":"Line 1","pattern":"","type":"number"},
{"id":"","label":"Line 2","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":new Date(2017,0,1,12,1),"f":null},{"v":3,"f":null},{"v":4,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,2),"f":null},{"v":1,"f":null},{"v":2,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,3),"f":null},{"v":1,"f":null},{"v":3,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,4),"f":null},{"v":1,"f":null},{"v":1,"f":null}]},
{"c":[{"v":new Date(2017,0,1,12,5),"f":null},{"v":2,"f":null},{"v":5,"f":null}]}
]
}
You should remove the new keyword when working with JSON.
From google charts:
https://developers.google.com/chart/interactive/docs/datesandtimes
"When serializing data using the JavaScript DataTable object literal notation to build your DataTable, the new Date() constructor cannot be used. Instead, Google Charts provides a Date string representation that allows your date or datetime to be serialized and parsed properly when creating a DataTable. This Date string format simply drops the new keyword and wraps the remaining expression in quotation marks:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
I am working on a webpage for a client. One of the requirements is that they are able to easily edit the pictures along with the items' descriptions on their gallery pages. I have a google sheet with item descriptions. I would like to pull these descriptions out of their cells and put them into <p> tags under the items' pictures. So far I have been able to get this to work with a single cell using code found in another question on this site:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Add your sheets url and range below
var spreadsheetUrl = "https://your sheets url here?range=A1";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
// getValue(rowIndex, columnIndex)
document.getElementById("test").innerHTML = dataTable.getValue(0, 0);
}
</script>
</head>
<body>
<p id="test"></p>
</body>
</html>
I am not sure how to expand this code to pull multiple cells to multiple ids for use in multiple <p> tags. I tried expanding it to multiple functions using the code below but with that code it ends up putting the data from B2 into the <p id="product2"> which should get the data from B3 and nothing in the <p id="product1"> which should get the B2 data.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Add your sheets url and range below
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B2";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
// getValue(rowIndex, columnIndex)
document.getElementById("product1").innerHTML = dataTable.getValue(0, 0);
}
function drawChart2() {
// Add your sheets url and range below
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B3";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
// getValue(rowIndex, columnIndex)
document.getElementById("product2").innerHTML = dataTable.getValue(0, 0);
}
</script>
</head>
<body>
<p id="product1" align="center"></p>
<p id="product2" align="center"></p>
</body>
dataTable.getValue(0, 0); gets the value at row 0, column 0 in current range which seems to be only B2.
First get the range required
function drawChart() {
// get B2:B10
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B2:B10";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}
Update as required. See range reference
Iterate over these values, and you can set the product descriptions as such:
function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// the rows and columns are 0 indexed
// first row
document.getElementById("product1").innerHTML = dataTable.getValue(0, 0);
// second row
document.getElementById("product2").innerHTML = dataTable.getValue(1, 0);
}
you do not need to call drawChart2 as you do not need to fetch the data again, and you also do not need a second handleQueryResponse
Using the example code from the tutorial:
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv2"
style="width:500px; height:300px;"></div>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"temperatures.csv", // path to CSV file
{} // options
);
</script>
</body>
</html>
I'd like to load only the last 10 lines from temperatures.csv instead of the whole file. Can I pass an instruction to the dygraphs' csv parser to do this?
There is no such option to set limit or/and offset according to source code https://github.com/danvk/dygraphs/blob/master/dygraph.js#L2942
But you can override function Dygraph.prototype.parseCSV_ in your code to achieve this.
For example like this:
// Save old function
var parseCSV_ = Dygraph.prototype.parseCSV_;
Dygraph.prototype.parseCSV_ = function(data) {
// Get all data
var ret = parseCSV_(data);
// Return only last 10 items
return ret.slice(ret.length - 10);
};
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"temperatures.csv", // path to CSV file
{} // options
);
P.S. I'd recommend you to use new CSV file with only last 10 items to speed up loading, so generate it on back end if it is possible.
I uploaded the following index.html file for a subdomain and it isn't properly loading. It only shows the title tag.
I want it to load when I go to xxx.myapp.com. The setup is ok on godaddy because I see the title, but the rest of the page doesn't render. Also I see the network requests on the server bit nothing...
Any thoughts?
<!DOCTYPE html>
<html>
<head>
<title>MI Testing title</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.myapp.com/JS/HelperFunctions.js"></script>
<script type="text/javascript" src="http://www.myapp.com/JS/Settings.js"></script>
<!-- zurb foundation-->
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/foundation.css" />
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/foundation.min.css" />
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/normalize.css" />
<!--Local css -->
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/CSS/AnalyticsIndex.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);
/*
Called when library loaded
*/
function drawCharts(){
drawDailyAverageSessionLength();
drawUsersGender();
}
/*
Draws the chart for average session length by day
*/
function drawDailyAverageSessionLength() {
//Apit to get the data from
var api = GET_AVG_SESSIONS_URL+"2013/0/0";
//Request data (using jquery/ajax)
$.getJSON(api,function(data){
//Start a days and seconds array
var days = [];
var seconds = [];
//Init google data array
var googData = new google.visualization.DataTable();
//Add X Y columns
googData.addColumn('string', 'days');
googData.addColumn('number', 'seconds');
//Init sort array
var sorted =[];
//Parse the results to get the dates
for (var key in data){
var date = new Date(key);
sorted.push(date);
}
//Sort the array
sorted.sort(sortDateArrayDescending);
//Split results
for (i=0;i<sorted.length;i++){
//Get the date object
var day = sorted[i];
//Add 1 to month
var month = day.getMonth()+1;
//Parse to string
var newKey = day.getFullYear()+'-'+month+'-'+day.getDate();
var short = month+'/'+day.getDate();
//Add date to days array
days.push(short);
//Add to integer array
seconds.push(parseInt(data[newKey]));
}
//Parse to google data
for (i=0; i<days.length;i++){
googData.addRow([days[i], seconds[i]]);
}
// Set chart options
var options = {'title':'Average session length (NOT ACCURATE since end of sessions aren\'t being tracked)',
'width':1200,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('averageSessionLengthChart'));
chart.draw(googData, options);
});
}
/*
Draws the chart for average session length by day
*/
function drawUsersGender() {
//Apit to get the data from
var api = GET_USERS_SEX;
//Request data (using jquery/ajax)
$.getJSON(api,function(data){
//Start a days and seconds array
var result = [['gender', 'number']];
//Iterate over the genders
for (var gender in data){
//Get the value pair and push
var entry = [gender, parseInt(data[gender])];
result.push(entry);
}
//Parse to google data
var data = google.visualization.arrayToDataTable(result);
//Display options
var options = {
title:'Gender for registered users',
'width':600,
'height':400
};
//Draw the chart
var chart = new google.visualization.PieChart(document.getElementById('genderChart'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<div class="row">
<div id = "averageSessionLengthChart" class="large-12 small-12 columns">
</div>
</div>
<div class="row">
<div id = "genderChart" class="large-12 small-12 columns">
</div>
</div>
</body>
</html>
Try a developper console from a PC outside your network to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox).
There should be a "Network" tab that shows what requests are made from the page.
Maybe it will help you understand what is happening.