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: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Prince
Prince
2 years ago

Where is the script ? The design ?

Rares Rares
Rares Rares
2 years ago

Where is the download button?

raymundo
raymundo
2 years ago
Reply to  Rares Rares

gracias

Milorad Bozic
Milorad Bozic
2 years ago

I do not see css file for this. Could You send mi link? Thank You!

S. Thomas
S. Thomas
2 years ago

Thank you very much for looking for that. Great!

Joseph
Joseph
2 years ago

Could you send me a link for source file. Thank you.

Vaibhav
Vaibhav
2 years ago

I do not find css file…
Can u send me lint..?

anitaeta
anitaeta
2 years ago

why not appear graph

NJ
NJ
2 years ago
Reply to  anitaeta

I had to change the line below with respect to the data in my database.
$chart_data = substr($chart_data,0,-2);
Try using : $chart_data = substr($chart_data,0);
Then modify if necessary.
You can find additional resources through this link:
http://php.net/manual/en/function.substr.php

abhi
abhi
2 years ago

because you have to insert data on database table thankyou

Alberto
2 years ago

Could you send me a link for source file. Thank you.

Antman
Antman
1 year ago

May I know how can I download the graph/chart as PDF?

million
million
1 year ago

source code pliz

Rahil
Rahil
1 year ago

sir plss give me js css files

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