単一のGoogleシートの複数のグラフは表示されません

Question

GoogleアナリティクスデータをチャートライブラリとGoogleスプレッドシートをデータソースとして使用してダッシュボードを作成しています。私は、それぞれのチャートのための関数を設定しています。それぞれのチャートには、独自のクエリーがあります。個別に、すべてが機能します。私はそれらを一緒に実行すると、私は断続的に2番目のグラフまたはデータエラーPie chart should have a first column of type stringを取得します。

私はこの質問をヒントしているいくつかの回答を見たことがありますが、問題の解決に役立つものは何もありません。

ここで私が持っているjavascriptのは、両方のチャートを描画するために、これまでです：

// 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); 
} 

私も私が働いているfiddle set upを持っています。

Answer 1

はほんの'構文'エラーを持っていた...

1.チャートは、そのコンテナ
がclass
<div id="cp-reach"></div>
対対id属性を使用する必要が見つけることができませんでした
<div class="cp-reach"></div>

2.同じスコープ
に同じ名前を持つ2つのコールバック機能は、のいずれかを改名さhandleQueryResponsehandleQueryResponse2へ

3.（小さな問題）var gidはセミコロン
var gid = '333437552';

が不足していましたそれ以外の場合は、動作例を参照してください。

// 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>

このことができます10