單個Google表單中的多個圖表不會顯示

Question

我使用圖表庫和Google Spreadsheet作爲我的數據源來構建包含Google Analytics數據的儀表板。我爲每個圖表設置了一個函數，每個圖表都有自己的查詢。單獨而言，一切正常。當我將它們一起運行時，我間歇性地得到第二個圖表或數據錯誤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.圖表找不到它們的容器
需要使用id屬性與class
<div id="cp-reach"></div>
對比
<div class="cp-reach"></div>

2.不能有2個回調函數具有相同的名稱，在相同的範圍內
改名之一handleQueryResponse到handleQueryResponse2

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>