Aligning line graph and timeline with same x axis

[z...@rice.edu]

Hi,

A quick question about visually representing 2 line graphs and a timeline with the same x-axis. I know aligning two line graphs with same x-label has been done before, but is there anyway to add the 3rd timeline into the visualization such that the labels (months and years) match up with those of line graphs and all three graphs are displayed vertically one above/below another?

here is a link: https://jsfiddle.net/tangpihai/6nhh6gpe/2/

and this is the html and script:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <div id="chart_div"></div>   

  <div id="chart_div2"></div>

  <div id="timeline" style="height:180px;"></div>

script="text/javascript" 

src="https://www.gstatic.com/charts/loader.js"

    google.charts.load('43', {packages: ['line', 'corechart','timeline']});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        console.log('drawchart');

      var chartDiv = document.getElementById('chart_div');

      var chartDiv2 = document.getElementById('chart_div2');

      var container = document.getElementById('timeline');

//-------------------------------------------------------------------      

      var data = new google.visualization.DataTable();

      data.addColumn('date', 'Month');

      data.addColumn('number', "Average Temperature");

      data.addColumn('number', "Average Hours of Daylight");

      data.addRows([

        [new Date(2014, 0),  -.5,  5.7],

        [new Date(2014, 1),   .4,  8.7],

        [new Date(2014, 2),   .5,   12],

        [new Date(2014, 3),  2.9, 15.3],

        [new Date(2014, 4),  6.3, 18.6],

      ]);

/*

      data.addRows([

        [new Date(2014, 0),  -.5,  5.7,    .5,  6.7],

        [new Date(2014, 1),   .4,  8.7,  1.4,   9.7],

        [new Date(2014, 2),   .5,   12,   1.5,   13],

        [new Date(2014, 3),  2.9, 15.3,   3.9, 16.3],

        [new Date(2014, 4),  6.3, 18.6,   7.3, 19.6],

      ]);

*/

      var materialOptions = {

        height: 500,

        state: {

            range: {

                start: data[0], 

                end  : data[4]

            }

        }

      };

//-------------------------------------------------------------------   

      var data2 = new google.visualization.DataTable();

      data2.addColumn('date', 'Month');

      data2.addColumn('number', "Average Temperature");

      data2.addColumn('number', "Average Hours of Daylight");

      data2.addRows([

        [new Date(2014, 0),  -.5,  5.7],

        [new Date(2014, 1),   .4,  8.7],

        [new Date(2014, 2),   .5,   12],

        [new Date(2014, 3),  2.9, 15.3],

        [new Date(2014, 4),  6.3, 18.6],

      ]);

      var materialOptions2 = {

        height: 500,

        state: {

            range: {

                start: data2[0], 

                end  : data2[4]

            }

        }

      };

     

//-------------------------------------------------------------------  

var chart = new google.visualization.Timeline(container);

      var dataTable = new google.visualization.DataTable();

      dataTable.addColumn({ type: 'string', id: 'Term' });

      dataTable.addColumn({ type: 'string', id: 'Therapy' });        

      dataTable.addColumn({ type: 'date', id: 'Start' });

      dataTable.addColumn({ type: 'date', id: 'End' });

      dataTable.addRows([

          [ 'Neo CTx', 'GEM', new Date(2014, 1, 10), new Date(2014, 2, 4) ],

          [ 'Neo CCRTx', 'GEM+AB',new Date(2014, 2, 4),  new Date(2014, 4, 4) ],

          [ 'Surgery', 'Distal Pancreatectomy',  new Date(2014, 3, 4),  new Date(2014, 4, 30) ]]);

      var options = {

       timeline: { showRowLabels: true },

       

    };

//-------------------------------------------------------------------  

        //var materialChart = new google.charts.Line(chartDiv);

        //materialChart.draw(data, materialOptions);

        var wrap = new google.visualization.ChartWrapper({

        'chartType':'LineChart',

        'dataTable':data,

        'containerId':chartDiv,

        'options': materialOptions

        });

        wrap.draw();

        

        //var materialChart2 = new google.charts.Line(chartDiv2);

        //materialChart2.draw(data2, materialOptions2);

        

        var wrap2 = new google.visualization.ChartWrapper({

        'chartType':'LineChart',

        'dataTable':data2,

        'containerId':chartDiv2,

        'options': materialOptions2

        });

        wrap2.draw();

        

        chart.draw(dataTable, options);

    }

Thank you so much! This is forum is great for constructive learning environment!