If you are looking for Morris.js chart tutorial with Ajax PHP and Mysql then in you can find from this post. In this post we have make Live Donut Chart by using Morris.js Chart library with Ajax PHP and Mysql. Here Live chart means chart will display live data from Mysql database without refresh of webpage. We all know Morris.js chart library is very popular graph library to display data in chart format on web page and most of the programmer use this library for display data in graphic format on web page.
In our one of the previous web tutorial we have already seen how to use Morris.js chart library with simple PHP script and Mysql database and in that post we have seen Area chart, Bar chart and Line chart. So in this post we will seen Donut chart from Morris.js library. But this time we have use Ajax for make live data chart, that means when we have enter data into table then that data will be updated on chart without refresh of webpage.
For understand this topic we have take an example of popularity of PHP framework, for this things we have make simple form with selection of one framework from five different framework. When user will select his favorite framework from list and click on like button then his framework like dat will be inserted into table. For insert data we have use Ajax request, so when Ajax request has been successfully completed then we have fetch data from table and after this we have use Morris.js chart library setData() method, by using this method we can update chart data without refresh of web page. In this method we have required data in JSON format then this method can update chart data. So this way we have Create simple Live data Donut Chart by using Morris.js Chart library with Ajax PHP and Mysql.
Source Code
index.php
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$sub_query = "
SELECT framework, count(*) as no_of_like FROM like_table
GROUP BY framework
ORDER BY id ASC";
$result = mysqli_query($connect, $sub_query);
$data = array();
while($row = mysqli_fetch_array($result))
{
$data[] = array(
'label' => $row["framework"],
'value' => $row["no_of_like"]
);
}
$data = json_encode($data);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Live Donut Chart by using Morris.js with Ajax PHP</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">Live Donut Chart by using Morris.js with Ajax PHP</h2>
<form method="post" id="like_form">
<div class="form-group">
<label>Like Any one PHP Framework</label>
<div class="radio">
<label><input type="radio" name="framework" value="Codeigniter" /> Codeigniter</label>
</div>
<div class="radio">
<label><input type="radio" name="framework" value="Laravel" /> Laravel</label>
</div>
<div class="radio">
<label><input type="radio" name="framework" value="Symfony" /> Symfony</label>
</div>
<div class="radio">
<label><input type="radio" name="framework" value="Yii" /> Yii</label>
</div>
<div class="radio">
<label><input type="radio" name="framework" value="CakePHP" /> CakePHP</label>
</div>
</div>
<div class="form-group">
<input type="submit" name="like" class="btn btn-info" value="Like" />
</div>
</form>
<div id="chart"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var donut_chart = Morris.Donut({
element: 'chart',
data: <?php echo $data; ?>
});
$('#like_form').on('submit', function(event){
event.preventDefault();
var checked = $('input[name=framework]:checked', '#like_form').val();
if(checked == undefined)
{
alert("Please Like any Framework");
return false;
}
else
{
var form_data = $(this).serialize();
$.ajax({
url:"action.php",
method:"POST",
data:form_data,
dataType:"json",
success:function(data)
{
$('#like_form')[0].reset();
donut_chart.setData(data);
}
});
}
});
});
</script>
action.php
<?php
//action.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["framework"]))
{
$query = "
INSERT INTO like_table(framework) VALUES('".$_POST["framework"]."')
";
mysqli_query($connect, $query);
$sub_query = "
SELECT framework, count(*) as no_of_like FROM like_table
GROUP BY framework
ORDER BY id ASC";
$result = mysqli_query($connect, $sub_query);
$data = array();
while($row = mysqli_fetch_array($result))
{
$data[] = array(
'label' => $row["framework"],
'value' => $row["no_of_like"]
);
}
$data = json_encode($data);
echo $data;
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `like_table`
--
CREATE TABLE IF NOT EXISTS `like_table` (
`id` int(11) NOT NULL,
`framework` varchar(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=45 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `like_table`
--
INSERT INTO `like_table` (`id`, `framework`) VALUES
(2, 'Laravel'),
(3, 'Symfony'),
(4, 'Yii'),
(5, 'CakePHP'),
(6, 'Codeigniter'),
(7, 'Codeigniter'),
(8, 'Laravel'),
(9, 'Yii'),
(10, 'Codeigniter'),
(11, 'Laravel'),
(12, 'Symfony'),
(13, 'Codeigniter'),
(14, 'Yii'),
(15, 'Codeigniter'),
(16, 'CakePHP'),
(17, 'Yii'),
(18, 'Codeigniter'),
(19, 'Laravel'),
(20, 'Laravel'),
(21, 'Laravel'),
(22, 'Laravel'),
(23, 'Codeigniter'),
(24, 'Codeigniter'),
(25, 'Codeigniter'),
(26, 'CakePHP'),
(27, 'CakePHP'),
(28, 'Codeigniter'),
(29, 'Laravel'),
(30, 'Symfony'),
(31, 'Yii'),
(32, 'Codeigniter'),
(33, 'Codeigniter'),
(34, 'Laravel'),
(35, 'Symfony'),
(36, 'Yii'),
(37, 'CakePHP'),
(38, 'Codeigniter'),
(39, 'Codeigniter'),
(40, 'Codeigniter'),
(41, 'Codeigniter'),
(42, 'CakePHP'),
(43, 'Laravel'),
(44, 'Symfony');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `like_table`
--
ALTER TABLE `like_table`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `like_table`
--
ALTER TABLE `like_table`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=45;
Thanks its so helpful
ReplyDeleteMerci...
ReplyDelete