Prajith A S Prajith A S - 6 months ago 224
PHP Question

Morris Donut chart with data from mysql

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']
});

Answer

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>
Comments