angularjs CDN https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
Chart.js
chart.js is a simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.
https://www.chartjs.org/
https://www.chartjs.org/docs/latest/
CREATE TABLE `productsales` (
`saleid` int(11) NOT NULL,
`productid` int(11) NOT NULL,
`amount` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `productsales`
ADD PRIMARY KEY (`saleid`);
ALTER TABLE `productsales`
MODIFY `saleid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
CREATE TABLE `products` (
`id` int(11) NOT NULL,
`productname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `products` (`id`, `productname`) VALUES
(1, 'Ipad'),
(2, 'Iphone'),
(3, 'Macbook'),
(4, 'Mac');
ALTER TABLE `products`
ADD PRIMARY KEY (`id`);
ALTER TABLE `products`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
//index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS PHP MySQLi Pie Doughnut Chart using ChartJS</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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"><h1>AngularJS PHP MySQLi Pie Doughnut Chart using ChartJS</h1>
<div class="col-sm-3 col-md-offset-1" ng-init="fetchproducts()">
<h3 class="page-header text-center">Add Purchase</h3>
<div class="form-group">
<label>Select Product:</label>
<select ng-model="productid" class="form-control" name="productid">
<option ng-repeat="rs in products" value="{{rs.id}}">{{rs.productname}}</option>
</select>
</div>
<div class="form-group">
<label>Amount:</label>
<input type="text" class="form-control" name="amount" ng-model="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()">×</button>
{{ message }}
</div>
<div class="alert alert-danger text-center" ng-show="error">
<button type="button" class="close" aria-hidden="true" ng-click="clear()">×</button>
{{ message }}
</div>
</div>
<div class="col-sm-7" ng-init="fetchsales()">
<h3 class="page-header text-center">Product Sales Chart</h3>
<canvas id="dvCanvas" height="400" width="400"></canvas>
</div>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.error = false;
$scope.success = false;
$scope.fetchproducts = function(){
$http({
method: 'GET',
url: 'fetchproducts.php',
}).then(function (data){
console.log(data)
$scope.products = data.data;
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.purchase = function(){
$http({
method: 'POST',
url: 'purchase.php',
data:{amount:$scope.amount, productid:$scope.productid}
}).then(function (data){
console.log(data)
if(data.error){
$scope.error = true;
$scope.success = false;
$scope.message = data.data.message;
}
else{
$scope.success = true;
$scope.error = false;
$scope.message = data.data.message;
$scope.fetchsales();
$scope.buy = '';
}
},function (error){
console.log(error, 'can not get data.');
});
}
//this fetches the data for our table
$scope.fetchsales = function(){
$http({
method: 'GET',
url: 'fetchsales.php',
}).then(function (data){
console.log(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.data.total,
backgroundColor: ['blue', 'green', 'red', 'yellow']
}],
labels: data.data.productname
},
options: {
responsive: false
}
});
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.clear = function(){
$scope.error = false;
$scope.success = false;
}
});
</script>
</body>
</html>
dbcon.php
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
fetchproducts.php
//fetchproducts.php
<?php
include('dbcon.php');
$out = array();
$sql = "SELECT * FROM products";
$query = $conn->query($sql);
while($row=$query->fetch_array()){
$out[] = $row;
}
echo json_encode($out);
?>
purchase.php
//purchase.php
<?php
include('dbcon.php');
$out = array('error' => false);
$data = json_decode(file_get_contents("php://input"));
$productid = $data->productid;
$amount = $data->amount;
$sql = "INSERT INTO productsales (productid, amount) VALUES ('$productid', '$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
//fetchsales.php
<?php
include('dbcon.php');
$out = array();
$sql = "SELECT *, sum(amount) AS total FROM productsales LEFT JOIN products ON products.id=productsales.productid GROUP BY productsales.productid";
$query = $conn->query($sql);
while($row=$query->fetch_array()){
$out['total'][] = $row['total'];
$out['productname'][] = $row['productname'];
}
echo json_encode($out);
?>
