Es solo un proyecto de script simple que se supone que crea un gráfico circular a partir de los datos en una hoja de cálculo. Lo tenía funcionando cuando construí DataTable dentro del archivo HTML, pero traté de ajustarlo con una consulta para extraer los datos de una hoja de cálculo y hacer que el tablero sea dinámico con cambios en la hoja de cálculo.
Sin embargo, cada vez que lo implemento, solo aparece como una pantalla en blanco. ¡Cualquier ayuda/pensamiento es apreciada! al final lo conseguire...
Código de archivo HTML:
<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>Código de archivo JS:
function doGet() { return HtmlService.createHtmlOutputFromFile('webappchartv2'); }query.send(handleQueryResponse);setOnLoadCallback no está configurado correctamente 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); } ...