создать диаграмму. js с использованием ajax путем вызова другого файла php с помощью XMLHttpRequest - PullRequest
Новая
       12

создать диаграмму. js с использованием ajax путем вызова другого файла php с помощью XMLHttpRequest

0 голосов
/ 01 августа 2020

Я пытаюсь создать веб-страницу доски Da sh. Я подключен к MS SQL 2008 и использую PHP 7.3

на странице используется AJAX создать диаграмму. js с помощью XMLHttpRequest () для получения sql результатов запроса с другой страницы

информационная панель. php - это главная страница, которая выполняет запрос prcweeksaleschart. php - это страница, вызываемая ajax

prcweeksaleschart. php обрабатывает запрос POST и генерирует SQL данные успешно создают элемент и связанную диаграмму

затем элемент и связанный код диаграммы вводятся на странице панели инструментов

проблема в том, что страница панели мониторинга не загружает диаграмма на всех

ниже код для панели управления. 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>

а вот код в 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>
...