title: Joining columns of two queries
body: <p>My full code is as below @ <a href="http://jsbin.com/ciroy/8/edit" rel="nofollow">http://jsbin.com/ciroy/8/edit</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
   &lt;title&gt;~Khanz~&lt;/title&gt;
     &lt;/title&gt;
     &lt;script type="text/javascript" src="//www.google.com/jsapi"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
       google.load('visualization', '1', {packages: ['corechart']});
       google.load('visualization', '1', {packages:['table']});
     &lt;/script&gt;
     &lt;script type="text/javascript"&gt;
           var options = {
           title: 'Electrolyser Data',
           legend: {position: 'bottom'},  
           hAxis: {title: 'Date', titleTextStyle: {color: 'red'}, format: 'MMM d', gridlines: {count: '31'}}
         };
     var data; var data0; var data1;  
     var query0 = new google.visualization.Query(
         'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdGRIVklheHdIS1ZCaHQ1MllvM19hUWc&amp;sheet=MonthlyAvg-A');
     var query1 = new google.visualization.Query(
          'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdDhKOWRGRDNyeks1aF9jSFpHcmFfblE&amp;sheet=MonthlyAvg-B');    
     function drawChart() { 
       query0.setQuery('select D,E limit 7');
       query0.send(handleQueryResponse0);
       query1.setQuery('SELECT D,E limit 7');
       query1.send(handleQueryResponse1);
     }
  
  
     function handleQueryResponse0(response0) {
       if (response0.isError()) {
         alert('Error in query: ' + response0.getMessage() + ' ' + response0.getDetailedMessage());
         return;
       }
  
    var data0 = response0.getDataTable(); 
       var table0 = new google.visualization.Table(document.getElementById('table_div'));
          table0.draw(data0);
  var chart0 = new google.visualization.ColumnChart(document.getElementById('visualization'));
      chart0.draw(data0, options);
    } 
     function handleQueryResponse1(response1) {
       if (response1.isError()) {
         alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
         return;
       }
  
    var data1 = response1.getDataTable(); 
       var table1 = new google.visualization.Table(document.getElementById('table_div2'));
        table1.draw(data1);
       var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization2'));
     chart1.draw(data1, options);
   //data = new google.visualization.data.join(data1,data0,'full',[0],[1],[1]);     
      // table1.draw(data1);
    }    
  
     google.setOnLoadCallback(drawChart);
     &lt;/script&gt;
   &lt;/head&gt;
   &lt;body style="font-family: Arial;border: 0 none;"&gt;
  &lt;div id="visualization" style="width: 500px;height: 500px"&gt;&lt;/div&gt;
     &lt;div id="visualization2" style="width: 500px;height: 500px"&gt;&lt;/div&gt;
     &lt;div id='table_div' style="width: 600px;"&gt;&lt;/div&gt;
     &lt;div id='table_div2' style="width: 600px;"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am able so far to properly visualize data from two different sources however what I need is to join the data from two different queries. In the case shown <code>query0</code> &amp; <code>query1</code> each pull <strong>two</strong> columns however the first column <strong>Date</strong> is common to both. I want to have a final data composed of <strong>three</strong> columns e.g the first <strong>Date</strong> (common) the second <strong>Kf</strong> of Electrolyser-A &amp; the third <strong>Kf</strong> of Electrolyser-B. Finally draw a ColumnChart &amp; a Table to show side by side comparison of both Electrolysers. I am unable to do it using something like</p>
  
  <p><code>data = new google.visualization.data.join(data1,data0,'full',[0],[1],[1]);</code> </p>
  
  <p>It should have compared the first column &amp; replicate the second column from data0 &amp; data1. Is my comprehension wrong?
  Secondly can someone optimise the code so that <code>function handleQueryResponse</code> need not to be defined for each query.</p>