Verwendung Tabelle aus Tabelle in Google-Visualisierung API

Normalerweise habe ich Daten in einer Google-Tabelle und ich möchte sie mit Google-Visualisierung API darstellen.
Ich versuche, den Code von zwei Beispielen zu reproduzieren, aber ich scheiterte.
Beispiel 1: das datatables and dataview docs
Beispiel 2: die how to use google spreadsheets docs
Verwendung Tabelle aus Tabelle in Google-Visualisierung API

<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

    google.charts.load('current', {packages: ['corechart', 'bar']}); 
    google.charts.setOnLoadCallback(drawBasic); 

    function drawBasic() { 

    function drawGID() { 
    var queryString = encodeURIComponent('SELECT A, B'); 
    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq=' + queryString); 
     query.send(handleQueryResponse); 
    } 

    function handleQueryResponse(response) { 
     if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
     } 

     var data = reponse.getDataTable(); 

     var options = { 
     title:'test',  
     } 

     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data,options) 
    } 
    } 

    </script> 
    </head> 
    <body> 
    <h1> will it works </h1> 
    <div id="chart_div"></div> 
    </body> 
</html>

Quelle

2016-09-14 mizolm

eine Funktion drawGID den Code Einwickeln und nie genannt, wird

dass entfernen ...

EDIT

geänderte url, mit setQuery auch,

zusätzlich einen Tippfehler gefunden ->var data = reponse.getDataTable();

reponse sollte response sein

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart', 'bar', 'table'] 
 
}); 
 

 
function drawBasic() { 
 
    var query = new google.visualization.Query(
 
    'https://docs.google.com/spreadsheets/d/1FzvV_rh81koInXeZp6LfXmZb6YGwKDB3CU20RdVOfjc/edit#gid=0' 
 
); 
 
    query.setQuery('SELECT A, B'); 
 
    query.send(handleQueryResponse); 
 
} 
 

 
function handleQueryResponse(response) { 
 
    if (response.isError()) { 
 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 

 
    var data = response.getDataTable(); 
 
    var options = { 
 
    title: 'test' 
 
    } 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options) 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Quelle

2016-09-14 21:47:28 WhiteHat

siehe __EDIT__ oben ... – WhiteHat

Dank! die 'set.Query' ist besser lesbar ... sorry für diesen Tippfehler – mizolm

Prost! froh zu helfen, ich hatte Probleme mit der URL - 'setQuery' ermöglicht es Ihnen, die gleiche URL wie beim Anzeigen der Tabelle in einem Browser zu kopieren ... – WhiteHat

Hier ist der Code, der folgt w die quick start example innerhalb der Google-Diagramm-API-Dokumente. Es gibt andere Lösungen, aber diese ist gut lesbar.
Achten Sie darauf, bis zum Ende der URL-Tabellen (edit#gid=0) und die google query langage für die Syntax von query.setQuery

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/edit#gid=0' 
    ); 
    query.setQuery('SELECT A, B OFFSET 5'); //select specific cells from the table 
    query.send(handleQueryResponse); 
    } 

    function handleQueryResponse(response) { 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
    } 

    var data = response.getDataTable(); 
    var options = { 
     title: 'glue data from spreadsheet', 
     height : 250, 
    } 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options) 
    } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

Quelle

2016-09-15 10:24:45 mizolm

Verwendung Tabelle aus Tabelle in Google-Visualisierung API

Antwort

Verwandte Themen