Drawing a bar graph using mysql data using php

Question

I am using PHP as the scripting language for the backend of my web application

<?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);
?>

The above code involves the submission of a form by customers when they place an order. I want to draw a bar graph using number of orders for the y axis and date for the x axis. How can I achieve this?

i want to plot a bar chart of numbe of form submissions vs the date! — Suneth Perera
– Suneth Perera, Commented Jan 8, 2017 at 12:45

Trae Abell · Accepted Answer · 2017-01-11 08:01:14Z

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

Example code customized for your use:

<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 Proof: https://jsfiddle.net/g77pnex5/

Jawad Ahbab · Accepted Answer · 2017-01-08 12:47:49Z

0

I can't help you giving codes. But I can help you saying that you can use "Google Chart" for this. You need some tutorial but if you know js, php that will be easy to learn.

But if you dont want to use any plugin or such things that will be hard I think..

Just take a snap at google chart then decide. Search it on google. Thanks

answered Jan 8, 2017 at 12:47

Jawad Ahbab

1,6661 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Drawing a bar graph using mysql data using php

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related