Pie Doughnut Chart using ChartJS AngularJS with PHP MySQLi

Pie Doughnut Chart using ChartJS AngularJS with PHP MySQLi

In this Post We Will Explain About is Pie Doughnut Chart using ChartJS AngularJS with PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Creating AngularJS Charts in PHP using a Database Example

In this post we will show you Best way to implement How To Create Dynamic Pie Chart in PHP or AngularJS with MySQLi, hear for Create Interactive Charts in AngularJS using PHP and MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating simple Database

CREATE TABLE `posts` (
  `postid` int(11) NOT NULL AUTO_INCREMENT,
  `postname` varchar(30) NOT NULL,
PRIMARY KEY(`postid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `blogs` (
  `blogid` int(11) NOT NULL AUTO_INCREMENT,
  `postid` int(11) NOT NULL,
  `totalblog` double NOT NULL,
PRIMARY KEY(`blogid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `posts` (`postid`, `postname`) VALUES
(1, 'Live24u'),
(2, 'w3free'),
(3, 'tutorials'),
(4, 'examples');

index.html

It is simple main index which Data contains simple Main add form to update Data simple chart and the chart itself.

Also Read :   Bootstrap Toggle switch Update Database field using Ajax

<!DOCTYPE html>
<html ng-app="liveApp">
<head>
	<title>Pie and Doughnut Chart using simple ChartJS with AngularJS and PHP MySQLi Example</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:10px;
		}
	</style>
</head>
<body ng-controller="liveCtrl">
<div class="live container">
	<div class="live row">
		<div class="live col-sm-3 col-md-offset-1" ng-init="retrivePost()">
			<h3 class="live page-header text-center">Add Purchase</h3>
			<div class="live form-group">
				<label>Select Blogs:</label>
				<select ng-model="itemget.postid" class="live form-control">
					<option ng-repeat="blgsdata in posts" value="{{blgsdata.postid}}">{{blgsdata.postname}}</option>
				</select>
			</div>
			<div class="live form-group">
				<label>Total Blogs:</label>
				<input type="text" class="live form-control" ng-model="itemget.totalblog">
			</div>
			<button type="button" ng-click="Getitems()" class="btn btn-success">Buy</button>
			<div class="live alert alert-success text-center" ng-show="success">
				<button type="button" class="live close" aria-hidden="true" ng-click="dbCls()">×</button>
				{{ notification }}
			</div>
			<div class="live alert alert-danger text-center" ng-show="error">
				<button type="button" class="close" aria-hidden="true" ng-click="dbCls()">×</button>
				{{ notification }}
			</div>
		</div>
		<div class="live col-sm-7" ng-init="retriveblogs()">
			<h3 class="page-header text-center">Sales Chart</h3>
			<canvas id="dvCanvas" height="500" width="500"></canvas>
	    </div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

main.js

This Data Simple contains simple main angular js scripts.

Also Read :   Dynamically addClass CSS click using jQuery

var liveApp = angular.module('liveApp', []);
 
liveApp.controller('liveCtrl', function ($scope, $http) {
 
    $scope.error = false;
    $scope.success = false;
 
    $scope.retrivePost = function(){
        $http.get('retrivePost.php').success(function(data){
            $scope.posts = data;
        });
    }
 
    $scope.Getitems = function(){
        $http.post('Getitems.php', $scope.itemget)
        .success(function(data){
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.notification = data.notification;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.notification = data.notification;
                $scope.retriveblogs();
                $scope.itemget = '';
            }
        });
    }
 
    //this Retrives the data for simple table
    $scope.retriveblogs = function(){
        $http.get('retriveblogs.php').success(function(data){
            var ctx = document.getElementById("dvCanvas").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: data.total,
                        backgroundColor: ['blue', 'green', 'red', 'yellow']
                    }],
                    labels: data.postname
                },
                options: {
                    responsive: false
                }
            });
 
        });
    }
 
    $scope.dbCls = function(){
        $scope.error = false;
        $scope.success = false;
    }
 
});

retrivePost.php

It is simple PHP web api that Retrives data for simple add form.

<?php
	$db_con = new mysqli("localhost", "YOUR_USER_NAME", "YOUR_USER_PASSWORD", "live24u");
	$myoutput = array();
	$mylsql = "SELECT * FROM posts";
	$query = $db_con->query($mylsql);
 
	while($dbrow=$query->fetch_array()){
	    $myoutput[] = $dbrow;
	}
	echo json_encode($myoutput);
 
?>

Getitems.php

It is simple PHP Web api/code that puts data into simple database.

<?php
	$db_con = new mysqli("localhost", "YOUR_USER_NAME", "YOUR_USER_PASSWORD", "live24u");
	$myoutput = array('error' => false);
	$data = json_decode(file_get_contents("php://input"));
	$postid = $data->postid;
	$totalblog = $data->totalblog;
	$mylsql = "INSERT INTO blogs (postid, totalblog) VALUES ('$postid', '$totalblog')";
	$query = $db_con->query($mylsql);
 
	if($query){
		$myoutput['notification'] = "Get Items added successfully";
	}
	else{
		$myoutput['error'] = true;
		$myoutput['notification'] = "Cannot add Getitems"; 
	}
 
	echo json_encode($myoutput);
 
?>

retriveblogs.php

Last step, It is simple PHP web api that Retrives data for simple chart.

Also Read :   AngularJS Line Chart using ChartJS with PHP MySQLi

<?php
	$db_con = new mysqli("localhost", "YOUR_USER_NAME", "YOUR_USER_PASSWORD", "live24u");
	$myoutput = array();
	$mylsql = "SELECT *, sum(totalblog) AS total FROM blogs LEFT JOIN posts ON posts.postid=blogs.postid GROUP BY blogs.postid";
	$query = $db_con->query($mylsql);
 
	while($row=$query->fetch_array()){
	    $myoutput['total'][] = $row['total'];
	    $myoutput['postname'][] = $row['postname'];
	}
	echo json_encode($myoutput);
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is How To Create Dynamic Pie Chart in PHP or AngularJS with MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.