Блог

Я пытаюсь заполнить диаграмму, используя данные JSON, которые были получены из базы данных с использованием PHP. Я провел некоторое исследование, прежде чем перейти к stackoverflow. Я использую форматирование гистограммы anychart. Ниже приведен мой PHP-код:

 if (isset($_POST['myData'])){
    $integer = $_POST['myData'];


    if ($integer === "3"){
    
    include 'db_connection.php';
    
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $return_arr3 = array();
    $query = "SELECT Wins, Loses, Draws FROM `record` WHERE Year = '2019/2020'";
    $result = mysqli_query($conn,$query);

    while($row = mysqli_fetch_array($result)){
        $wins = $row['Wins'];
        $loses = $row['Loses'];
        $draws = $row['Draws'];

        $return_arr3[] = array("Wins" => $wins,
                              "Loses" => $loses,
                             "Draws" => $draws);
        echo($return_arr3);
}

    // Encoding array in JSON format
    echo json_encode($return_arr3);
}
 

Тогда вот мой HTML-код.

 <div id="minutes_popup" class="popupcontainer">
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
</div>  
 

Наконец, вот мой код JavaScript.

 $("#minutes").click(function(){
alert("Button works"); 

$("#minutes_popup").toggle();   

var integer = $("#minutes").attr("name");
alert("integer: "   integer);

$.ajax('includes/test.php', {
    type: 'POST',  // http method
    data: {myData: integer},// data to submit
    dataType: 'json',
    success: function(response){
    anychart.onDocumentReady(function () {
    anychart.data.loadJsonFile("includes/test.php", function (response) {
        // create a chart and set loaded data
        chart = anychart.bar(response);
        chart.container("minutes_popup");
        chart.draw();
    });
    });
    }
});
}); 
 

Этот код не работает по какой-то неизвестной мне причине. На консоли не появляется ошибок, и данные передаются на консоль в этом формате:

[{«Выигрывает»: «34», «Проигрывает»: «19», «Рисует»: «10»}]

Однако столбчатая диаграмма не создается.

Если кто-нибудь может сказать мне, как исправить мой код, я был бы очень благодарен.