My full code is as below @ JS Bin - Collaborative JavaScript Debugging

Code:
     
    <html>
    <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>~Khanz~</title>
       </title>
       <script type="text/javascript" src="//www.google.com/jsapi"></script>
       <script type="text/javascript">
         google.load('visualization', '1', {packages: ['corechart']});
         google.load('visualization', '1', {packages:['table']});
       </script>
       <script type="text/javascript">
             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&sheet=MonthlyAvg-A');
       var query1 = new google.visualization.Query(
            'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdDhKOWRGRDNyeks1aF9jSFpHcmFfblE&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);
       </script>
     </head>
     <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 500px;height: 500px"></div>
       <div id="visualization2" style="width: 500px;height: 500px"></div>
       <div id='table_div' style="width: 600px;"></div>
       <div id='table_div2' style="width: 600px;"></div>
     </body>
    </html>
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 `query0` & `query1` each pull two columns however the first column Date is common to both. I want to have a final data composed of three columns e.g the first Date (common) the second Kf of Electrolyser-A & the third Kf of Electrolyser-B. Finally draw a ColumnChart & a Table to show side by side comparison of both Electrolysers. I am unable to do it using something like

Code:
data = new google.visualization.data.join(data1,data0,'full',[0],[1],[1]);
It should have compared the first column & replicate the second column from data0 & data1. Is my comprehension wrong?
Secondly can someone optimise the code so that `function handleQueryResponse` need not to be defined for each query.