Creating A Sales Chart For Sold Apparels | Free Source Code

Creating a Sales Chart for Sold Apparels

PHP
img_sales_chart

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

 

Facebook Comments
Comments
  • Make a php project on multi store two wheeler bike showroom management.

    Sandy January 5, 2022 1:41 pm Reply

Leave a Reply

Your email address will not be published.