HomeLập trìnhPhpTạo chart.js bằng...

Tạo chart.js bằng ajax bằng cách gọi một tệp php khác bằng XMLHttpRequest – Diễn đàn freeCodeCamp


Tôi đang cố gắng tạo một trang web Bảng điều khiển. Tôi đã kết nối với MS SQL 2008 và sử dụng PHP 7.3

trang sử dụng AJAX tạo chart.js sử dụng XMLHttpRequest() để nhận kết quả truy vấn sql từ một trang khác

dashboard.php là trang chính thực hiện yêu cầu prcweeksaleschart.php là trang được gọi bởi ajax

prcweeksaleschart.php xử lý yêu cầu POST và tạo dữ liệu SQL thành công, sau đó tạo phần tử và biểu đồ liên quan

phần tử và mã biểu đồ liên quan sau đó được nhập vào trang bảng điều khiển

vấn đề là trang bảng điều khiển hoàn toàn không tải biểu đồ

bên dưới là mã cho bảng điều khiển.php

<?php

// Initialize the session
session_start();

// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: index.php");
    exit;
}

if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
  if ($_SESSION["badmin"] != 1) {
    header("location: index.php");
  }
}

// Include config file
require_once "config.php";

$defdate = date("Y-m-d");

 ?>


 <!DOCTYPE html>
 <html lang="en">
 <head>
   <title>BMAM|Rpt - DashBoard</title>
   <?php Include "bs4.php" ?>

   <!--AJAX Week Sales-->
   <script>
   function genweeksalesrep() {
     // Creating the XMLHttpRequest object
     document.getElementById('divweeksales').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width: 100%"></div></div>';
     document.getElementById('divweeksaleschart').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width: 100%"></div></div>';
     //Details
     var request = new XMLHttpRequest();
     // Instantiating the request object
     request.open("POST", "prc/prcweeksales.php");
     // Defining event listener for readystatechange event
     request.onreadystatechange = function() {
        // Check if the request is compete and was successful
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            // Inserting the response from server into an HTML element
            document.getElementById("divweeksales").innerHTML = request.responseText;
          }
        };
        // Retrieving the form data
        var myForm = document.getElementById("frmweeksales");
        var formData = new FormData(myForm);
        // Sending the request to the server
        request.send(formData);
        //Chart
        var requestc = new XMLHttpRequest();
        // Instantiating the request object
        requestc.open("POST", "prc/prcweeksaleschart.php");
        // Defining event listener for readystatechange event
        requestc.onreadystatechange = function() {
           // Check if the request is compete and was successful
           if(requestc.readyState === XMLHttpRequest.DONE && requestc.status === 200) {
               // Inserting the response from server into an HTML element
               document.getElementById("divweeksaleschart").innerHTML = requestc.responseText;
               //$('#myChart').remove();
               //$('#divweeksaleschart').append('<canvas id="myChart" width="100%" height="50px"></canvas>');
               myChart.reset();
               myChart.update();
             }
           };
           // Retrieving the form data
           var myFormc = document.getElementById("frmweeksales");
           var formDatac = new FormData(myFormc);
           // Sending the request to the server
           requestc.send(formDatac);



      }

    </script>
    <!--AJAX Week Sales-->

<!--Java Function to clear inner html-->
   <script type="text/javascript">
    $(document).ready(function(){
      $("#frmweeksalesresetbtn").click(function(){
        $("#divweeksales").html("Clear!");
        $("#divweeksaleschart").html("");
      });
    });
   </script>

 </head>
 <body>
   <?php
   include "header.php";
   ?>


   <div class="container-fluid" style="font-size: 90%;">

     <h5>DASH BOARD</h5>
     <hr>
     <div class="row">
       <div class="col">

         <div class="card">
           <div class="card-header">
             <h5>Weekly Sales</h5>
             <div class="row">
               <div class="col">
                 <form class="form-inline" id="frmweeksales">
                   <select class="form-control form-control-sm mb-2 mr-sm-2" name="company">
                     <option value="1">Bawabet Al Maamoura</option>
                     <option value="2" selected>Nitrogen</option>
                   </select>
                   <!--<label class="mr-sm-2" for="datet">Date:</label>-->
                   <input class="form-control form-control-sm mb-2 mr-sm-2" type="date" name="todate" id="datet" value="<?php echo $defdate; ?>">
                   <input type="button" class="btn btn-primary btn-sm mb-2" value="Refresh" id="frmweeksalesbtn" onclick="genweeksalesrep()">
                 </form>
               </div>
               <div class="col">
                 <button class="btn btn-secondary btn-sm float-right" id="frmweeksalesresetbtn">Reset</button>
               </div>
             </div>
           </div>
           <div class="card-body">
             <div class="row">
               <div class="col-6" id="divweeksales">

               </div>
               <div class="col-6" id="divweeksaleschart">

               </div>
             </div>
           </div>
         </div>
       </div>
     </div>


   </div>


   <div class="container-fluid">
     <footer class="footer">
       <?php Include "footer.php" ?>
     </footer>
   </div>
 </body>
 </html>

và đây là mã trong prcweeksaleschat.php:

<?php

// Initialize the session
session_start();

// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: index.php");
    exit;
}

if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
  if ($_SESSION["badmin"] != 1) {
    header("location: index.php");
  }
}

// Include config file
require_once "../config.php";

$brands = $thisweek = $lastweek = $color1 = $color2 = "";
$arr = array();
 ?>

 <?php
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $todate = htmlspecialchars(trim($_POST["todate"]));
     $company = htmlspecialchars(trim($_POST["company"]));

     $server = DB_SERVER;
     $options = array(  "UID" => DB_USERNAME,  "PWD" => DB_PASSWORD,  "Database" => DB_NAME, "CharacterSet" => "UTF-8", "ReturnDatesAsStrings" => true);
     $conn = sqlsrv_connect($server, $options);
     echo $conn."<br>";
     $sqlsalesrep = "EXEC prcweeksales '".$todate."', " . $company . ",1";
     echo $sqlsalesrep."<br>";
     $querysalesrep = sqlsrv_query($conn, $sqlsalesrep);
     echo $querysalesrep."<br>";
     if ($querysalesrep === false){
       exit("<pre>".print_r(sqlsrv_errors(), true));
     }
     if ($querysalesrep != false) {
       while ($rowasalerep = sqlsrv_fetch_array($querysalesrep)){
         $arr[] = $rowasalerep;
       }
       for ($i=0; $i < count($arr) ; $i++) {
         $brands .= "'".$arr[$i][1]."',";
         $thisweek .= $arr[$i][2].",";
         $lastweek .= $arr[$i][3].",";
         $color1 .="'#c45850',";
         $color2 .="'#3e95cd',";
       }
       $brands = rtrim($brands, ",");
       $thisweek = rtrim($thisweek, ",");
       $lastweek = rtrim($lastweek, ",");
       $color1 = rtrim($color1, ",");
       $color2 = rtrim($color2, ",");
       //echo $brands;
       //echo "<br>";
       //echo $thisweek;
       //echo "<br>";
       //echo $lastweek;
     }

   }
  ?>


  <canvas id="myChart" width="100%" height="50px"></canvas>
  <script>
  var ctx = document.getElementById('myChart');
  var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
      labels: [<?php echo $brands; ?>],
      datasets: [{
        label: 'This week',
        backgroundColor: [<?php echo $color1; ?>],
        data: [<?php echo $thisweek ?>]
      },
      {
        label: 'Last week',
        backgroundColor: [<?php echo $color2; ?>],
        data: [<?php echo $lastweek ?>]
      }],

    },
    options: {
      legend: { display: true },
      title: {
        display: true,
        text: 'Weekly Sales Chart'
      }
    }
     });
   </script>



Zik.vn – Biên dịch & Biên soạn Lại

Đọc thêm  Chuyển hướng đến trang gốc sau khi gửi thông báo biểu mẫu liên hệ hoàn thành php + 3 cột Bootstrap 4
spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status