谷歌圖表第二個數據覆蓋第一個數據和圖表

我試圖用兩個不同的數據源顯示兩個不同的圖表。我的第二個函數drawChart3（）覆蓋了第一個圖表及其數據源。我嘗試添加一個時間監聽器來減輕，但我一直不成功。我很新的JavaScript，所以我很欣賞任何提示我的錯誤可能駐留在哪裏。謝謝谷歌圖表第二個數據覆蓋第一個數據和圖表

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 
     google.setOnLoadCallback(drawChart3); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 

    function drawChart() { 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0'); 
     query.setQuery('select *'); 
     query.send(handleQueryResponse); 
     } 
    function drawChart3() { 
     var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0'); 
     query3.setQuery('select *'); 
     query3.send(handleQueryResponse); 
     } 
     //Set chart options 
     var options = {'title': '^VIX Close & XX Correlation Coefficient', 
         'legend': {position: 'none'}, 
         'width': 600, 
         'height': 300}; 

     //Set chart options 
     var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"', 
         'legend': 'bottom', 
         chartArea:{left:60,top:50,width:'98%',height:'75%'}, 
         'width': 1300, 
         'height': 500}; 

     function handleQueryResponse(response) { 
     var data = response.getDataTable(); 
     var chart = new google.visualization.AreaChart(document.getElementById('chart-container')); 
     google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
     var chart3 = new google.visualization.AreaChart(document.getElementById('chart3-container')); 
     var data3 = response.getDataTable(); 
      chart3.draw(data3, options3); 
     }); 
      chart.draw(data, options); 
     } 
    </script> 
    </head> 

    <body> 

     <td><div id="chart-container" style="border: 1px solid #ccc"></div></td> 
     <td><div id="chart3-container" style="border: 1px solid #ccc"></div></td> 
    </body> 
</html>

來源

2016-05-03 Matthew Barrowclough

我認爲你的邏輯是關閉的。它的覆蓋是因爲'response.getDataTable（）'在'data'和'data3'之間不會改變。你需要重新修改你的邏輯。 –

你可以嘗試這樣的事情。

第一，建議使用較新的庫loader.js與jsapi
，通常，setOnLoadCallback只每頁調用一次。
看到Load the Libraries更多...

這裏，一個init功能是用來啓動的事情，
和匿名函數代替handleQueryResponse

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

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

function init() { 
    var options = { 
    'title': '^VIX Close & XX Correlation Coefficient', 
    'legend': {position: 'none'}, 
    'width': 600, 
    'height': 300 
    }; 

    var options3 = { 
    'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"', 
    'legend': 'bottom', 
    chartArea:{left:60,top:50,width:'98%',height:'75%'}, 
    'width': 1300, 
    'height': 500 
    }; 

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0'); 
    query.setQuery('select *'); 
    query.send(function() { 
    var data = response.getDataTable(); 
    var chart = new google.visualization.AreaChart(document.getElementById('chart-container')); 
    chart.draw(data, options); 
    }); 

    var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0'); 
    query3.setQuery('select *'); 
    query3.send(function() { 
    var data3 = response.getDataTable(); 
    var chart3 = new google.visualization.AreaChart(document.getElementById('chart3-container')); 
    chart3.draw(data3, options3); 
    }); 
}

來源

2016-05-03 18:09:56 WhiteHat

希望這可以幫助... – WhiteHat

非常有幫助，非常感激。 –

正在發生的事情是使用你的寫作響應每次都在圖表中顯示。我只是重寫了你的函數來接收一個ID，這樣它們就不會相互覆蓋。寫得不好，但我認爲這會做你想做的。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawCharts); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 

    function drawCharts() { 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0'); 
     query.setQuery('select *'); 
     var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0'); 
     query3.setQuery('select *'); 
     runQuery(query, 'chart-container') 
     runQuery(query3, 'chart3-container') 
     } 

     //Set chart options 
     var options = {'title': '^VIX Close & XX Correlation Coefficient', 
         'legend': {position: 'none'}, 
         'width': 600, 
         'height': 300}; 

     //Set chart options 
     var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"', 
         'legend': 'bottom', 
         chartArea:{left:60,top:50,width:'98%',height:'75%'}, 
         'width': 1300, 
         'height': 500}; 

     function runQuery(q, chartId) { 
     q.send(function(response){ 
     var data = response.getDataTable(); 
     var chart = new google.visualization.AreaChart(document.getElementById(chartId)); 
     chart.draw(data, options); 
     }); 
     } 
    </script> 
    </head> 

    <body> 

     <td><div id="chart-container" style="border: 1px solid #ccc"></div></td> 
     <td><div id="chart3-container" style="border: 1px solid #ccc"></div></td> 
    </body> 
</html>

來源

2016-05-03 18:09:59

感謝您的幫助。我懷疑我是在做出一些錯誤來調用相同的迴應。我將handlerResponseQuery更改爲每個查詢都是唯一的。我需要編輯成一個函數（），但現在這是工作。超過1次調用setOnLoadCallback是否是不好的過程？我仍然稱它兩次，但只是好奇，所以我可以理解爲什麼這不是最好的方式的技術成本。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

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

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 
     google.charts.setOnLoadCallback(drawChart2); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 

    function drawChart() { 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0'); 
     query.setQuery('select *'); 
     query.send(handleQueryResponse); 
     } 
    function drawChart2() { 
     var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0'); 
     query2.setQuery('select *'); 
     query2.send(handleQueryResponse2); 
     } 
     //Set chart options 
     var options = {'title': '^VIX Close & XX Correlation Coefficient', 
         'legend': {position: 'none'}, 
         'width': 600, 
         'height': 300}; 

     //Set chart options 
     var options2 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"', 
         'legend': 'bottom', 
         chartArea:{left:60,top:50,width:'98%',height:'75%'}, 
         'width': 1300, 
         'height': 500}; 

     function handleQueryResponse(response) { 
     var data = response.getDataTable(); 
     var chart = new google.visualization.BarChart(document.getElementById('chart-container')); 
     chart.draw(data, options) 
     } 

     function handleQueryResponse2(response2) { 
     var chart2 = new google.visualization.AreaChart(document.getElementById('chart2-container')); 
     var data2 = response2.getDataTable(); 
     chart2.draw(data2, options2); 

     } 
    </script> 
    </head> 

    <body> 

     <td><div id="chart-container" style="border: 1px solid #ccc"></div></td> 
     <br> 
     <td><div id="chart2-container" style="border: 1px solid #ccc"></div></td> 
    </body> 
</html>

來源

2016-05-03 21:14:57

谷歌圖表第二個數據覆蓋第一個數據和圖表

回答

相關問題