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

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

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

เตรียมข้อมูลใน 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" >

        
        <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>