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

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <script type="text/javascript" src="//"></script>
       <script type="text/javascript">
         google.load('visualization', '1', {packages: ['corechart']});
         google.load('visualization', '1', {packages:['table']});
       <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(
       var query1 = new google.visualization.Query(
       function drawChart() { 
         query0.setQuery('select D,E limit 7');
         query1.setQuery('SELECT D,E limit 7');
       function handleQueryResponse0(response0) {
         if (response0.isError()) {
           alert('Error in query: ' + response0.getMessage() + ' ' + response0.getDetailedMessage());
      var data0 = response0.getDataTable(); 
         var table0 = new google.visualization.Table(document.getElementById('table_div'));
    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());
      var data1 = response1.getDataTable(); 
         var table1 = new google.visualization.Table(document.getElementById('table_div2'));
         var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization2'));
       chart1.draw(data1, options);
     //data = new,data0,'full',[0],[1],[1]);     
        // table1.draw(data1);
     <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>
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

data = new,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.