在HTML（javascript）中结合散点图和折线图

我是HTML新手，请有人给我指引正确的方向。。。我试着把散点图和折线图结合起来。该行需要从函数生成，但这不是我主要关心的问题。我不知道如何使HTML文件生成一个同时包含散点和直线的图，这两个图是完全独立的。下面是我试图组合的两个代码。谁能告诉我这是否可能，我需要做什么。我想我们尝试使用JSFIDLE来帮助我，但我认为我在代码的HTML部分做了一些错误的事情

下面是代码的HTML部分：

谢谢

   <div id="scatter_top_x"></div>

 <button id="change-chart">Change to Classic</button>

  google.load('visualization', '1.1', {packages: ['scatter']});
  google.setOnLoadCallback(drawChart);

google.load('visualization', '1.1', {packages: ['line', 'corechart']});
google.setOnLoadCallback(drawChart);

  function drawChart () {

            var materialChart;
  var classicChart;
  var button = document.getElementById('change-chart');
  var materialDiv = document.getElementById('material');
  var classicDiv = document.getElementById('classic');

  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],
    [new Date(2014, 5),    9, 20.9],
    [new Date(2014, 6), 10.6, 19.8],
    [new Date(2014, 7), 10.3, 16.6],
    [new Date(2014, 8),  7.4, 13.3],
    [new Date(2014, 9),  4.4,  9.9],
    [new Date(2014, 10), 1.1,  6.6],
    [new Date(2014, 11), -.2,  4.5]
  ]);

  var materialOptions = {
    chart: {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
    },
    width: 900,
    height: 500,
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Temps'},
      1: {axis: 'Daylight'}
    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        Temps: {label: 'Temps (Celsius)'},
        Daylight: {label: 'Daylight'}
      }
    }
  };

  var classicOptions = {
    title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
    width: 900,
    height: 500,
    // Gives each series an axis that matches the vAxes number below.
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1}
    },
    vAxes: {
      // Adds titles to each axis.
      0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  materialChart = new google.charts.Line(materialDiv);
  classicChart = new google.visualization.LineChart(classicDiv);

  classicChart.draw(data, classicOptions);
  materialChart.draw(data, materialOptions);

  button.onclick = function () {
    materialDiv.classList.toggle('hide');
    classicDiv.classList.toggle('hide');

    if (materialDiv.classList.contains('hide')) {
      button.innerText = 'Change to Material';
    } else {
      button.innerText = 'Change to Classic';
    }

  };

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 67],  [1, 88],  [2, 77],
      [3, 93],  [4, 85],  [5, 91],
      [6, 71],  [7, 78],  [8, 93],
      [9, 80],  [10, 82], [0, 75],
      [5, 80],  [3, 90],  [1, 72],
      [5, 75],  [6, 68],  [7, 98],
      [3, 82],  [9, 94],  [2, 79],
      [2, 95],  [2, 86],  [3, 67],
      [4, 60],  [2, 80],  [6, 92],
      [2, 81],  [8, 79],  [9, 83],
      [3, 75],  [1, 80],  [3, 71],
      [3, 89],  [4, 92],  [5, 85],
      [6, 92],  [7, 78],  [6, 95],
      [3, 81],  [0, 64],  [4, 85],
      [2, 83],  [3, 96],  [4, 77],
      [5, 89],  [4, 89],  [7, 84],
      [4, 92],  [9, 98]
    ]);

    var options = {
      width: 900,
      height: 500,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      axes: {
        x: {
          0: {side: 'top'}
        }
      }
    };

    var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }