Sales Graph/Chart using Chart.js, Bootstrap 4, jQuery and PHP

Somehow, you want an illustration of your sales or other statistical graph for better visualization or comparison in your existing system reports. Here is one of the examples you can use to achieve it using Chart.js.

Chart.js is simple yet flexible JavaScript charting for designers & developers.

You can download and find more examples from chartjs.org.

This article shows you an example of integrating Chart.js with PHP and MySQL to provide a comparison chart on annually sales graph.

Creating a Chart

In creating a chart, it is easy to get started with Chart.js. All that is required is the script included in your page along with a single <canvas> node to render the chart.

Chart.js is using html canvas like this. In this example, we create a bar chart for a single dataset and render that in a page. 

Make sure you have included the chart.js source files in your page. You can download the latest version from their website or use the following from CDN

PHP MySQL

Prepare your database and create sales table. For example.

	CREATE TABLE `sales` (
	`sales_id` int(11) NOT NULL,
	`transaction_amount` double NOT NULL,
	`sales_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

view raw create-ks-sales-graph-table.sql hosted with ❤ by GitHub

Next is creating the configuration and main file.

Create your configuration on database connection using a file config.php and write the following code to connect your project in your newly created database. In my case, I name my database as ks_sales_graph.

Declare the following variables according to your development preferences.

$host - your database host address.
$user - database username
$pass - database user password (if any). XAMMP phpMyAdmin default user password is empty.
$database - finally your target database which you want to connect.

	<?php
	/**
	* Created by K-SOLUTIONS.
	* User: kevin
	* Date: 13/05/2018
	* Time: 5:25 PM
	*/
	//DB Handler
	$host = 'localhost';
	$user = 'root';
	$pass = '';
	$database = 'ks_sales_graph';
	$conn = mysqli_connect($host,$user,$pass,$database);
	if (!$conn){
	die("DB Handler Connection Failed: " . mysqli_connect_error());
	}

view raw config.php hosted with ❤ by GitHub

Next is the index.php or your main page.

Of course, you will have to require your previously created file, your config.php in order to use your database connection in your project.

	<?php
	//REQUIRE CONFIG FOR DB HANDLING
	require 'config.php';

view raw index.php hosted with ❤ by GitHub

In my case, I used Year option to display my sales graph. So when a user select a year option and try to search for it, the following query will be executed.

	<?php
	//FETCH EACH SALE FOR THE YEAR
	$sql = "SELECT SUM(transaction_amount) AS total_sales FROM sales WHERE DATE_FORMAT(sales_date, '%Y')='{$year}' GROUP BY sales_date";
	$result = mysqli_query($conn,$sql);
	while ($row = mysqli_fetch_assoc($result)){
	$data_array[] = $row['total_sales'];
	$year_sale += $row['total_sales'];
	}
	//IMPLODE THE ARRAY
	$data = implode(',', $data_array);

view raw index.php hosted with ❤ by GitHub

The data that have been fetch are pass in the JavaScript to generate the graph in your canvas using the variable $data.

	<script>
	var year = '<?php echo $year;?>';
	var year_sale = '<?php echo $year_sale;?>';
	var data = [<?php echo $data;?>];
	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	var config = {
	type: 'line',
	data: {
	labels: months,
	datasets: [{
	label: 'Total Sales',
	backgroundColor: '#88a8ff',
	borderColor: '#88a8ff',
	data: data,
	fill: false,
	pointRadius: 6,
	}]
	},
	options: {
	responsive: true,
	title: {
	display: true,
	text: 'Sales Graph for '+year
	},
	legend: {
	display: false
	},
	hover: {
	mode: 'nearest',
	intersect: true
	},
	scales: {
	xAxes: [{
	display: true,
	scaleLabel: {
	display: true,
	labelString: 'Sales for the year: ₱: '+year_sale
	}
	}],
	yAxes: [{
	display: true,
	scaleLabel: {
	display: true,
	labelString: 'Sales Amount in ₱'
	}
	}]
	}
	}
	};
	window.onload = function() {
	var ctx = document.getElementById('canvas').getContext('2d');
	window.myLine = new Chart(ctx, config);
	};
	</script>

view raw index.php hosted with ❤ by GitHub

The output of your project should generate a chart that shows your sales annually.

You can download the full source code below. 

SOURCE CODE

1. Download the source code & place it on your host.
2. Create a database 'ks_sales_graph'.
3. Import the sql file located at the source code's folder.
4. Test it on your host.

DOWNLOAD IT HERE -> DOWNLOAD

Enjoy !

Please share this if you find it helpful. Thank you.

Share: