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.

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.


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.

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.

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

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: