Googleグラフの2番目のデータが最初のデータとグラフを上書きする

2つの異なるデータソースを持つ2つの異なるグラフを表示しようとしています。私の2番目の関数drawChart3（）は、最初のチャートとそのデータソースを上書きします。私は緩和するために時間リスナーを追加しようとしましたが、私は失敗しました。私はJavaScriptにはかなり新しいので、私のエラーが存在する可能性のあるヒントを感謝します。おかげGoogleグラフの2番目のデータが最初のデータとグラフを上書きする

<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'の間で変更されないので、上書きします。あなたはあなたのロジックを再加工する必要があります。 –

あなたはこのような何かを試みることができます。

まず、新しいライブラリにjsapi
と一般的には、setOnLoadCallbackは1ページにつき1回のみと呼ばれるloader.js対を使用することをお勧めします。
は、ここに

は、 init機能は、物事を開始するために使用されています...
を多くのため Load the Libraries見ると無名関数は、あなたが回答を書いている 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を各クエリに対してユニークに変更しました。私は単一の関数（）に編集する必要がありますが、今のところこれが機能しています。 setOnLoadCallbackを1回以上呼び出すのは悪い手順ですか？私はまだ2回呼びますが、好奇心が強いので、なぜこれが最善の方法ではないのかという技術的なコストを理解することができます。

<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

Googleグラフの2番目のデータが最初のデータとグラフを上書きする

答えて

関連する問題