Sales Chart using php and mysql

Posted on June 6, 2021

5 min read

1,877

This Tutorial will teach you how to make the Sales Chart using php and mysql. In order to create the project i have used editor as PHPStrom.

First Step Establish the Database Connection

Create the Page db.php.

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "salesdb";

$conn = mysqli_connect($servername,$username,$password,$dbname);

After that design the index page.

Index.php

<?php

include("db.php");

$query = "select jan,feb,march,april,may,june,july from  saleschart";
$result = mysqli_query($conn,$query);

if(mysqli_num_rows($result) >= 1) {
    while ($row = mysqli_fetch_assoc($result)) {

$jan = $row['jan'];
        $feb = $row['feb'];
        $march = $row['march'];
        $april = $row['april'];
        $may = $row['may'];
        $june = $row['june'];
        $july = $row['july'];
    }
}
    else
    {
    echo "somting went wrong";

}
?>

<html>

<head>

</head>
<body>

<?php

echo "<input type='hidden' id= 'jan' value = '$jan' >";
echo "<input type='hidden' id= 'feb' value = '$feb' >";
echo "<input type='hidden' id= 'march' value = '$march' >";
echo "<input type='hidden' id= 'april' value = '$april' >";
echo "<input type='hidden' id= 'may' value = '$may' >";
echo "<input type='hidden' id= 'june' value = '$june' >";
echo "<input type='hidden' id= 'july' value = '$july' >";

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

window.onload = function()
    {
        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };
        var config = {
            type: 'bar',
            data: {
                borderColor : "#fffff",
                datasets: [{
                    data: [
                        jan,
                        feb,
                        march,
                        april,
                        may,
                        june,
                        july
                    ],
                    borderColor : "#fff",
                    borderWidth : "3",
                    hoverBorderColor : "#000",

label: 'Monthly Sales Report',

backgroundColor: [
                        "#0190ff",
                        "#56d798",
                        "#ff8397",
                        "#6970d5",
                        "#f312cb",
                        "#ff0060",
                        "#ffe400"

],
                    hoverBackgroundColor: [
                        "#f38b4a",
                        "#56d798",
                        "#ff8397",
                        "#6970d5",
                        "#ffe400"
                    ]
                }],

labels: [
                    'Jan',
                    'Feb',
                    'March',
                    'April',
                    'May',
                    'June',
                    'July'
                ]
            },

options: {
                responsive: true

}
        };
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myPie = new Chart(ctx, config);

};
</script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<?php

include("db.php");

$query = "select jan,feb,march,april,may,june,july from saleschart";

$result = mysqli_query($conn,$query);

if(mysqli_num_rows($result) >= 1) {

while ($row = mysqli_fetch_assoc($result)) {

$jan = $row['jan'];

$feb = $row['feb'];

$march = $row['march'];

$april = $row['april'];

$may = $row['may'];

$june = $row['june'];

$july = $row['july'];

}

else

{

echo "somting went wrong";

}

<html>

<head>

</head>

<body>

<?php

echo "<input type='hidden' id= 'jan' value = '$jan' >";

echo "<input type='hidden' id= 'feb' value = '$feb' >";

echo "<input type='hidden' id= 'march' value = '$march' >";

echo "<input type='hidden' id= 'april' value = '$april' >";

echo "<input type='hidden' id= 'may' value = '$may' >";

echo "<input type='hidden' id= 'june' value = '$june' >";

echo "<input type='hidden' id= 'july' value = '$july' >";

var jan = document.getElementById("jan").value;

var feb = document.getElementById("feb").value;

var march = document.getElementById("march").value;

var april = document.getElementById("april").value;

var may = document.getElementById("may").value;

var june = document.getElementById("june").value;

var july = document.getElementById("july").value;

window.onload = function()

{

var randomScalingFactor = function() {

return Math.round(Math.random() * 100);

};

var config = {

type: 'bar',

data: {

borderColor : "#fffff",

datasets: [{

data: [

jan,

feb,

march,

april,

may,

june,

july

borderColor : "#fff",

borderWidth : "3",

hoverBorderColor : "#000",

label: 'Monthly Sales Report',

backgroundColor: [

"#0190ff",

"#56d798",

"#ff8397",

"#6970d5",

"#f312cb",

"#ff0060",

"#ffe400"

hoverBackgroundColor: [

"#f38b4a",

"#56d798",

"#ff8397",

"#6970d5",

"#ffe400"

]

}],

labels: [

'Jan',

'Feb',

'March',

'April',

'May',

'June',

'July'

]

options: {

responsive: true

}

};

var ctx = document.getElementById('myChart').getContext('2d');

window.myPie = new Chart(ctx, config);

};

</script>

</body>

</html>

Sales Chart using php and mysql

First Step Establish the Database Connection

i have attached the video link below. which will do this tutorials step by step.

Node js React Mongodb Search Functionality

Node js Angular Mongodb Search Functionality

How to Search Records Node js Express Mongodb

PHP MYSQL CRUD Application || Create,Read,Update,Delete

MilkBar Inventory Management using Php

Registration System using Php Mysql

Leave a Reply Cancel reply

Check Also

Node js React Mongodb Search Functionality

Recent Posts