Dynamic morris donut chart with php mysql

Question

I am trying to make Morris donuts chart and for unknown reasons I am getting blank page. I have two separate files, Chart.php contains the sql statement and then the mail file for displaying the chart.

Chart.php Code

  try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
 members GROUP BY gender ORDER BY memberID ASC ");
        $stmt->execute();
      }
  catch(PDOException $e) {
        echo '<p class="bg-danger">'.$e->getMessage().'</p>';
      }

    $data = array();

   while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $array[] = array(
          'lable' => $row['gender'],
          'value' => $row['no_of_gender']
          );
      }

$data = json_encode($data);

here is my javascript code for receiving $data Chart.php

 <script type="text/javascript" language="javascript" >

      $(document).ready(function(){

         var donut_chart = Morris.Donut({
            url :"charts.php",
            element: 'chart',
            data: <?php echo $data; ?>
              });
          })

  </script>

Can you share what kind of errors you are seeing? If you get a blank page, what does your javascript console say? what is the source of the page that get's rendered? — tristansokol
– tristansokol, Commented Sep 14, 2017 at 17:34

Ravinder Reddy · Accepted Answer · 2017-09-14 18:49:38Z

1

In chart.php File you are encoding an empty array.

Replace

$data = json_encode($data);

with

$data = json_encode($array);

And make sure that you are correctly passing $data from chart.php file to javascript code.

A working code is below

<html>
<head>
    // if you have downloaded these files to your project, change the path to include them.
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/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>
</head>
<body>

<?php
try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
 members GROUP BY gender ORDER BY memberID ASC ");
        $stmt->execute();
      }
  catch(PDOException $e) {
        echo '<p class="bg-danger">'.$e->getMessage().'</p>';
      }

    $data = array(); // define array

   while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $data[] = array(
          'lable' => $row['gender'],
          'value' => $row['no_of_gender']
          );  
      }

//print_r($data);  // to check the array data
$json_data = json_encode($data);  // convert to json array
 ?>
<div id="chart" style="height: 250px;"></div>

<script type="application/javascript">

    Morris.Donut({
      element: 'chart',  // div id
      data: <?php echo $json_data; ?>,
      xkey: 'lable',
      ykeys: ['value'],
      labels: ['Value']
  });

</script>


</body>
</html>

edited Sep 14, 2017 at 18:49

answered Sep 14, 2017 at 17:17

Ravinder Reddy

3,8791 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Samuel Sam Over a year ago

am getting Undefined variable: data

Ravinder Reddy Over a year ago

Update answer to include every thing in single page.

Samuel Sam Over a year ago

I have done and I am getting.....Uncaught SyntaxError: Unexpected token

Samuel Sam Over a year ago

Ravinder [email protected] data: <?php echo $json_data); ?> here is the Error....Uncaught SyntaxError: Unexpected token ;

Samuel Sam Over a year ago

Ravinder Reddy@ thanks forgive if I am not getting things right my JavaScript is not good... this are taking shape I have see the values pass by $data in console but now I am getting this error ..........Uncaught ReferenceError: Morris is not defined and it is coming from the JavaScript

|

Collectives™ on Stack Overflow

Dynamic morris donut chart with php mysql

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related