ตัวอย่าง PHP and MySQL with Morris chart กับฐาน HOSxP

วันนี้มาเผยวิธีทำ หรือ ตัวอย่าง PHP and MySQL with Morris chart กับฐาน 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' =&gt; $row['name']
    );
 }
  
 //echo json_encode($orders);
?&gt;
แล้วก็วาง 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 ตัวอย่าง PHP and MySQL with Morris chart กับฐาน HOSxP Reviewed by IOffer on กรกฎาคม 14, 2560 Rating: 5

ไม่มีความคิดเห็น:

Blogger Theme Blank Page

  <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' ...

ขับเคลื่อนโดย Blogger.