2017-01-08 2 views
1

ich PHP als Skriptsprache für das Backend meiner Web-Anwendung bin mitZeichnung ein Balkendiagramm MySQL-Daten mit PHP mit

<?php 

//importing db.php in the includes folder 
require("includes/db.php"); 

$nic = $_POST["NIC"]; 
$dp = $_POST["DP"]; 

$date = $_POST["Date"]; 
$tele = $_POST["Tele"]; 
$mail = $_POST["Email"]; 

$sql="INSERT INTO `order` (NIC,DP,Address,Date,Telephone,Email) VALUES ('$nic ','$dp','$address',CURDATE(),'$tele','$mail')"; 

$result = mysqli_query($db,$sql); 
?> 

Der obige Code die Vorlage eines Formulars von den Kunden beinhaltet, wenn sie einen Auftrag vergeben . Ich möchte ein Balkendiagramm mit der Anzahl der Aufträge für die Y-Achse und dem Datum für die X-Achse zeichnen. Wie kann ich das erreichen?

+0

Was genau ist das Problem, das Sie hier mit Blick sind? –

+0

Ich möchte ein Balkendiagramm der Anzahl der Formulareinreichungen gegen das Datum erstellen! –

Antwort

0

Ich kann Ihnen nicht helfen, Codes zu geben. Aber ich kann Ihnen helfen zu sagen, dass Sie "Google Chart" dafür verwenden können. Sie brauchen ein Tutorial, aber wenn Sie js, PHP wissen, wird das leicht zu lernen sein.

Aber wenn Sie möchten nicht jedes Plugin oder solche Dinge verwenden, die ich denke, wird schwer sein ..

gerade ein Kinderspiel bei Google Chart nehmen dann entscheiden. Suche es auf Google. Dank

0

Google Charts https://developers.google.com/chart/

Beispielcode für die Nutzung angepasst:

<html> 
<head> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
// Load the Visualization API and the corechart package. 
google.charts.load('current', {'packages':['corechart']}); 
// Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(drawChart); 
// Callback that creates and populates a data table, 
// instantiates the bar chart, passes in the data and 
// draws it. 
function drawChart() { 
// Create the data table. 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Date'); 
data.addColumn('number', '# of Orders'); 
// This is where you will need to pass your SQL data to JavaScript 
// I have not included this information, if needed, ask 
data.addRows([ 
['01/02/17',1], 
['01/03/17',4], 
['01/04/17',9], 
['01/05/17',6] 
]); 
// Set chart options 
var options = { 
'title':'Orders over Time', 
'width':500, 
'height':500}; 
// Instantiate and draw our chart, passing in some options. 
var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<!--Div that will hold the pie chart--> 
<div id="chart_div"></div> 
</body> 
</html> 

JS Fiddle Beweis: https://jsfiddle.net/g77pnex5/