สร้างกราฟเส้น ด้วย highcharts โดยการดึงข้อมูลมาจากฐานข้อมูล MySQL

table

 

วิธีการสร้าง กราฟเส้น ด้วย highcharts โดยการดึงข้อมูลมาจากฐานข้อมูล MySQL แบบ table โดยนำ เครื่องมือสร้างกราฟมาจากเว็บ  highcharts << link

1.สร้าง file ที่มีชื่อว่า  table.php  ตามด้านล่างนี้

<?php
//connect ฐานข้อมูล
$host = "localhost";
$user = "root";
$pwd = "123456";
$db = "highcharts";
global $link;
$link = mysql_connect($host,$user,$pwd) or die ("Could not connect to MySQL");
mysql_query("SET NAMES UTF8",$link);
mysql_select_db($db,$link) or die ("Could not select $db database");

  $monthx = array(); // ตัวแปรแกน x
 $y2556 = array(); //ตัวแปรแกน y
//sql สำหรับดึงข้อมูล จาก ฐานข้อมูล
$sql = "SELECT line.`month`, line.`value` FROM line";
//จบ sql
$result = mysql_query($sql);
while($row=mysql_fetch_array($result)) {
//array_push คือการนำค่าที่ได้จาก sql ใส่เข้าไปตัวแปร array
 array_push($y2556,$row[value]);
 array_push($monthx,$row[month]);
}
?>
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>     
        <script>
 $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column' //รูปแบบของ แผนภูมิ ในที่นี้ให้เป็น line
            },
            title: {
                text: 'จำนวนลูกค้า' //
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['<?= implode("','", $monthx); //นำตัวแปร array แกน x มาใส่ ในที่นี้คือ เดือน?>']
            },
            yAxis: {
                title: {
                    text: 'จำนวนลูกค้า (ราย)'
                }
            },
            tooltip: {
                enabled: false,
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'ราย';
                }
            },
   legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                                name: 'พ.ศ.2556',
                                data: [<?= implode(',', $y2556) // ข้อมูล array แกน y ?>]
                            }]
        });
    });
        </script>
    </head> 
    <body> 
      <div id="container" style="min-width: 320px; height: 380px; margin: 0 auto"></div>       
    </body>
</html>

2.จากนั้น ให้สร้างฐานข้อมูล  ใน mysql  ชื่อ table  line

DROP TABLE IF EXISTS `line`;
CREATE TABLE `line` (
  `month` varchar(255) default NULL,
  `value` varchar(255) default NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of line
-- ----------------------------
INSERT INTO `line` VALUES ('มกราคม', '230');
INSERT INTO `line` VALUES ('กุมภาพันธ์', '250');
INSERT INTO `line` VALUES ('มีนาคม', '270');
INSERT INTO `line` VALUES ('เมษายน', '320');
INSERT INTO `line` VALUES ('พฤษภาคม', '330');
INSERT INTO `line` VALUES ('มิถุนายน', '310');
INSERT INTO `line` VALUES ('กรกฎาคม', '380');
INSERT INTO `line` VALUES ('สิงหาคม', '210');
INSERT INTO `line` VALUES ('กันยายน', '170');
INSERT INTO `line` VALUES ('ตุลาคม', '190');
INSERT INTO `line` VALUES ('พฤศจิกายน', '250');

INSERT INTO `line` VALUES ('ธันวาคม', '240');

3.จากนั้นก็ถือว่าสำเร็จ

nattanon

ณัฐนนท์ ลำสมุทร

Leave a Reply

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