'How to exchange data between a php file and a javascript code using daterangepicker

I am new to web development and I need help with this.

I have a PHP page called index.php where I take a date range from the user using daterangepicker. the date range is then passed on to process_time.php where data relevant in the date range is pulled from the database. Now, this data is to be sent back to the index.php where I'll be displaying them in a chart.

The codes for the different files are:

index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>Document</title>
</head>

<body>

    <?php include "process_time.php" ?>
    <input type="text" name="daterange" value="04/24/2022 - 04/27/2022" id="chaimae" />
    <div style="width:900px;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        $('input[name="daterange"]').daterangepicker();
        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            checkChart()
            var start_time = picker.startDate.format('YYYY-MM-DD');
            var end_time = picker.endDate.format('YYYY-MM-DD');
            let data = {
                start_time,
                end_time
            }
            console.log(start_time + "       " + end_time);
            let data_json = JSON.stringify(data)
            fetch("process_time.php", {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json",
                    "name": "test"
                },
                body: data_json

            })
            var number_of_users_today = <?php echo json_encode($users, JSON_HEX_TAG); ?>;
            var date_today = <?php echo json_encode($added_date, JSON_HEX_TAG); ?>;
            console.log(number_of_users_today + "         " + date_today)
            AddValuesToChart(number_of_users_today, date_today, "Utilisateurs", 'rgb(0,128,0)')

        });
    </script>

    <!-- functions -->
    <script>
        function AddValuesToChart(sessions, dates, label, color) {
            const labels = dates;
            const data = {
                labels: labels,
                datasets: [{
                    label: label,
                    data: sessions,
                    tension: 0.1,
                    borderColor: color,
                    backgroundColor: color,
                    pointBackgroundColor: "black",
                    pointBorderWidth: 3
                }]
            };
            const config = {
                type: 'line',
                data: data,
            };
            const myChart = new Chart(document.getElementById('myChart'),
                config
            );
        }

        function checkChart() {
            let chartStatus = Chart.getChart("myChart");
            if (chartStatus != undefined) {
                chartStatus.destroy();
            }
        }
    </script>
</body>

</html>

process_time.php :

<?php

    include "connection.php";
    $val_start_time = $_COOKIE["start_time"];
    $val_end_time = $_COOKIE["end_time"];
    try {
        $sql = "SELECT count(distinct name_current_user) as UTILISATEURS,count(distinct(session_id_current_user)) as SESSIONS,avg(TIME_TO_SEC(timeSpent)) as AVERAGE_TIME, add_date,count(distinct pathURL) as page_views from test.tws_analytics WHERE add_date BETWEEN '$val_start_time' AND '$val_end_time' group by add_date;";
        $result = $pdo->query($sql);
        if ($result->rowCount() > 0) {
            $users = array();
            $added_date = array();
            while ($row = $result->fetch()) {
                $users[] = $row["UTILISATEURS"];
                $added_date[] = $row["add_date"];
            }
            unset($result);
        } else {
            echo "no records matching your query were found";
        }
    } catch (PDOException $e) {
        die("ERROR : Could not execute sql query" . $e->getMessage());
        unset($pdo);
    }

The problem that I'm facing, Is that whenever i choose a new date range, the chart displays ONLY the first date range that i have chosen the first time and the reason why, is that he calls new process.php files and ignoring the passed values and just keep the first one. My question is how do i make the process_time.php file gets updated ? enter image description here

javascriptphpjquerymysql


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions