Morris.js Dynamic Data Example PHP Mysql
- Article
- Comment (1)
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, });
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.
terima kasih banyak
benar-benar sangat membantu