Change between different Google Charts using a drop down menu selection
<p>I need help coding my HTML page so that when you select the option "C152" from the drop down menu, (see code below) the Google Chart will change to the C152 chart and when you select the "C172" from the drop down menu, the chart will change to the C172 chart. Basically, the chart will change based on that selection from the drop down menu. (Each chart has a different set of data points and options.) I have been doing some research for awhile and have not found what I am looking for to make this work. I was hoping that someone could point me in the right direction. Here is a sample of my code. Thanks in advance</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;th&gt;
&lt;select name='select1' &gt;
  &lt;option selected disabled&gt;Choose&lt;/option&gt; 
  &lt;option onclick="c152()" value="c152"&gt;C152&lt;/option&gt;
  &lt;option onclick="c172()" value="c172"&gt;C172&lt;/option&gt;
&lt;/select&gt;&lt;/th&gt;

&lt;head&gt;
    &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var datac152 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [31, 1000],
              [31, 1350],
              [32.65, 1670],
              [36.5, 1670],
              [36.5, 1000]
        ]);
        var datac172 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [35, 1500],
              [35, 1950],
              [38.65, 2300],
              [47.3, 2300],
              [47.3, 1500]
        ]);


        var optionsc152 = {
          legend: 'none',
          hAxis: {title: 'Center of Gravity (inches)', minValue: 30, maxValue: 38 },
          vAxis: {title: "Total Weight (lbs)"},
          axes: {
            y: {
                all: {
                    range: {
                        max: 1800,
                        min: 1000
                    }
                }
            }
        },

          colors: ['#009933'],
          pointSize: 0,
          title: 'Cessna 152 Load Limits',
          backgroundColor: '#eeeeee',
          pointShape: 'circle'
       };

        var optionsc172 = {
          legend: 'none',
          hAxis: {title: 'Center of Gravity (inches)', minValue: 34, maxValue: 48 },
          vAxis: {title: "Total Weight (lbs)"},
          axes: {
            y: {
                all: {
                    range: {
                        max: 2300,
                        min: 1500
                    }
                }
            }
        },

          colors: ['#009933'],
          pointSize: 0,
          title: 'Cessna 172 Load Limits',
          backgroundColor: '#eeeeee',
          pointShape: 'circle'
       };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(datac152, optionsc152);
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="chart_div" style="width: 963px; height: 500px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>