Mehrere Diagramme aus einem einzelnen Google-Tabellenblatt werden nicht angezeigt.

Question

Ich erstelle ein Dashboard mit Google Analytics-Daten mithilfe der Diagrammbibliothek und einer Google-Tabelle als Datenquelle. Ich habe für jedes Diagramm eine Funktion eingerichtet, die jeweils eine eigene Abfrage für das Blatt enthält. Individuell funktioniert alles. Wenn ich sie zusammen laufen lasse, bekomme ich zeitweise nur das zweite Diagramm oder einen Datenfehler Pie chart should have a first column of type string.

Ich habe ein paar Antworten gesehen, die auf diese Frage hinweisen, aber nichts, das geholfen hat, das Problem zu lösen.

Hier ist die Javascript ich bisher haben beide Diagramme zu zeichnen:

// Load Charts and the corechart package. 
google.charts.load('current', {'packages': ['corechart']}); 

// Draw the line chart for Reach when Charts is loaded. 
google.charts.setOnLoadCallback(drawcpReach); 

// Draw the pie chart for the UserType when Charts is loaded. 
google.charts.setOnLoadCallback(drawcpUserType); 

// Callback that draws the line chart for Reach. 
function drawcpReach() { 

    // Create the data table for Reach. 
    var queryString = encodeURIComponent('SELECT A, B, C, D'); 
    var sheetName = 'cp_data' 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&tq=' + queryString); 
    query.send(handleQueryResponse); 
} 

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

    var data = response.getDataTable(); 

    // Set options for Reach. 
    var options = { 
    height: 450, 
    legend: { 
     position: 'none' 
    }, 
    colors: ['#68b3c8', '#eb5e28', '#f3bb45'] 
    }; 

    // Instantiate and draw the line chart for Reach. 
    var chart = new google.visualization.LineChart(document.getElementById('cp-reach')); 
    chart.draw(data, options); 
} 

// Callback that draws the pie chart for UserType. 
function drawcpUserType() { 

    // Create the data table for UserType. 
    var sheetName = 'cp_data' 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&range=E1:F3'); 
    query.send(handleQueryResponse); 
} 

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

    var data = response.getDataTable(); 

    // Set options for UserType. 
    var options = { 
    height: 450, 
    legend: { 
     position: 'none' 
    }, 
    colors: ['#68b3c8', '#eb5e28'] 
    }; 

    // Instantiate and draw the chart for UserType. 
    var chart = new google.visualization.PieChart(document.getElementById('user-type')); 
    chart.draw(data, options); 
} 

Ich habe auch eine fiddle set up, das ich arbeite mit.

Answer 1

hatte nur ein paar 'Syntax' Fehler ...

1. Die Diagramme nicht ihre Container
müssen gefunden id Attribut vs. class
<div id="cp-reach"></div>
vs. verwenden
<div class="cp-reach"></div>

2. Kann nicht haben zwei Rückruf Funktionen mit dem gleichen Namen, in der gleichen Umfang
umbenannt einer der handleQueryResponse zu handleQueryResponse2

3. (kleine Ausgabe)var gid war ein Semikolon
var gid = '333437552';

fehlt ansonsten siehe Arbeitsbeispiel ...

// Load Charts and the corechart package. 
 
google.charts.load('current', { 
 
    callback: function() { 
 
    drawcpReach(); 
 
    drawcpUserType(); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
// Callback that draws the line chart for Reach. 
 
function drawcpReach() { 
 
    // Create the data table for Reach. 
 
    var queryString = encodeURIComponent('SELECT A, B, C, D'); 
 
    var gid = '333437552'; 
 
    var query = new google.visualization.Query(
 
    'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid + 
 
    '&headers=1&tq=' + 
 
    queryString 
 
); 
 
    query.send(handleQueryResponse); 
 
} 
 

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

 
    var data = response.getDataTable(); 
 

 
    // Set options for Reach. 
 
    var options = { 
 
    height:450, 
 
    legend: {position: 'none'}, 
 
    colors: ['#68b3c8', '#eb5e28', '#f3bb45'] 
 
    }; 
 

 
    // Instantiate and draw the line chart for Reach. 
 
    var chart = new google.visualization.LineChart(document.getElementById('cp-reach')); 
 
    chart.draw(data, options); 
 
} 
 

 
// Callback that draws the pie chart for UserType. 
 
function drawcpUserType() { 
 
    // Create the data table for UserType. 
 
    var gid = '825312987'; 
 
    var query = new google.visualization.Query(
 
    'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid + 
 
    '&headers=1&range=A15:B17'); 
 
    query.send(handleQueryResponse2); 
 
} 
 

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

 
    var data = response.getDataTable(); 
 

 
    // Set options for UserType. 
 
    var options = { 
 
    height: 450, 
 
    legend: {position: 'none'}, 
 
    colors: ['#68b3c8', '#eb5e28'] 
 
    }; 
 

 
    // Instantiate and draw the chart for UserType. 
 
    var chart = new google.visualization.PieChart(document.getElementById('user-type')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="cp-reach"></div> 
 
<div id="user-type"></div>