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

Question

我是HTML的新手，有人请指导我正确的方向......我试图将散点图和折线图结合起来。这条线需要一个功能，但这不是我的主要关注点。我无法找到如何使HTML文件生成一个包含散点图和行的图，其中两个图完全独立。以下是我试图合并的两个代码。有人可以告诉我，如果这是可能的，我需要做什么。我尝试使用JSFiddle来帮助我，但我认为我在代码的HTML部分做错了。

以下是代码的HTML部分：

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

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

     

以下是代码的javascript部分：

  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));
  }

谢谢！