วันนี้มาเผยวิธีทำ หรือ ตัวอย่าง PHP and MySQL with Morris chart กับฐาน HOSxP
โดยตัวอย่างผมจะเป็นกราฟ แบบ โดนัท นะครับ ส่วนข้อมูลจะเป็นข้อมูล CMI ปี 2558 ครับมาเริ่มกันเลย
ก่อนอื่นต้องไปโหลด http://morrisjs.github.io/morris.js/ มาก่อนครับ
เขียนคำสั่งติดต่อฐานข้อมูล HOSxP เราก่อน
โดยตัวอย่างผมจะเป็นกราฟ แบบ โดนัท นะครับ ส่วนข้อมูลจะเป็นข้อมูล CMI ปี 2558 ครับมาเริ่มกันเลย
ก่อนอื่นต้องไปโหลด http://morrisjs.github.io/morris.js/ มาก่อนครับ
เขียนคำสั่งติดต่อฐานข้อมูล HOSxP เราก่อน
<!--?php //connection String $connect = mysql_connect($host, $user, $passwd) or die('Could not connect: ' . mysql_error()); //Select The database $bool = mysql_select_db($dbname, $connect); mysql_select_db($dbname); mysql_query("SET NAMES UTF8"); mysql_query("SET character_set_results=utf8"); mysql_query("SET character_set_client=utf8"); mysql_query("SET character_set_connection=utf8"); if ($bool === False){ print "can't find $database"; } $query = "select p2.pttype_spp_name name ,avg(adjrw) cmi from ipt i left join pttype p1 on i.pttype=p1.pttype left join pttype_spp p2 on p2.pttype_spp_id-p1.pttype_spp_id where dchdate between '2014-10-01' and '2015-09-30' group by p2.pttype_spp_id"; $result = mysql_query($query) or die("SQL Error 1: " . mysql_error()); mysql_query("SET NAMES UTF8"); mysql_query("SET character_set_results=utf8"); mysql_query("SET character_set_client=utf8"); mysql_query("SET character_set_connection=utf8"); // get data and store in a json array while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $orders[] = array( 'value' =--> $row['cmi'], 'label' => $row['name'] ); } //echo json_encode($orders); ?>แล้วก็วาง java script ของ morriss ลงไปด้านล่างครับ
<script> Morris.Donut({ element: 'graph', data: < ?php echo json_encode($orders);?>, formatter: function (x) { return x + "%"} }).on('click', function(i, row){ console.log(i, row); });</script>ส่วนอื่น ๆ ลองศึกษาต่อครับผม
ตัวอย่าง PHP and MySQL with Morris chart กับฐาน HOSxP
Reviewed by IOffer
on
กรกฎาคม 14, 2560
Rating:
ไม่มีความคิดเห็น:
แสดงความคิดเห็น