ตัวอย่างการสร้างกราฟวงกลม ( pie chart) บนหน้าเว็บ ด้วย PHP MySQL และ Javascript

เราสามารถแสดงหน้ารายงานโดยอ่านข้อมูลออกมาจากฐานข้อมูล mysql ออกมาแสดงเป็นกราฟวงกลมได้ดังนี้

1. สร้างไฟล์ get_data.php สำหรับอ่านข้อมูลจาก MySQL

<?php

    /*กำหนด username password และ database name ของ mysql */
    $servername = "localhost";
    $username = "...";
    $password = "...";
    $dbname = "...";

     /*------เชื่อมต่อ Database----*/
    $conn = new mysqli($servername, $username, $password, $dbname);
    
    if ($conn->connect_error) {
      die("Connection Error: " . $conn->connect_error);
    }

     /*------ถ้ายังไม่มีตาราง ให้สร้างตาราง ชื่อ food----*/
    $sql = "CREATE TABLE IF NOT EXISTS population  (
        country VARCHAR(100),
        population INT(8)
      )";

    $conn->query($sql);


    $sql = "SELECT * FROM population";
    $result = $conn->query($sql);

    if ($result->num_rows == 0)
    {
        /*----ถ้ายังไม่มีข้อมูลในตาราง population ให้เพิ่มข้อมูลเข้าไป----*/

        $sql = "INSERT INTO population (country, population)
        VALUES ('China', '1448178826')";
        $conn->query($sql);

        $sql = "INSERT INTO population (country, population)
        VALUES ('India', '1401891297')";
        $conn->query($sql);

        $sql = "INSERT INTO population (country, population)
        VALUES ('U.S.A.', '334107942')";
        $conn->query($sql);

        $sql = "INSERT INTO population (country, population)
        VALUES ('Indonesia', '278196711')";
        $conn->query($sql);

        $sql = "INSERT INTO population (country, population)
        VALUES ('Pakistan', '227952794')";
        $conn->query($sql);
    }
    //อ่านข้อมูล Popuplation จาก Database
    $sql = "SELECT * FROM population";
    $result = $conn->query($sql);
    //ส่งออกข้อมูลกลับไปที่ web browser ในรูปแบบ JSON
    $rows = array();
    while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
    }
    echo json_encode($rows);


?>

2.สร้างไฟล์ index.html สำหรับ แสดงกราฟวงกลม

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>ตัวอย่างกราฟวงกลม</title>
    <!-- import javascript สร้าง  pie chart และ axios เพื่อดึงข้อมูลจาก MySQL แบบ ajax -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

<!-- สร้าง div สำหรับแสดงกราฟ -->
<div id="piechart"></div>

<script type="text/javascript" >
    //ดึงข้อมูลแบบ ajax โดยเรียกไฟล์ get_data.php
    axios.get("get_data.php").then(response=>{

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(function(){
            //เก็บข้อมูล JSON ที่ส่งจากไฟล์ get_data.php ไว้ในตัวแปร data_from_mysql
            var data_from_mysql=response.data;
            var data=[];//สร้างตัวแปรสำหรับข้อมูลที่จะไปแสดงในกราฟ
            data.push(['Country', 'Popupulation']);
            //เพิม Country และ Population ที่ได้จาก MySQL เข้าไปใน data
            data_from_mysql.map(item=>{
                data.push([item.country,parseInt(item.population)]);
            });
            
            // กำหนดชื่อกราฟ ความกว่าง และความยาว
            var options = {
                'title':'World Population', 
                'width':650, 
                'height':400,
                sliceVisibilityThreshold:.00001
            };

            // สร้างกราฟในtag <div> ที่มี id เป็น "piechart"
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(google.visualization.arrayToDataTable(data), options);
        });

    });
</script>

</body>
</html>

ผลลัพธ์ที่ได้คือ