Morris Donut chart with data from mysql

Question

With the below code I am trying to create a Morris Donut chart. But i am not getting the output as expected. This is the first time i am trying to create a morris chart by fetching data from mysql. So if any big mistake, please forgive me. Here is the code "morris.php"

<?php
require_once('connection.php');
?>
<html>
<head>
 <link rel="stylesheet" href="morris.css">
 <script src="jquery.min.js"></script>
 <script src="raphael-min.js"></script>
 <script src="morris.min.js"></script>
 <meta charset=utf-8 />
</head>
<body>

<?php 
$sql= "select wlt_txn_cat as cat , sum(wlt_txn_amount) as amt from wallet_txns where wlt_txn_type = 'Expense' group by wlt_txn_amount desc";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
if ( mysqli_num_rows($result) >0)
while($row = mysqli_fetch_array($result))
{
?>

<div id="donut-example" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
  element: 'donut-example',
  data: [

    {label: "<?php echo $row['cat'] ?>", value: "<?php echo $row['amt'] ?>"}

        ]
  });

</script>

 <?php  } ?>

</body>
</html>

The screen shots.... In the image, what i am getting is displayed in the left side and what i am expecting is in the right side.

the actual code for getting the correct output (right side of the image attached is the below one... I am trying to get the 'label' and 'value' from by mysql db by using php.

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 15},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20},
    {label: "General Sales", value: 40}
  ],
  backgroundColor: '#ccc',
  labelColor: '#060',
  colors: ['#DD4B39','#4486F7','#FAC504','#019C5A']
  });

"But i am not getting the output as expected"- plz tell us 1st what is ur expected output. — Bacteria, Jun 02 '15 at 16:56
Sorry, the output is coming in separate row for each record. But normally in Morris Donut, the output will display in a circle with all the records . — Prajith A S, Jun 03 '15 at 02:03
@PrajithAS - Update your question with the additional information. Best if you can show the *expected* results and the *actual* results. — Jeremy J Starcher, Jun 03 '15 at 19:55
@Jeremy J Starcher - Attached the screen shots and details. I dont know i am asking for an impossible think. Thanks for the support. — Prajith A S, Jun 04 '15 at 16:18

score 1 · Accepted Answer · answered Jun 06 '15 at 14:06

At last I got a solution, with the help of Google and Stackoverflow ( by searching articles and references). I dont know whether this is the best solution or not. But it works for me as I expected. Here is the Full code which used.

<html>
<head>
 <link rel="stylesheet" href="morris.css">
 <script src="jquery.min.js"></script>
 <script src="raphael-min.js"></script>
 <script src="morris.min.js"></script>
 <meta charset=utf-8 />
</head>
<body>

<?php
$db=new PDO('mysql:dbname=mydb;host=localhost;','root',''); 

$row=$db->prepare ("SELECT wlt_txn_cat as cat,sum(wlt_txn_amount)as amt FROM wallet_txns where  wlt_txn_cat <> 'Transfer' and wlt_txn_type = 'Expense' and wlt_txn_date between DATE (DATE_SUB(LAST_DAY(DATE_ADD(NOW(), INTERVAL 0 MONTH)),INTERVAL DAY(LAST_DAY(DATE_ADD(NOW(), INTERVAL 0 MONTH)))-1 DAY)) and date(CURDATE()) group by wlt_txn_cat ORDER BY wlt_txn_amount desc ");

$row->execute(); 
$json_data=array();  
foreach($row as $rec)  
{  
    $json_array['label']=$rec['cat'];  
    $json_array['value']=$rec['amt'];  
    array_push($json_data,$json_array);  
}  

{ ?>
<div id="donut-example" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
  element: 'donut-example',
  data: <?php echo json_encode($json_data)?>
  });

</script>

<?php  } ?>

</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

In case of accented letters remember: Put

$db->query('SET NAMES utf8');

after the connection to the database in your PHP file**

Otherwise you will get null values instead of the labels.

Thanks to this post and also to the following one: Accented characters in mySQL table

edited May 23 '17 at 12:23

Community

1
1

answered May 16 '16 at 13:35

Dylan666

13
4

Morris Donut chart with data from mysql

2 Answers2