Google Charts ChartRangeFilter没有显示javascript和php

Question

I've been trying to plot an interactive stock chart for some test data taken from mySQL. Connection was established and data was received with no errors. I'm new to Google Charts so I'm not too sure if the code below was applied correctly.

<div class="container">
<?php
    if (isset($_GET['submit-search'])) {
        $ticker = $_GET['ticker'];
        $search = mysqli_real_escape_string($conn, $ticker);
        $sql = "SELECT * FROM ".$ticker."_dailyadj;";
        $result = mysqli_query($conn, $sql);
    }
    mysqli_close($conn);
?>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']});
  google.charts.setOnLoadCallback(drawChartRangeFilter);

  function drawChartRangeFilter() {

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        var control = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'control_div',
          'options': {
            // Filter by the date axis.
            'filterColumnIndex': 1,
            'ui': {
              'chartType': 'LineChart',
              'chartOptions': {
                'chartArea': {'width': '90%'},
                'hAxis': {
                    'baselineColor': 'none',
                    'format': 'YYYY-MM-dd',
                    'ticks': [
                        <?php
                            if(mysqli_num_rows($result) > 0) {
                                foreach($result as $row) {
                                    echo "['".$row['Date']."'],";
                                }
                            }
                        ?>
                ]
            }
              },
              // Display a single series that shows the closing value of the stock.
              // Thus, this view has two columns: the date (axis) and the stock value (line series).
              'chartView': {
                  'columns': [1, {
                      'type': 'number',
                      'calc': function () {return 0;}
                  }]
              },
              // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
              'minRangeSize': 86400000
            }
          }
          Initial range: 2012-02-09 to 2012-03-20.
          'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
        });

        var chart = new google.visualization.ChartWrapper({
          'chartType': 'CandlestickChart',
          'containerId': 'chart_div',
          'options': {
            // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'slantedText': false},
            'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
            'legend': {'position': 'none'}
          }
        });

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Low');
        data.addColumn('number', 'Open');
        data.addColumn('number', 'Close');
        data.addColumn('number', 'High');
        data.addRows([
            <?php
                if(mysqli_num_rows($result) > 0) {
                    foreach($result as $row) {
                        echo "['".$row['Date']."', ".$row['Low'].", ".$row['Open'].", ".$row['Close'].", ".$row['High']."],";
                    }
                }
            ?>
        ])
        }

        dashboard.bind(control, chart);
        dashboard.draw(data);
      }
</script>
<div id="chart_div" style="width: 915px; height: 500px;"></div>
<div id="dashboard_div" style="border: 1px solid #ccc">
    <table class="columns">
        <tr>
            <td>
                <div id="chart_div" style="width: 915px; height: 300px;"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="control_div" style="width: 915px; height: 50px;"></div>
            </td>
        </tr>
    </table>
</div>

I have had previous success with the following code, which shows that my data was successfully being implemented on a static chart.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'Low', 'Open', 'Close', 'High'],
        <?php
            if(mysqli_num_rows($result) > 0) {
                foreach($result as $row) {
                    echo "['".$row['Date']."', ".$row['Low'].", ".$row['Open'].", ".$row['Close'].", ".$row['High']."],";
                }
            }
        ?>
    ]);

    var options = {
      legend:'none'
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}
</script>

Let me know if there is anything that I should take note with the parameters. This has been bothering me for days :(