fb_ads

www.รับเขียนโปรแกรม.net รับเขียนโปรแกรม ระบบต่างๆ เช่น ระบบข้อมูลบุคคล ระบบข้อมูลลูกค้า ระบบซื้อขาย คลังสินค้า ระบบเช่าจอง ทำงานบน Website ด้วย PHP MySql NodeJs HTML5 JavaScript Ajax

ตัวอย่างการสร้าง machine learning พยากรณ์ราคาหุ้น บน เว็บไซต์ ด้วย tensorflow.js ( neural network , deep learning )

Machine Learning นับว่าเข้ามามีส่วนในชีวิตของเรามากขึ้นจึงจำเป็นอย่างยิ่งที่ เราจะต้องศึกษาการเขียนโปรแกรมลักษณะนี้ ในตัวอย่างนี้ จะแสดงตัวอย่างการพยากรณ์ราคาหุ้นด้วย javascript โดยแสดงผลอยู่บน ( ในที่นี้จะใช้ราคาหุ้น CPF ) บนเว็บไซต์ ซึ่งจะใช้ tensorflow.js  ซึ่งคือ neural network และ deep learning library ซึ่งพัฒนาโดย google ดังนี้

รับเขียนโปรแกรม Javascript


ตัวอย่าง source code
https://jsfiddle.net/zqyhx7pm/2/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TensorFlow</title>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- IMPORT bootstrap และ jquery -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
 
    <!-- IMPORT tensorflow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

    <!-- IMPORT ประวัติราคาหุ้น CPF -->
    <script src="https://xn--12cb3ech1bdffb0m0b3iuam.net/stock/cpf_history.js"></script>


</head>
<body>

    <div class="container" >

        <div class="card">
            <div class="card-body">
                    <!----  แสดงสถานะการ train  --->
                    <div class="row">
                        <div class="col-sm-6">
                            <div>Epoch: <input  class="form-control form-control-sm" id="train-epoch" readonly="true"></input></div>
                           
                        </div>
                        <div class="col-sm-6">
                           
                            <div>Training loss: <input id="train-loss" class="form-control form-control-sm" readonly="true"></input></div>
                          
                        </div>
                    </div>

                    <!----  div สำหรับแสดงผลการทดสอบ model  --->
                    <div id="result_div" ></div>

            </div>
           
          </div>

          <!----  div สำหรับแสดงว่ากำลัง train อยู่  --->
          <div id="traning_div" class="alert alert-warning">Training</div>
         
          <!----  ตารางแสดงข้อมูลดิบที่ใช้ train model  --->
        <table class="table table-border table-sm" id="raw_data" >

            <tr class="table-active">

                <td>Date</td>
                <td>Open</td>
                <td>High</td>
                <td>Low</td>
                <td>Close</td>
               
            </tr>
           
        </table>


        <script>
       
            var input_data=[];//สร้างตัวแปร array สำหรับเก็บ input สำหรับ tarin model ที่เป็นประวัติราคา
            var output_data=[];//สร้างตัวแปร array สำหรับเก็บ output สำหรับ tarin model ที่เป็นราคาปิด

            var test_input_data=[];//สร้างตัวแปร array สำหรับเก็บ input สำหรับทดสอบ model ที่เป็นประวัติราคา
            var test_output_data=[];//สร้างตัวแปร array สำหรับเก็บ output สำหรับทดสอบ model ที่เป็นราคาปิด

            var critical= Math.round(cpf.length*0.8) ;//แบ่งจำนวน train-data 80% และ test-data 20%

            cpf.map((item,i)=>{ //อ่านข้อมูลประวัติราคาทีละแถว

                    //แสดงประวัติราคา ในตาราง
                    $("#raw_data").append(`<tr >
                        <td>`+item.Date+`</td>
                        <td>`+item.Open+`</td>
                        <td>`+item.High+`</td>
                        <td>`+item.Low+`</td>
                        <td>`+item.Close+`</td>
                       
                    </tr>`);

                    if(i<=critical)//สำหรับข้อมูล 80% จะเป็นข้อมูลสำหรับ train
                    {
                        input_data.push([item.Open,item.High,item.Low]);//ใช้ข้อมูล ราคา Open ราคา High ราคา Low เป็น ตัวแปรสำหรับทำนาย
                        output_data.push(item.Close);

                    }
                    else//สำหรับข้อมูลอีก 20% จะเป็นข้อมูลสำหรับ ทดสอบ model
                    {
                        test_input_data.push([item.Open,item.High,item.Low]);
                        test_output_data.push(item.Close);
                    }

            });

            var train_data = tf.tensor2d(input_data);//สร้าง tensor object ประวัติราคา สำหรับ  train model
            var result_data = tf.tensor1d(output_data);//สร้าง tensor object ผลลัพธ์ สำหรับ  train model
            var test_data = tf.tensor2d(test_input_data);//สร้าง tensor object ประวัติราคา สำหรับทดสอบ model
            var test_output= tf.tensor1d(test_output_data);//สร้าง tensor object ผลลัพธ์ สำหรับทดสอบ  model

            //สร้าง model neural network สำหรับพยากรณ์ โดยมี 3 Layer แต่ละ Layer มี 3 Node
            var model = tf.sequential();
           
            model.add(tf.layers.dense({
                        inputShape: 3,
                        activation: "linear",
                        units: 3  ,
            }));

            model.add(tf.layers.dense({
                        inputShape: 3,
                        activation: "linear",
                        units: 3 ,
            }));
           
            model.add(tf.layers.dense({
                        inputShape: 3,
                        activation: "linear",
                        units: 1 ,
            }));
           
            model.compile({
                loss: "meanSquaredError",// เช่น ค่าจริง 3 ผลเป็น  5  meanSquaredError คือ (5-3)ยกกำลัง2
                optimizer: tf.train.adam(0.01),//สุ่มเลขเปลี่ยนทีละ 0.01
            });
           
            model.fit(train_data, result_data, {epochs:500, callbacks: { onEpochEnd: async (epoch, logs) => {
                  
                    //แสดง Update สถานะการสร้าง model แต่ละ epco
                    document.getElementById('train-epoch').value = (epoch + 1)+" / 500";
                    document.getElementById('train-loss').value = logs.loss.toFixed(4);
                  

          } },} ).then((history) => {
             
                var predict=model.predict(test_data);//ทดสอบ Model โดยใช้ test_data ที่เก็บเอาไว้
               
               
                console.log(predict.dataSync());
              
                var result_predict=predict.dataSync();//สร้างตัวแปรเก็บราคาปิดที่เป็นผลลัพธ์ของการพยากรณ์
                var real_result=test_output.dataSync();//สร้างตัวแปรเก็บราคาปิดจริง

                var predict_html=`<br /><h4>ทดสอบ Model</h4><table class='table table-sm'>
                        <tr class='table-active'>
                            
                            <td>Open</td>
                            <td>High</td>
                            <td>Low</td>
                         
                            <td>Close</td>

                            <td>ราคาClose ที่พยากรณ์ได้</td>
               
                        </tr>
                    `;
                //วน loop ราคาที่พยากรณ์ได้เทียบกับราคาจริง
                for(var i=0;i<result_predict.length;i++)
                {
                    //หาเปอร์เซ็นความผิดพลาดของราคาจริงกับราคาที่พยากรณ์ได้
                    var diff_percent=(Math.abs(real_result[i]-result_predict[i])/real_result[i])*100;
                    //แสดงแถวข้อมูลราคาที่พยกรณ์ได้เทียบกับราคาจริง
                    predict_html+=`
                        <tr>
                            <td> `+test_input_data[i][0]+`</td>
                            <td> `+test_input_data[i][1]+`</td>
                            <td> `+test_input_data[i][2]+`</td>
                           
                            <td> `+real_result[i]+` </td>

                            <td> `+result_predict[i].toFixed(2)+`<div class='text-danger' >( ผิดพลาด `+diff_percent.toFixed(2)+` % )</div>`+` </td>
               
                        </tr>
                    `;
                }

                predict_html+=`</table><br />`;
                $("#result_div").html(predict_html);//แสดงตารางผลการทดสอบ Model
               
                $("#traning_div").remove();//เมื่อพยากรณ์เสร็จแล้ว นำ div สำหรับแสดงว่ากำลัง train อยู่ ออก
       

            });

        </script>


    </div>



</body>
</html>

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




วิธี Upload NodeJS App เข้า Heroku ( โฮสฟรีสำหรับ NodeJS App )

Heroku เป็นบริการ Cloud ( มีทั้งบริการแบบฟรี และเสียเงิน )   ที่รองรับ NodeJS Application ที่ได้รับความนิยม ในบทความนี้ จะแสดงขั้นตอนการ สร้างหน้าเว็บ อย่างง่าย ด้วย Node JS , Exprss JS และ Upload ไปไว้ที่ Heroku ทีละขั้นตอนดังนี้

รับเขียนโปรแกรม NodeJS

รับเขียนโปรแกรม Javascript


Download Source Code https://github.com/nuntawa/sample_node_js_app
 
สร้าง Folder งานด้วยคำสั่ง mkdir sample_node_js_app
( ในที่นี้ใช้ชื่อ Folder ว่า sample_node_js_app ) เมื่อสร้าง folder แล้วให้เข้าไปที่ folder sample_node_js_app ด้วยคำสั่ง cd sample_node_js_app จากนั้นพิมพ์ npm init เพื่อสร้าง node module และ ไฟล์ package.json

ดูความเรียบร้อยของไฟล์ package.json แล้วกด Enter
install express js ด้วยคำสั่ง npm install express --save แล้วกด enter



เปิด Visual Studio แล้วเลือก sample_node_js_app


เปิดไฟล์ package.json  แก้ scripts โดยใส่ start:"node index.js" เพื่อให้สามารถใช้คำสั่ง npm start ในการเริ่มรันได้



สร้างไฟล์ index.js ซึ่งเป็นไฟล์เริ่มต้น


พิมพ์คำสั่ง

var express=require("express");
var app=express();
var port=process.env.PORT || 3000;
var path    = require("path");

app.use(express.static('public'));

app.get("/",(req,res)=>{

    res.sendFile(path.join(__dirname+'/public/index.html'));

});

app.listen(port);

เพื่อให้ เมื่อเรียกหน้าเว็บแล้ว นำไฟล์ index.html ใน folder public ขึ้นมาแสดง
( คำสั่ง app.use(express.static('public')); คือการกำหนดให้ nodejs รู้จัก folder public )


แต่เรายังไม่มีไฟล์ index.html ใน folder public ให้สร้าง folder public ขึ้นมาก่อน


สร้าง folder css ใน folder public สำหรับไฟล์ css


สร้าง folder js สำหรับใส่ไฟล์ javascript

ในที่นี้เราจะใช้ bootstrap สำหรับตกแต่งหน้าเว็บซึ่งต้อง Download ไฟล์  javascript และ css ของ bootstrap มาไว้ก่อน โดยเริ่มจาก jquery 
ให้เปิด Browserไปที่ https://code.jquery.com/jquery-3.4.1.min.js แล้ว คลิกขวา Save AS

 

โดยเลือกให้บันทึกใน folder js ที่ได้สร้างไว้


ต่อมา Download popper.min.js โดยเปิด
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
ใน browser แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม


 Download bootstrap.min.js โดยเปิด Browser แล้วไปที่
แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม



 Download bootstrap.min.css โดยเปิด Browser แล้วไปที่
https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css
 แล้วคลิกขวา save as ไปไว้ที่ folder css  ที่สร้างไว้ใน folder public


สร้างไฟล์ index.html ที่ folder public เพื่อให้ node js นำไฟล์มาแสดง


ใส่ code html

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-3.4.1.slim.min.js" ></script>
    <script src="/js/popper.min.js" ></script>
    <script src="/js/bootstrap.min.js" ></script>
 
    <title>Hello, world!</title>
  </head>
  <body>
      <div class="container">
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                      <h1 class="display-4">Sample Node js </h1>
                      <p class="lead">This is sample Node js </p>
                    </div>
                  </div>
      </div>
   
    </body>
</html>
ในไฟล์ index.html


ลดลองเปิดเว็บแบบ local โดยเปิด terminal แล้ว พิมพ์ node index.js


ทดลองเปิดหน้าเว็บ โดยพิมพ์ http://localhost:3000

 เราจะ Upload NodeJS App เข้า Heroku โดยใช้วิธี upload code ผ่าน github เปิด login เข้า github.com แล้วคลิกปุ่ม New



สร้าง Repository โดยพิมพ์ชื่อ sample_node_js_app แล้วคลิก Create repository


ไปที่ tab code


เลือก Upload an exiting file

 

ใน foler sample_node_js_app ให้ลากไฟล์ package.json  index.js และ folder public เข้าไปใน  browser โดยไม่ต้อง ลาก folder node_modules

 

 เมื่อ upload ไฟล์ครบแล้ว ให้คลิก Commit  changes


login ในหน้าเว็บ heroku  แล้วเลือก Create new app


ตั้งชื่อ app ว่า mysamplenodejsapp แล้วคลิก Create app


เลือกการ deploy ผ่าน github


พิมพ์ชื่อ repository "sample_node_js_app" แล้วคลิก search


คลิก Cnnect เพื่อเชื่อม Heroku กับ github repository



คลิก Deploy Branch



เมื่อ Deploy แล้ว ไปที่ด้านบนสุด คลิก Open app เพื่อดูหน้าเว็บ


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




Download Source Code https://github.com/nuntawa/sample_node_js_app

 

การแบ่งหน้าแสดงข้อมูล ( Pagination ) จาก Firebase Database ( firestore ) ด้วย Javascript

สำหรับการดึงข้อมูลจาก Firebase Database  ( firestore ) หากข้อมูลมีปริมาณเยอะ เราคควรที่แบ่งการแสดงข้อมูลทีละชุด ในตัวอย่างนี้จะแสดงวิธี อ่านข้อมูลจาก Firebase Database  โดยแบ้งหน้าการแสดงดังนี้

รับเขียนโปรแกรม Firebase


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Firebase Database ( Firestore ) </title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" ></script>

  </head>
  <body>
    <div class="container" >

        <ul id="country_ul" class='list-group'></ul><!-- ul สำหรับแสดง  -->

        <br />
        <div class="text-center"><!-- ปุ่มสำหรับแสดงข้อมูลชุดถัดไป -->
              <button type="button" class="btn btn-primary" onclick="load_country()">Load More</button>
        </div>

    </div>

    <script >

    var page_size=5;//จำนวนที่แสดงต่อหน้า
    var cursor_next=null;//ตัวแปรเก็บ object แสดงแถวข้อมูลถัดไป
   
    //------------------------------ ตั้งค่า firebase ------------------------------
    var config = {
      apiKey: ".....",
      projectId: "....."
    };
    firebase.initializeApp(config);
    //------------------------------ ตั้งค่า firebase ------------------------------

        const db = firebase.firestore();//สร้าตัวแปร object สำหรับอ้างอิง firestore

        var country_ul=document.getElementById("country_ul");//สร้างตัวแปรอ้างอิง ul element เพื่อเพิ่มแถวข้อมูล
 
        function load_country()//function สำหรับ โหลดข้อมูลจาก Firestore มาแสดง
        {
                //อ่านข้อมูลจาก collection country
                //limit(page_size) คือกำหนดจำนวนแถวที่มาแสดง
                //orderBy("country_name","asc") คือกำหนดให้เลียงลำดับตาม country_name จากน้อยไปมาก
                //startAfter(cursor_next) คือให้แสดงข้อมูลหลังจาก แถวข้อมูลสุดท้ายของชุดข้อมูลล่าสุด
               
db.collection("country").limit(page_size).orderBy("country_name","asc").startAfter(cursor_next).get().then(function(data) {
             
                  for(var i=0;i<data.docs.length;i++)
                  {   //วน loop เพิ่มแถวข้อมูลใน country_ul
                      var li=document.createElement("li");
                      li.innerHTML=data.docs[i].data().country_name;
                      li.classList.add("list-group-item");
                      country_ul.appendChild(li);
                  }
                  cursor_next=data.docs[data.docs.length-1];//กำหนด object ตัวล่าสุดของชุดข้อมูลที่โหลดมาเพื่อแสดงชุดข้อมูลถัดไป
              });
        }
        //เมื่อโหลดหน้าเว็บแล้วให้ทำงาน function load_country()
        document.addEventListener('DOMContentLoaded', function(){
                load_country();
        }, false);

    </script>

  </body>
</html>

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





สร้างกราฟแท่งด้วย ChartJs.org ตอน 2 ( สร้างกราฟแบบ DataSet เดียว )


จาก Blog สร้างกราฟแท่งด้วย javascript ( โดยใช้ chartjs และดึงข้อมูลมาจาก Firebase database )
ที่แสดงตัวอย่างการจำข้อมูลจาก Firebase มาแสดงเป็นกราฟนั้นอาจดูซับซ้อนเกินไป ในบทความนี้ จะแสดงตัวอย่างการสร้างกราฟที่ง่ายขึ้น ดังนี้

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

รับเขียนโปรแกรม ออกรายงาน

รับเขียนโปรแกรม วิเคราะห์ข้อมูล


1. เพิ่ม Javascript library chart.js เข้าไปใน source code
<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>

2. สร้าง tag div สำหรับ ที่จะแสดงเป็นกราฟ

<div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
</div>

3. เขียน code javascript สำหรับสร้างกราฟ

  <script>

      var color = Chart.helpers.color;

      var barChartData = {

        labels: ["01/08/2562 ","02/08/2562 ","03/08/2562 ","04/08/2562 ","05/08/2562 "],
        //labels คือ ข้อมูลในแกน X
        datasets: [{
            label:"",
            //กำหนดให้ กราฟแท่งเป็นสีแดง
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [1523,1840,1745,1489,1689]
            //data คือ  ข้อมูลในแกน Y
        }]

     };

       var ctx = document.getElementById('canvas').getContext('2d');
       //กำหนดให้แสดงกราฟที่ <canvas id="canvas"></canvas>
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    text: 'กราแสดงยอดขาย'
                }
            }
        });

</script>


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



สามารถดู Source code ได้ตาม link  ->  https://jsfiddle.net/0mk76cor/

พัฒนา Web Application ด้วย PHP MySQL บน Docker

สำหรับนักพัฒนา Web Application โดย PHP MySQL นอก XAMPP ที่ใช้จำลอง Server ในการพัฒนาแล้วยังมี Docker โปรแกรมสำหรับ จำลอง Server เพื่อพัฒนา WebApplication ได้อีกทางหนึ่ง ในบทความนี้จะนำเสนอวิธีการติดตั้ง Docker สำหรับพัฒนา Web Application โดยใช้ PHP และ MySQL

รับเขียนโปรแกรม PHP + MySQL


1. Install Docker จาก https://www.docker.com/

2. เมื่อ Install Docker แล้วให้ Download Zip ไฟล์จาก
http://xn--12cb3ech1bdffb0m0b3iuam.net/php_mysql_docker.zip

3. สร้าง Folder php_mysql_docker  แตกไฟล์ Zip ที่ Download มาไว้ใน  Folder php_mysql_docker



4. เปิด Terminal  และไปที่ Path ที่ได้สร้าง Folder php_mysql_docker ไว้ ( ในที่นี้คือ folder Documents ) และ สร้าง Container โดยใช้คำสั่ง

docker-compose up -d




เมื่อสร้าง Container เสร็จแล้ว ลองทดสอบเข้าเว็บ โดย เปิด http://127.0.0.1/ บน Browser



ทดสอบเข้า phpmyadmin http://127.0.0.1/phpmyadmin
ซึ่ง Username  จะเป็น root และ Password คือ rootpassword





Code ไฟล์เว็บให้เก็บไว้ใน Folder html


หากต้องการเชื่อมต่อกับ Database ใน docker สามารถใช้ Code

$dbUname="root";
$dbPword="rootpassword";
$dbHost="database_server";
$dbName="mysql";
$link=mysqli_connect($dbHost,$dbUname,$dbPword,$dbName);


คำสั่งต่างๆ ของ Docker Compose
หากเราต้องการ ให้ใช้คำสั่ง docker-compose stop
หากเราต้องการ ให้ใช้คำสั่ง docker-compose down
หาต้องการดูว่ามี container อะไรที่รันอยู่ให้ใช้คำสั่ง  docker-compose ps

สร้างไฟล์รูป PNG จาก canvas


บางครั้ง javascript library เช่น chart.js ( ตัวอย่างการสร้างกราฟด้วย chartjs ) มีการสร้างรูปที่เป็นแบบ Canvas ซึ่งหากเราต้องการที่จะบันทึกภาพที่ javascript librarry สร้างเป็น canvas ไว้สามารถสร้างเป็นไฟล์ png  ไว้ได้ในตัวอย่างต่อไปนี้

รับเขียนโปรแกรม PHP และ Javascript


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<!-- สร้างปุ่ม  To Png File โดยกดแล้วจะไปทำงานที่ function to_png_file() -->
<button onclick='to_png_file()' type='button'>To Png File</button>
<script>
    //สร้าง canvas ที่ Element myCanvas
    var canvas = document.getElementById("myCanvas");

    var ctx = canvas.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);

    ctx.stroke();


    async function to_png_file()
    {
        var file_data = canvas.toDataURL();//เก็บ data URL เอาไว้ในตัวแปร file_data
       //ส่ง dataURL ให้ไฟล์ create_png_file.php โดยใช้ javascript fetch
       var res = await fetch("create_png_file.php",
        {
            headers: {'Content-Type':'application/x-www-form-urlencoded'},
            method: "POST",
            body: "&file_data="+file_data+"&file_name=canvas_to_png.png"
        });
        var response_text=await res.text();//รับข้อความที่ส่งกลับมา
       //แสดงข้อความที่ส่งกลับมา
        alert(response_text);
       
    }


</script>


ไฟล์ PHP สำหรับสร้าง ไฟล์รูปภาพ PNG ชื่อว่า create_png_file.php
<?php
        //รับ data URL ที่ส่งมา
        $img = str_replace('data:image/png;base64,', '', $_POST["file_data"]);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);

        //สร้างไฟล์ ชื่อ canvas_to_png.png ตามที่ส่งข้อมูลมา
        file_put_contents($_POST["file_name"], $data);
        //$_POST["file_name"] คือชื่อไฟล์ที่ส่งมาในที่นี้ไฟล์ชื่อว่า canvas_to_png.png
        echo "create file success";//ส่งข้อความตอบกลับ

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


สร้างกราฟแท่งด้วย javascript ( โดยใช้ chartjs และดึงข้อมูลมาจาก Firebase database )

 chartjs ( www.chartjs.org )  นับเป็น javascript library ที่ใช้สร้างกราฟบนเว็บไซต์ที่มีประสิทธิภาพ ในตัวอย่างนี้จะเป็นการนำข้อมูลจาก Firebase Database ( firestore ) มาแสดงเป็นกราฟแท่ง

Link ที่เกี่ยวข้อง สร้างกราฟแท่งด้วย ChartJs.org ตอน 2 ( สร้างกราฟแบบ DataSet เดียว )

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

รับเขียนโปรแกรม ออกรายงานกราฟ 

รับเขียนโปรแกรมฐานข้อมูล


เตรียมข้อมูลใน Firestore ( Firebase Database )

 เดือน กุมภาพันธ์

เดือน มีนาคม

เดือน เมษายน




Code แสดง กราฟแท่ง 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Firebase Database ( Firestore ) + ChartJS</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


    <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" ></script>

    <script src="http://www.chartjs.org/dist/2.8.0/Chart.bundle.js"></script>
    <script src="http://www.chartjs.org/samples/latest/utils.js"></script>


  </head>
  <body>
    <div class="container" >

        <!-- กำหนด Element  สำหรับสร้างกราฟ -->
        <canvas id="canvas" style="width: 100%"></canvas>

    </div>
  

    <script >

   //------------------------------ ตั้งค่า firebase ------------------------------
    var config = {
      apiKey: "....",
      authDomain: "....",
      databaseURL: "....",
      projectId: "....",
      storageBucket: "....",
      messagingSenderId: "...."
    };
    firebase.initializeApp(config);
    //------------------------------ ตั้งค่า firebase ------------------------------

    const db = firebase.firestore();//สร้าตัวแปร object สำหรับอ้างอิง firestore
  
        db.collection("sale_report").get().then(function(data) { //อ่านข้อมูลจาก collection sale_report

            var report_month=[];
            var report=[];
            var key_array=[];
            var raw_data=[];

            data.forEach(function(doc) {

              report_month.push(doc.id);//เก็บเดือนของรายงานไว้ในตัวแปร report_month
              report.push(doc.data());//เก็บยอดขายของสินค้าแต่ละอันไว้ในตัวแปร report

            });

            //-------- หาว่าในรายงานมีชื่อ product อะไรบ้าง --------------
            report.forEach(function(report_item) {

                Object.keys(report_item).forEach(function(key){

                      if(key_array.indexOf(key)==-1)
                      {
                          key_array.push(key);//เก็บชื่อ Product ทีมีไว้ในตัวแปร key_array
                      }

                });

            });

            //------------ นำยอกขายของแต่ละสินค้าเป็บไว้ในตัวแปร raw_data ------------------
            key_array.forEach(function(key){

                number_array=[];
              
                report.forEach(function(report_item) {

                  if(report_item[key]==null)
                  {
                    number_array.push(0);
                  }
                  else
                  {
                     number_array.push(report_item[key]);
                  }
               
                });

                raw_data.push({
                  "key":key,//ชื่อสินค้า
                  "number":number_array//array ยอดขายแต่ละเดือน
                });

            });

            draw_chart(report_month,raw_data);//เรียก function  สร้างกราฟ โดย
        });

        function draw_chart(report_month,raw_data)
        {
              var colorNames = Object.keys(window.chartColors);
              var color = Chart.helpers.color;
              var datasets=[];

              raw_data.forEach(function(raw_data_item,index){

                  ///----- นำข้อมมูลยอดขายสินค้าแต่ละรายการใส่ใน datasets เพื่อแสดงเป็นกราฟ  -------
                  datasets.push({
                            label: raw_data_item.key,
                            backgroundColor: color(colorNames[datasets.length]).alpha(0.5).rgbString(),
                            borderWidth: 0,
                            data: raw_data_item.number
                  });

              });

              var barChartData = {
                "labels": report_month,
                "datasets":datasets
              };

              var ctx = document.getElementById('canvas').getContext('2d');

              window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                          responsive: true,
                          legend: {
                            position: 'top',
                          },
                          title: {
                            display: true,
                            text: 'รายงานยอดขาย'
                          },
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      beginAtZero: true
                                  }
                              }]
                          }
                    }
                });
        }
  
    </script>
 
  </body>
</html>