I call updateChart(d) functions via ajax and pass new data.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var chart;
var dataTable;
var options;
var i = 1;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
dataTable = google.visualization.arrayToDataTable([
['Amplitude', 'time'],
['0', 0]
]);
options = {
title: '',
curveType: 'function',
legend: { position: 'bottom' }
};
chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(dataTable, options);
}
function updateChart(d) {
i++;
dataTable.setValue(i, d); // Вот тут
chart.draw(dataTable, options);
}
</script>
When I try to add the next value for the chart, it throws an error:
Uncaught Error: Invalid row index 2. Should be in the range [0-0]
I did not find any solutions on the Internet (This is for a robot, it swears that there is not enough text).
function updateChart(d) {
i++;
console.log(i+"======"+d);
//data.setValue(i,1,d);
data.addRow([String(i), Number(d)]);
chart.draw(data, options);
}
It is just a simple script project that is supposed to create a pie chart from the data in a spreadsheet. I had it working when I built the DataTable within the HTML file, but I tried to adjust it with a query in order to pull the data from a spreadsheet and make the dashboard dynamic with changes to the spreadsheet.
Whenever I deploy it however, it just shows up as a blank screen. Any help/thoughts is appreciated! I will get it eventually...
HTML File Code:
<html>
<head>
<!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
}
// Send the query with a callback function.
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
//enter alert on user screen when clicking on section of chart
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
JS File Code:
function doGet() {
return HtmlService.createHtmlOutputFromFile('webappchartv2');
}
Missing query.send(handleQueryResponse);
setOnLoadCallback is not set properly
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
query.send(handleQueryResponse);
}
...
In my home.scala.html page's head I have a comprehensive javascript to call a google chart, using a map passed from scala using the java play framework.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'xVariable');
data.addColumn('number', 'yVariable');
var mapVariable = #mapFromScala;
console.log("Hello world");
for (var mapKey in mapVariable) {
data.addRows([
[new Date(mapKey) , mapVariable[mapKey]]
]);
}
var options = {
chart: {
title: 'This is my map',
subtitle: 'it has a subtitle'
},
width: 1000,
height: 600
};
var chart = new google.charts.Line(document.getElementById('chartId'));
chart.draw(data, options);
}
</script>
and in body
<div id="chartId"></div>
Why don't I get anything back? Even the 'Hello world' console.log doesn't seem to show in SBT console.
The map variable must be brought in as a String. JSON can be used for this but
var mapVariable = "#mapFromScala"
Also works, although the process to convert from String back into a Map is inelegant.
This process is described here, except the data types are different and
data.addRows([[xVariable, yVariable]])
is invoked instead of
jsArray.xVariable = yVariable;
I have this js:
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(loadData);
function loadData() {
$.get({link loadData!}, function (results) {
drawChart(results);
});
}
function drawChart(results){
var data = new google.visualization.DataTable();
...get some data etc...
chart.draw(data, options);
}
</script>
and i like to change chart type using ajax. I can redraw js and html code, but function loadData() doesn't start again. How can i fix it?
Run loadData() without google.setOnLoadCallback() resolved this problem
I get the error "google is not defined", from my google script that creates a table using google.visualization.
How do you add a reference to a google script, and if I get it to run in scripts will I also have to add it to my google site? I'll put my script below.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
function doGet() {
drawTable()
}
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(1);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
Apps Script uses JavaScript as it's server side code. Originally, JavaScript was designed as a language to run in the browser (on the users computer). JavaScript in an HTML file, won't run the JavaScript on Google's servers.
In the script editor, you can create two types of files:
Script
HTML
doGet() can only be used in a .gs script file. You can't use it in HTML JavaScript.
Your Code.gs file should have some code that looks like this:
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
};
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
Then you need an HTML file.
index.html
<div id="EntireSite">
<div>
body
<?!= include('Chart'); ?>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
My Footer
</div>
<div style="background: brown">
<br>
<br>
<br>
<br>
</div>
</div>
In this example, you need a second HTML file for the chart:
Chart.html
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333', ],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ]
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
bar: {groupWidth: '95%'},
legend: 'none',
};
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);
chart.draw(data, options);
}
</script>
<div id='chart_div'></div>
Firstly, it seems that you are missing <script> tags around the JavaScript functions that follow the reference to the google.com/jsapi.
Also you need to call the following function to load the appropriate "package".
google.load('visualization', '1.0', {'packages':['table']});
And this function to call drawTable()
google.setOnLoadCallback(drawTable);
Assuming that you are embedding the script within a HTML page, the complete page would look something like:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the table package.
google.load('visualization', '1.0', {'packages':['table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(1);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
My answer is based on documentation found here: https://developers.google.com/chart/interactive/docs/gallery/table