stackoom
  简体   繁体   中英

Google Charts second data overwriting first data & chart

 原文  2016-05-03 17:50:54  6   3    javascript/ google-visualization

Question

I am trying to show two distinct charts with two distinct data sources. My second function drawChart3() overwrites the first chart and its data source. I've tried added a time listener to alleviate but I've been unsuccessful. I'm quite new to javascript so I appreciate any tips of where my error might reside. thanks 

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

3 answers

solution1
 1  2016-05-03 18:09:59

What is happening is your writing the response to both charts every time. I just rewrote your function to take in an ID so they don't overwrite each other. Not written well, but I think this will do what you want. 

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

solution2
 0  2016-05-03 18:09:56

you could try something like this.

first, it is recommended to use the newer library loader.js vs. jsapi
and typically, setOnLoadCallback is only called once per page.
see Load the Libraries for more...

here, an init function is used to start things,
and anonymous functions are used in place of 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);
  });
}

solution3
 0  2016-05-03 21:14:57

Thanks for the help. I suspected I was making some error to call the same response. I changed the handlerResponseQuery to be unique for each query. I need to edit into a single function() but for now this is working. Is is bad procedure to call the setOnLoadCallback more than 1 time? I am still calling it twice but just curious so I can understand the technical costs of why this is not the best way. 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google charts, pushing data to column chart dynamically Get tooltip data of column chart in google charts Parse Json for Google Charts Bar Chart Data Google Charts - Not drawing Chart - Data table is not defined How to add second chart into the dashboard in google charts? Google Charts - No data available - Able to display a blank chart? Select data from oracle and draw a chart using Google charts? Google Charts - aligning Combo Chart data maximally to left and right Google Charts Javascript, using two arrays for data input for a line chart Google Chart API and vertical alignment of multiple charts' data points
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM