Morris.js Dynamic Data Example PHP Mysql - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

Morris.js Dynamic Data Example PHP Mysql


Introduction

Morris.js Dynamic Data Example PHP Mysql is a simple article to helps you to create Morris chart and populate data from Server. Let’s start with the normal Area Chart and go with other charts, Usually the  Area chart has more data rather than other charts. So, If I help you to understand with the more data,you can change it to any chart I mean you can apply it to other charts such as Donut, Bar, Line.
Demo

Morris Area Chart Code

Here the below code is usual example of Morris Area chart

var Area_chart = Morris.Area({
 	element: 'Area_chart', 
 	behaveLikeLine: true,
 	parseTime : false, 
	data: [{ y: '2006', a: 100, b: 90 },
 		{ y: '2007', a: 75, b: 65 },
 		{ y: '2008', a: 50, b: 40 },
 		{ y: '2009', a: 75, b: 65 },
 		{ y: '2010', a: 50, b: 40 },
 		{ y: '2011', a: 75, b: 65 },
 		{ y: '2012', a: 100, b: 90 }],
 	xkey: 'y',
 	ykeys: ['a', 'b'],
 	labels: ['Sales', 'Cost'],
 	pointFillColors: ['#707f9b'],
 	pointStrokeColors: ['#ffaaab'],
 	lineColors: ['#f26c4f', '#00a651', '#00bff3'],
 	redraw: true, 
 });

Morris-chart-Dynamic-Data-Example

Ajax Call

Let’s Update the data dynamically and refresh the data.

$("#Types").on("change", function(){
 	var type = $(this).val(); 
 	$.ajax({
 		type: "POST",
 		url: "ajax.php?type="+type,
 		data: 0,
 		dataType: 'json',
 		success: function(data){
 			console.log(data);
 			Area_chart.setData(data);  // Helps to recreate your chart with result data's
 		}
 	});
 });

Here the #Types is a drop down with some options to change data as per the options.

PHP Function

It aims to get option from the request and get the data as per the request.

<?php if(isset($_GET['type'])){  
	if($_GET['type'] == 1){
		$area_chart =array(  array( 'y' => "2011" , 'a' => 3, 'b' => 6 ) ,  array( 'y' => "2011 Q2" , 'a' => 10, 'b' => 1 ) ,  array( 'y' => "2011 Q3" , 'a' => 2 , 'b' => 4) ,  array( 'y' => "2011 Q4" , 'a' => 3 , 'b' => 3)  );
	}elseif($_GET['type'] == 2){ 
		$area_chart =array(  array( 'y' => "2011" , 'a' => 20, 'b' => 60 ) ,  array( 'y' => "2012" , 'a' => 18, 'b' => 21 ) ,  array( 'y' => "2013" , 'a' => 32 , 'b' => 74) ,  array( 'y' => "2014" , 'a' => 38 , 'b' => 63)  );
	}
	echo json_encode($area_chart); exit; 
}
?>

That’s It to handle data’s dynamically. If you are interested to read more from tutorials Subscribe me to get more updates on your desired categories.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

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

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts