Creating a Sales Chart for Sold Apparels
Getting Started. In this tutorial, we will be using XAMPP as our local web server to run our PHP scripts and MySQL database server.
Search https://cdnjs.com/libraries/Chart.js/ for use in css links and scripts.
Open your XAMMP’s Control Panel and start the Apache and MySQL.
Create a folder in C://xampp/htdocs/salesreport
Creating Our Database and Table
Open your phpMyAdmin i.e. http://localhost/phpmyadmin and create a new database named salesdb.
Create a table named saleschart with 10 columns to indicate the types of apparel namely: formal_dress, ladies_high_waist_pants, ladies_polo_shirt, knitted_blouse, formal_blouse, ladies_slacks, candy_pants, leggings, rash_guard, jogging_pants. Insert the data on number of sold apparels.
Create Our Database Connection
Open a text editor software like Sublime Text 3, Notepad ++ or a preferred one. Create a new PHP file named db.php using these codes and saved in C://xampp/htdocs/salesreport
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "salesdb"; $conn = mysqli_connect($servername,$username,$password,$dbname); ?>
Create index.php
Create and save another PHP file named index.php and write the following scripts:
<?php
include("db.php");
$query = "select formal_dress, ladies_high_waist_pants, ladies_polo_shirt, knitted_blouse, formal_blouse, ladies_slacks, candy_pants, leggings, rash_guard, jogging_pants from info";
$result = mysqli_query($conn,$query);
if (mysqli_num_rows($result) >= 1) {
while($row = mysqli_fetch_assoc($result)) {
$formal_dress = $row['formal_dress'];
$ladies_high_waist_pants = $row['ladies_high_waist_pants'];
$ladies_polo_shirt = $row['ladies_polo_shirt'];
$knitted_blouse = $row['knitted_blouse'];
$formal_blouse = $row['formal_blouse'];
$ladies_slacks = $row['ladies_slacks'];
$candy_pants = $row['candy_pants'];
$leggings = $row['leggings'];
$rash_guard = $row['rash_guard'];
$jogging_pants = $row['jogging_pants'];
}
}
else
{
echo "something went wrong";
}
?>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet">
</head>
<body>
<canvas id="myChart" style="height: auto; width: 500px;"></canvas>
<?php
echo "<input type ='hidden' id= 'formal_dress' value = '$formal_dress' >";
echo "<input type ='hidden' id= 'ladies_high_waist_pants' value = '$ladies_high_waist_pants' >";
echo "<input type ='hidden' id= 'ladies_polo_shirt' value = '$ladies_polo_shirt' >";
echo "<input type ='hidden' id= 'knitted_blouse' value = '$knitted_blouse' >";
echo "<input type ='hidden' id= 'formal_blouse' value = '$formal_blouse' >";
echo "<input type ='hidden' id= 'ladies_slacks' value = '$ladies_slacks' >";
echo "<input type ='hidden' id= 'candy_pants'value = '$candy_pants' >";
echo "<input type ='hidden' id= 'leggings'value = '$leggings' >";
echo "<input type ='hidden' id= 'rash_guard'value = '$rash_guard' >";
echo "<input type ='hidden' id= 'jogging_pants'value = '$jogging_pants' >";
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var formal_dress = document.getElementById("formal_dress").value;
var ladies_high_waist_pants = document.getElementById("ladies_high_waist_pants").value;
var ladies_polo_shirt = document.getElementById("ladies_polo_shirt").value;
var knitted_blouse = document.getElementById("knitted_blouse").value;
var formal_blouse = document.getElementById("formal_blouse").value;
var ladies_slacks = document.getElementById("ladies_slacks").value;
var candy_pants = document.getElementById("candy_pants").value;
var leggings = document.getElementById("leggings").value;
var rash_guard = document.getElementById("rash_guard").value;
var jogging_pants = document.getElementById("jogging_pants").value;
window.onload = function()
{
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var config = {
type: 'bar',
data: {
borderColor : "#fffff",
datasets: [{
data: [
formal_dress,
ladies_high_waist_pants,
ladies_polo_shirt,
knitted_blouse,
formal_blouse,
ladies_slacks,
candy_pants,
leggings,
rash_guard,
jogging_pants
],
borderColor : "#fff",
borderWidth : "3",
hoverBorderColor : "#000",
label: 'Sales Report',
backgroundColor: [
"#0190ff",
"#56d798",
"#ff8397",
"#6970d5",
"#f312cb",
"#ff0060",
"#ffe400",
"#ff9999",
"#4b0872",
"#fc4148"
],
hoverBackgroundColor: [
"#f38b4a",
"#56d798",
"#ff8397",
"#6970d5",
"#ffe400",
"#ffff99",
"#ffcc99",
"#670d43"
]
}],
labels: [
'formal_dress',
'ladies_high_waist_pants',
'ladies_polo_shirt',
'knitted_blouse',
'formal_blouse',
'ladies_slacks',
'candy_pants',
'leggings',
'rash_guard',
'jogging_pants'
]
},
options: {
responsive: true
}
};
var ctx = document.getElementById('myChart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
</body>
</html>
Download Now
Make a php project on multi store two wheeler bike showroom management.