Блог

Контекст: Я выбираю дату и акции по ценам открытия, максимума, минимума и закрытия из своей базы данных и пытаюсь поместить данные в графики Google в виде свечи (ось X будет датой, а ось Y-ценами открытия,максимума, минимума и закрытия).

Проблема: Формат var rows на javascript должен быть массивом массивов. В принципе, входные данные должны быть примерно такими

 var rows = [[2021-01-20,20,23,25,28],
            [2021-01-21,21,24,25,29],
            [...]]
 

На PHP-коде я делаю это :

 `while ($row = $result->fetch_assoc()) {
                      $data_array = "[" .$row["Date"]. "," . $row["Open"]. "," . $row["High"]. "," . $row["Low"]. "," . $row["Close"]. "],";
                    } `
 

Это явно не работает, так как это вывод свечного графика:

Это как если бы "[" на $массив_данных из PHP рассматривается как элемент, но мне нужно сделать так, чтобы .$строки[‘дата’], .$строки[‘открыть’] и т. д. являются их собственные элементы данного массива ([ и , не может рассматриваться как элементы массива).

Реализации, чтобы попытаться решить эту проблему: я попытался сохранить $data_array в своем PHP-коде в виде массива $data_array [], но я не могу это понять (я очень новичок в PHP). И после того, как этот массив был создан в моем PHP-коде, нужно ли мне создавать цикл for, чтобы мой var rows цикл проходил через каждый элемент $data_array ? Или я мог бы оставить его таким, как есть сейчас var rows = [data_array]; ? Любая помощь приветствуется!

Язык JavaScript:

  <script type="text/javascript">
    var data_array = "<?php echo $data_array; ?>";
    google.charts
  .load("current", {
    packages: ["corechart"],
  })
  .then(function drawChart() {
    var rows = [data_array];
    var data = google.visualization.arrayToDataTable(
      rows.map(function (row) {
        var date = row[0];
        var low = Number(row[3]);
        var open = Number(row[1]);
        var close = Number(row[4]);
        var high = Number(row[2]);
        return [date, low, open, close, high];
      }),
      true
    );

    var options = {
      legend: "none",
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red
        risingColor: { strokeWidth: 0, fill: "#0f9d58" }, // green
      },
    };

    var chart = new google.visualization.CandlestickChart(
      document.getElementById("candlestick")
    );
    chart.draw(data, options);
  });
  </script>
 

PHP:

 <?php
                  $servername = "";
                  $username = "";
                  $password = "";
                  $dbname = "";
                  $ticker = "";
                  $interval = "";

                  // Create connection
                  $conn = mysqli_connect($servername, $username, $password, $dbname);
                  // Check connection
                  if (!$conn) {
                    die("Connection failed: " . mysqli_connect_error());
                  }
                  if (isset($_POST['submit'])) {
                    $ticker = $_POST['ticker'];
                    $interval = $_POST['interval'];
                    $stmt = $conn->prepare("SELECT Date, Open, High, Low, Close FROM symbols WHERE ticker=?/* AND interval=?*/");
                    $stmt->bind_param("s", $ticker /*, $interval*/); //FIXME:add another "s" to add the interval
                    $stmt->execute();

                    $result = $stmt->get_result();
                    while ($row = $result->fetch_assoc()) {
                      $data_array = "[" .$row["Date"]. "," . $row["Open"]. "," . $row["High"]. "," . $row["Low"]. "," . $row["Close"]. "],";
                    } 
                    $stmt->close();
                  }

?> 
 

HTML-форма:

 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

              <!--<div class=" ticker">-->
              <label for="ticker">Ticker:</label>
              <input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none;  text-align: center;"
                type="text" id="ticker" name="ticker" required minlength="1" maxlength="4" size="10"
                value="AAPL"></input>
              <!--</div>-->
              
              <!--<div class="interval"> -->

              <label for="interval">Period:</label>
              <select style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none;  text-align: center;"
                name="interval" id="interval">
                <option value="1d">1 day</option>
                <option value="1wk">1 week</option>
                <option selected="selected" value="1mo">1 month</option>
              </select>

              <!--</div>-->
              <input class="button1" type="submit" name="submit" id="submit" onclick="drawChart();"></input>
             
            </form>
 

Решается путем выполнения этого

PHP:

             $result = $stmt->get_result();
            while ($data = $result->fetch_assoc()) {
              $data_array[] = $data;
            } 
            echo json_encode($data_array);
            $stmt->close();
          }
 

JS:

 let data_array = <?php echo $data_array; ?>;