Geek Answers Handbook

The first data and data charts Google Charts

I am trying to show two different graphs with two different data sources. My second drawChart3 () function overwrites the first chart and its data source. I tried to add a time listener to make it easier, but I was unsuccessful. I am completely new to javascript, so I appreciate any advice on where my error might occur. thank

<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>
+4
source share
3 answers

What happens is your answer to both charts every time. I just rewrote your function to take the identifier so that they don't overwrite each other. It is not written well, but I think it 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>
+1

- .

loader.js vs. jsapi
setOnLoadCallback .
. ...

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

. , , . handlerResponseQuery, . (), . 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>
0

More articles:


All Articles