Live Poll and Voting system Using PHP & Ajax | Morris.js donut chart

php-ajax-_-morris-donut-chart

Live Poll and Voting system Using PHP & Ajax

 

Live Poll and Voting system Using PHP & Ajax In the event that you are searching for Morris.js graph instructional exercise with Ajax PHP and Mysql then in you can discover from this post. In this post, we need to make Live Donut Chart by utilizing Morris.js Chart library with Ajax PHP and Mysql. Here Live graph implies diagram will show live information from Mysql database without an invigorate of the website page. We as a whole know Morris.js diagram library is extremely prevalent chart library to show information in outline organize on a site page and a large portion of the software engineer utilize this library for show information in the realistic organization on system page.

In our one of the past web instructional exercise we have as of now perceived how to utilize Morris.js diagram library with straightforward PHP script and Mysql database and in that post, we have seen Area outline, Bar graph, and Line diagram. So in this post, we will see Donut diagram from Morris.js library. However, this time we have utilized Ajax for making live information graph, that implies when we have entered information into a table then that information will be refreshed on the diagram without an invigorate of the website page.

At the point when the client will choose his most loved structure from the rundown and tap on like catch then his system like information will be embedded into the table. For embed information, we have utilized Ajax ask for, so when Ajax ask for has been effectively finished then we need to get information from a table and after this, we have utilized Morris.js outline library setData() technique, by utilizing this strategy we can refresh diagram information without a revive of the website page. In this strategy we have required information in JSON design then this technique can refresh graph information. So along these lines, we need to Create basic Live information Donut Chart by utilizing Morris.js Chart library with Ajax PHP and Mysql.

Live Demo   Download Source Code

Index.php

<?php 
//index.php
$connect = mysqli_connect("localhost", "root", "", "demo_lisenme");
$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> PHP & Ajax | Morris donut chart with dynamic json data | Lisenme.com </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">PHP & Ajax | Morris donut chart with dynamic json data </h2>
      <br>
   <form method="post" id="like_form">
    <div class="form-group">
     <label>Like Any one Coding </label>
     <div class="radio">
      <label><input type="radio" name="framework" value="HTML5" /> HTML5</label>
     </div>
     <div class="radio">
      <label><input type="radio" name="framework" value="CSS3" /> CSS3</label>
     </div>
     <div class="radio">
      <label><input type="radio" name="framework" value="JAVASCRIPT" /> JAVASCRIPT</label>
     </div>
     <div class="radio">
      <label><input type="radio" name="framework" value="PHP" /> PHP</label>
     </div>
     <div class="radio">
      <label><input type="radio" name="framework" value="JQUERY" /> JQUERY</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", "", "demo_lisenme");
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;
}
?>

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Irbaaz
Irbaaz
2 years ago

Sir where is db file

1
0
Would love your thoughts, please comment.x
()
x