Как использовать php в javascript используя ajax - PullRequest
Новая
       0

Как использовать php в javascript используя ajax

0 голосов
/ 07 марта 2020

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

Вот код php: 

    <?php 

        //delcare and run sql
        $sql = "SELECT prices, generations from products";
        $result = mysqli_query($con, $sql);

        //variables
        $dataX = "";
        $dataY = "";

        //Loop to get the data
        While($row=mysqli_fetch_assoc($result)){
            $dataX = $dataX."'".$row['generations']."',";
            $dataY = $dataY."'".$row['prices']."',";
        }

        //Trim your string for white spaces and for comma at the end
        $dataX=trim($dataX,",");
        $dataY=trim($dataY,",");

    ?>

А вот код javascript: 

        <script type="text/javascript">

        var myChart = document.getElementById('myChart').getContext('2d');

var data = {
    type: 'bar', //bar, horizontablbar, pie, doughnut, radar, polararea
    data: {

        labels: [ <?php echo $dataX?> ],
        datasets: [{
            label: 'product sales',
            data: [ <?php echo $dataY ?> ],
            backgroundColor: [,'tomato', 'green','blue','cyan'],borderWidth: 1,
            borderColour: 'grey', hoverBorderColor: 'black'
            }],
    },
    options: {
        title: {
            display: true,
            text: 'Product Sales Report'
        },
        legend: {
            display: false,
        },

    scales: {
        yAxes: [{
            display: true,
            ticks: {
                beginAtZero: true,
                steps: 10,
                stepValue: 5,

            }
        }]
    }
    }
}

var Chart = new Chart(myChart, data);

</script>

Ответы [ 2 ]

1 голос
/ 07 марта 2020

Вам необходимо создать файл, который будет обслуживать JSON ответ (например) ваших данных, а затем получить к нему доступ с помощью XHR-запроса (или просто использовать jQuery 'AJAX), чтобы отобразить данные на вашем chart.

Используя предоставленный вами код, вы должны создать еще один PHP файл, который печатает ответ JSON: 

<?php
$sql = "SELECT prices, generations from products";
$result = mysqli_query($con, $sql);

//variables
$dataX = array();
$dataY = array();

//Loop to get the data
while($row = mysqli_fetch_assoc($result)){
    array_push($dataX, $row['generations'];
    array_push($dataY, $row['prices'];
}

header('Content-Type: application/json');
echo json_encode(array(
    "dataX" => $dataX,
    "dataY" => $dataY
));

Предположим, вы назвали этот файл data.php и поместил его в каталог root. Теперь вам нужно получить доступ к файлу с помощью запроса jQuery AJAX и визуализировать диаграмму, используя следующие данные: 

$.ajax({
    url: '/data.php',
    method: 'GET',
    success: function(response) {
        var dataX = response.dataX;
        var dataY = response.dataY;

        renderHtmlChart(dataX, dataY);
    }
});

Надеюсь, вы сможете найти правильный способ создания функции renderHtmlChart:)

0 голосов
/ 09 марта 2020

Устранить неполадки удалось с помощью простого имени переменной, некорректного для отображения диаграммы.

Индекс. php файл 

<html>
<?php
include "connection.php";
?>
    <head>

    </head>
    <body>
    <div id="navigation">
        <div id="nava">
        <a href="">Home</a></li>
        <a href="">News</a></li>
        <a href="">Contact</a></li>
        <a href="">About</a></li>
        </div>
    </div>
        <form method="get"> 
        <select name="year" size="1" >
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
        </select>
    <input type="submit"></input>
    </form> 

        <canvas id="myChart"></canvas>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript" src="chart.js"></script>

<script type="text/javascript" src="styles.js"></script>
    </body>
</html>

данные. php файл 

<?php
include "connection.php";

$sql = "SELECT Bookings, Destination from topflights";
$result = mysqli_query($con, $sql);

//variables
$dataX = array();
$dataY = array();

//Loop to get the data
while($row = mysqli_fetch_assoc($result)){
    array_push($dataX, $row['Destination']);
    array_push($dataY, $row['Bookings']);
}

header('Content-Type: application/json');
echo json_encode(array(
    "dataX" => $dataX,
    "dataY" => $dataY));
?>

диаграмма. js файл 

function renderHtmlChart() {

    var universalOptions = {
        responsive: true,
        title: {
            display: true,
            text: "Top 5 Flights Booked in the Year"
        },
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                display: true,
            }],
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: true,
                }
            }],

        }
    }

    $.ajax({
        url: 'data.php',
        method: 'GET',
        success: function(response) {
            var dataX = response.dataX;
            var dataY = response.dataY;

            var ctx = document.getElementById('myChart');

            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: dataX,
                    datasets: [{
                        label: 'top flights',
                        data: dataY,
                        backgroundColor: ['tomato', 'green', 'blue', 'cyan', 'orange'],
                        borderWidth: 1,
                        borderColour: 'grey',
                        hoverBorderColor: 'black'
                    }],
                },
                options: universalOptions
            }
            )
        },
        error: function(response) {
            alert('ajax failed');
            console.log(response);
        }
    });
}
$(document).ready(function() {
    renderHtmlChart();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...