Inkorrektes Diagramm mit Diagramm js

Ich verwende XAMPP-Webserver.Inkorrektes Diagramm mit Diagramm js

Ich habe Ordner chartexample in htdocs erstellt.

Jetzt möchte ich Datenbankdaten mit Diagramm js anzeigen.

Also habe ich data.php und bargraph.html Dateien in chartexample Ordner erstellt. Ähnlich habe ich die Datei "app.js" im Ordner "js" im Diagrammbeispielordner erstellt.

Aber wenn ich diesen Code ausführen undefined ist Anzeige im Diagramm. Im Folgenden meinen Code sind:

data.php

<?php 

$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "shgreportingdatabase"; 

// Create connection 
$conn = new mysqli($servername, $username, $password,$dbname); 

// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
echo "Connected successfully"; 



$sql = "SELECT employee.FirstName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId"; 

$result = $conn->query($sql); 

if ($result!=null) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     print json_encode($row); 
    } 
} 
$conn->close();

Hier bargraph.html ist

<!DOCTYPE html> 
<html> 
    <head> 
     <title>ChartJS - BarGraph</title> 
     <style type="text/css"> 
      #chart-container { 
       width: 640px; 
       height: auto; 
      } 
     </style> 
    </head> 
    <body> 

      <canvas id="mycanvas"></canvas> 


     <!-- javascript --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 
    </body> 
</html>

und app.js

$(document).ready(function(){ 
    $.ajax({ 
     url: "http://localhost/chartexample/data.php", 
     method: "GET", 
     success: function(data) { 
      console.log(data); 
      var emp = []; 
      var groups = []; 

      for(var i in data) { 
       emp.push(data[i].FirstName); 
       groups.push(data[i].FirstName); 
      } 

      var chartdata = { 
       labels: emp, 
       datasets : [ 
        { 
         label: 'SHG Groups', 
         backgroundColor: 'rgba(200, 200, 200, 0.75)', 
         borderColor: 'rgba(200, 200, 200, 0.75)', 
         hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
         hoverBorderColor: 'rgba(200, 200, 200, 1)', 
         data: groups 
        } 
       ] 
      }; 

      var ctx = $("#mycanvas"); 

      var barGraph = new Chart(ctx, { 
       type: 'bar', 
       data: chartdata 
      }); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }); 
});

Quelle

2017-11-07 Questions

erhalten Sie die gewünschten Daten in 'console.log (data);' von Ihrem Ajax-Erfolgsrückruf? –

Ich vermute, dass das Problem mit Ihrer Anfrage ist .

$sql = "SELECT employee.FirstName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";

Im obigen verwenden Sie WHERE eine Verbindung zwischen zwei Tabellen zu spezifizieren. Dies ist ein Job für JOIN. Sie müssen außerdem in WHERE etwas Konkretes angeben, es sei denn, Sie möchten alle Zeilen abrufen.

$SQL = "SELECT employee.FirstName, count(*) as 'TotalGroups' FROM groupdetails g JOIN employee e ON g.EmpId = e.EmpId

Wenn Sie eine WHERE dort verwenden, müssen einige Daten auszuschließen, müssen Sie die Tabelle angeben. Zum Beispiel WHERE g.id = 5, um die ID 5 aus der groupdetails-Tabelle zurückzugeben.

Wenn Sie tun möchten alle Zeilen zurückgeben, lassen Sie die WHERE Klausel insgesamt weg.

Quelle

2017-11-07 16:02:18 frozenjakalope

Ich ersetzte das SQL wie Sie angegeben haben, funktioniert aber immer noch nicht – Questions

Inkorrektes Diagramm mit Diagramm js

Antwort

Verwandte Themen