Вставьте диаграмму google в HTML-страницу. Сценарий Google Apps

Это вопрос. Я пытаюсь создать htmloutput с диаграммой и вставить ее на сайт google. Код работает нормально, но я не знаю, как изменить данные диаграммы и вместо этого поставить переменные данных. Код:Вставьте диаграмму google в HTML-страницу. Сценарий Google Apps

code.gs

function doGet() { 
return HtmlService 
    .createTemplateFromFile('index') 
    .evaluate(); 
} 

function getData() { 
var ss =SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4'); 
var sheet = ss.getSheetByName("DATOS"); 
var hojanotas = ss.getSheetByName("NOTAS"); 
var last = sheet.getLastRow(); 
var datanotas = hojanotas.getDataRange().getValues(); 
var datas = sheet.getDataRange(); 
var lastnotas = hojanotas.getLastRow(); 
var datos = datas.getValues(); 
var email = Session.getActiveUser().getEmail(); 
var emaile = email.toString(); 
Logger.log(datos); 
Logger.log(emaile); 
    for (var i = 0; i < last; i++){ 
    var alumno = datos[i][0]; 
    var user = datos[i][3]; 

    Logger.log(alumno); 
    Logger.log(user); 


    if(emaile == user){ 
     for(var j = 2; j< lastnotas; j++){ 
     var student = datanotas[j][0]; 
     if(student == alumno){ 
      var data = hojanotas.getRange(j+1, 1, 1, 11).getValues(); 
      Logger.log(student); 
      Logger.log(data); 


    }}}} 
var hojasalida = ss.getSheetByName("SALIDA").getRange(3,1,1,11).setValues(data); 

    }

и index.html

<html> 
<head> 
<body> 

<style>.header{background:lightblue} 
td{border-top:solid black 2px} .corner{border:0} 
td{font-size:12px} 
tr{font-size:12px} 
div{font-size:24px}</style> 
<? var B3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("B3").getValue(); 
var C3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("C3").getValue(); 
var D3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("D3").getValue(); 
var E3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("E3").getValue(); 
var F3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("F3").getValue(); 
var G3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("G3").getValue(); 
var H3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("H3").getValue(); 
var I3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("I3").getValue(); 
var B33 = parseInt(B3); 

?> 


<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Asignatura', 'Anterior', 'Esta semana'], 
     ['Matemáticas', <?=B3?>,  6], 
     ['Lengua', 6,  5], 
     ['Naturales', 5,  6], 
     ['Inglés', 7,  7] 
    ]); 

    var options = { 

     title: 'Notas del Alumno', 
     vAxis: {title: 'Asignaturas', titleTextStyle: {color: 'black'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 

    chart.draw(data, options); 
    } 
</script> 

<? var data = SpreadsheetApp 
.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4') 
.getSheetByName("SALIDA") 
.getDataRange() 
.getValues(); 
var alumno = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("A3").getValue(); 
?> 
<div><?= alumno ?></div> 
<table width="600" border="1" align="center"> 

<caption> 
Notas del Alumno 
</caption> 
<? for (var i = 0; i < data.length; i++) { ?> 
<tr> 

    <? for (var j = 0; j < data[i].length; j++) { ?> 
    <td width="80" ><?= data[i][j] ?></td> 
    <? } ?> 
</tr> 
<? } ?> 
</table> 
</head> 



<div id="chart_div" style="width: 900px; height: 500px;"></div>

Таким образом, в части "функции DrawChart() {" в HTML часть и т. д., нужно называть некоторые переменные вместо данных. Я попытался с помощью scriplet, но он не работает. В нем говорится: «ось № 0 не может быть строкой» или что-то подобное

Спасибо.

источник

2014-12-12 Mario Moreno González

Я думаю, что эта линия имеет проблемы:

<div><?= alumno ?></div>

Что, что скриптлет пытается сделать, это вызвать функцию в файле с именем .gsalumno. Кроме того, если вы пытаетесь вызвать функцию с именем alumno, он должен был бы быть таким:

<div><?= alumno(); ?></div>

Если вы хотите, чтобы ввести значение переменной alumno в этот сНу тег, вам необходимо запустить некоторые JavaScript когда HTML загружается.

window.onload=function(){ 
    console.log("This onload did run"); 
    if (alumno != "") { 
    document.getElementById('idAlumno').textContent = alumno; 
    }; 
};

Посмотрите на инструменты разработчика в вашем браузере, и откройте консоль браузера, чтобы увидеть, если есть какие-либо ошибки. Может быть несвязанная ошибка, которая убивает ваш HTML-рендеринг, прежде чем он попадет в таблицу.

источник

2014-12-13 01:54:16

Вставьте диаграмму google в HTML-страницу. Сценарий Google Apps

ответ

Смежные вопросы