Графики Google ChartRangeFilter не отображаются с JavaScript и PHP - PullRequest
Новая
       21

Графики Google ChartRangeFilter не отображаются с JavaScript и PHP

0 голосов
/ 04 марта 2019

Я пытался построить интерактивную биржевую диаграмму для некоторых тестовых данных, взятых из mySQL.Соединение было установлено, и данные были получены без ошибок.Я новичок в Google Charts, поэтому не уверен, правильно ли был применен приведенный ниже код.

<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>

У меня был предыдущий успех со следующим кодом, который показывает, что мои данные были успешно реализованы на статической диаграмме. 

<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>

Позвольте мнезнаю, если есть что-то, что я должен принять к сведению с параметрами.Это беспокоило меня уже несколько дней: (* ​​1009 *

...