Create Charts and Graphs Using MySQL, PHP, Morris.js Tutorial

moris

Charts and Graphs Using MySQL, PHP, Morris.js

Create Charts and Graphs Using MySQL, PHP, Morris.js Tutorial propel theme like how to execute Mysql information with Morris.js Chart to make classic diagram by utilizing PHP Script. In one of our past post in which we have perceived how to utilize Google Chart Library with PHP and Mysql database. However, now we have seen one more Chart library and how to utilize this Morris.js graph library with PHP and Mysql.

We have definitely know the vast majority of information in any online application are originates from the sourced of the database and in light of that information we need to be required to show that information in diagram or chart arrange on the website page. So show of database information under diagram or outline perception on website page is the cerebral pain for the vast majority of the software engineer and this errand required lots of ventures to show information in diagram or graph design. Be that as it may, in the wake of happening to Morris.js graphs, it makes this work less demanding than beforehand which we have accomplished for make outline from information. We have just make straightforward Mysql inquiry and execute question and pass question result to Morris diagrams javascript and after this, it will make outline according to our necessity. Morris.js Charts library is our best-cherished library for showing information in graphs arrange on the page.

In this post we will first make basic inquiry and make information for Morris.js outline, in light of that information we will make Line diagram, Area graph, Bar diagram and Bar diagram with stacked alternative. For making this graph we have take information of most recent 10 years benefit, buy and deal information from Mysql table.

 


Source Code

Index.php

<?php 
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM account";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
 $chart_data .= "{ year:'".$row["year"]."', profit:".$row["profit"].", purchase:".$row["purchase"].", sale:".$row["sale"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
?>


<!DOCTYPE html>
<html>
 <head>
  <title>chart with PHP & Mysql | lisenme.com </title>
  <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>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">Last 10 Years Profit, Purchase and Sale Data</h3>   
   <br /><br />
   <div id="chart"></div>
  </div>
 </body>
</html>

<script>
Morris.Bar({
 element : 'chart',
 data:[<?php echo $chart_data; ?>],
 xkey:'year',
 ykeys:['profit', 'purchase', 'sale'],
 labels:['Profit', 'Purchase', 'Sale'],
 hideHover:'auto',
 stacked:true
});
</script>

Database

 Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `account`
--

CREATE TABLE IF NOT EXISTS `account` (
  `id` int(11) NOT NULL,
  `year` int(11) NOT NULL,
  `purchase` int(11) NOT NULL,
  `sale` int(11) NOT NULL,
  `profit` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

Add your data id, year, purchase amount, sale amount, profit. Insert to your database.

You May Also Like

About the Author: admin

15 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *