Pie/Doughnut Chart using ChartJS, AngularJS and PHP/MySQLi

Submitted by nurhodelta_17 on Wednesday, January 17, 2018 - 22:14.

Getting Started

I've used CDN for Bootstrap, Angular JS and Chart JS so you need internet connection for them to work.

Creating our Database

First, we're gonna create our MySQL Database where we get our data. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `fruits` (
  `fruitid` int(11) NOT NULL AUTO_INCREMENT,
  `fruitname` varchar(30) NOT NULL,
PRIMARY KEY(`fruitid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `sales` (
  `saleid` int(11) NOT NULL AUTO_INCREMENT,
  `fruitid` int(11) NOT NULL,
  `amount` double NOT NULL,
PRIMARY KEY(`saleid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `fruits` (`fruitid`, `fruitname`) VALUES
(1, 'Apple'),
(2, 'Orange'),
(3, 'Strawberry'),
(4, 'Mango');

index.html

This is our index which contains our add form to update our chart and the chart itself.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>Pie/Doughnut Chart using ChartJS, AngularJS and PHP/MySQLi</title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <style type="text/css">
                canvas{
                        margin:auto;
                }
                .alert{
                        margin-top:20px;
                }
        </style>
</head>
<body ng-controller="myCtrl">
<div class="container">
        <div class="row">
                <div class="col-sm-3 col-md-offset-1" ng-init="fetchfruit()">
                        <h3 class="page-header text-center">Add Purchase</h3>
                        <div class="form-group">
                                <label>Select Fruit:</label>
                                <select ng-model="buy.fruitid" class="form-control">
                                        <option ng-repeat="fruit in fruits" value="{{fruit.fruitid}}">{{fruit.fruitname}}</option>
                                </select>
                        </div>
                        <div class="form-group">
                                <label>Amount:</label>
                                <input type="text" class="form-control" ng-model="buy.amount">
                        </div>
                        <button type="button" ng-click="purchase()" class="btn btn-primary">Buy</button>
                        <div class="alert alert-success text-center" ng-show="success">
                                <button type="button" class="close" aria-hidden="true" ng-click="clear()">&times;</button>
                                {{ message }}
                        </div>
                        <div class="alert alert-danger text-center" ng-show="error">
                                <button type="button" class="close" aria-hidden="true" ng-click="clear()">&times;</button>
                                {{ message }}
                        </div>
                </div>
                <div class="col-sm-7" ng-init="fetchsales()">
                        <h3 class="page-header text-center">Sales Chart</h3>
                        <canvas id="dvCanvas" height="400" width="400"></canvas>
            </div>
        </div>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

This contains our angular js scripts.

var app = angular.module('app', []);
 
app.controller('myCtrl', function ($scope, $http) {
 
    $scope.error = false;
    $scope.success = false;
 
    $scope.fetchfruit = function(){
        $http.get('fetchfruit.php').success(function(data){
            $scope.fruits = data;
        });
    }
 
    $scope.purchase = function(){
        $http.post('purchase.php', $scope.buy)
        .success(function(data){
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.message = data.message;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.message = data.message;
                $scope.fetchsales();
                $scope.buy = '';
            }
        });
    }
 
    //this fetches the data for our table
    $scope.fetchsales = function(){
        $http.get('fetchsales.php').success(function(data){
            var ctx = document.getElementById("dvCanvas").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'pie', // change the value of pie to doughtnut for doughnut chart
                data: {
                    datasets: [{
                        data: data.total,
                        backgroundColor: ['blue', 'green', 'red', 'yellow']
                    }],
                    labels: data.fruitname
                },
                options: {
                    responsive: false
                }
            });
 
        });
    }
 
    $scope.clear = function(){
        $scope.error = false;
        $scope.success = false;
    }
 
});

fetchfruit.php

This is our PHP api that fetches data for our add form.

<?php
 
        $conn = new mysqli("localhost", "root", "", "angular");
 
        $out = array();
 
        $sql = "SELECT * FROM fruits";
        $query = $conn->query($sql);
 
        while($row=$query->fetch_array()){
            $out[] = $row;
        }
 
        echo json_encode($out);
 
?>

purchase.php

This is our PHP api/code that adds data into our database.

<?php
 
        $conn = new mysqli("localhost", "root", "", "angular");
 
        $out = array('error' => false);
 
        $data = json_decode(file_get_contents("php://input"));
 
        $fruitid = $data->fruitid;
        $amount = $data->amount;
 
        $sql = "INSERT INTO sales (fruitid, amount) VALUES ('$fruitid', '$amount')";
        $query = $conn->query($sql);
 
        if($query){
                $out['message'] = "Purchase added successfully";
        }
        else{
                $out['error'] = true;
                $out['message'] = "Cannot add purchase"; 
        }
 
        echo json_encode($out);
 
?>

fetchsales.php

Lastly, this is our PHP api that fetches data for our chart.

<?php
 
        $conn = new mysqli("localhost", "root", "", "angular");
 
        $out = array();
 
        $sql = "SELECT *, sum(amount) AS total FROM sales LEFT JOIN fruits ON fruits.fruitid=sales.fruitid GROUP BY sales.fruitid";
        $query = $conn->query($sql);
 
        while($row=$query->fetch_array()){
            $out['total'][] = $row['total'];
            $out['fruitname'][] = $row['fruitname'];
        }
 
        echo json_encode($out);
 
?>

That ends this tutorial. Happy Coding :)

Add new comment

479 views