COVID-19 Spread Analysis with Flask

ผู้เขียนบทความ นาย คฑาธร ลาภวงศ์ COE #12

1. ความเป็นมา

ความเป็นมาของระบบ COVID-19 Spread Analysis with Flask เมื่อประมาณวันที่ 13 มกราคม 2563 มีการพบโรคระบาดชนิดใหม่ในประเทศไทย เป็นผู้ป่วยรายแรกในประเทศไทย ซึ่งโรคระบาดนี้ได้มีผลกระทบต่อประเทศไทยเป็นอย่างมาก นับตั้งแต่วันนั้นที่พบเจอโรคนี้ในประเทศไทย ทำให้คนภายในประเทศไทยต้องใช้ชีวิตอย่างระมัดระวัง เพื่อป้องกันการติดเชื้อจากโรคเหล่านี้ จำเป็นต้องมี application ในการบอกสถานการณ์โควิด เพื่อบอกพื้นที่ ที่สุ่มเสี่ยงหรือ เคสการเสียชีวิตหรือคนที่ติดเชื้อโควิดนี้ เพื่อความปลอดภัยและสามารถเช็คสถานการณ์ได้ตลอดเวลา

2. วัตถุประสงค์

1. ตรวจสอบการแพร่กระจายไวรัส Covid-19แต่ล่ะประเทศ

2. เช็คประชากรการติดไวรัส Covid-19

3. ขอบเขต

1. ตัวระบบมีการอัพเดททุก ๆ เที่ยงวันเสมอ

2. ระบบมีการทำงานที่แม่นยำ

3. เป็นการพัฒนาระบบโดยการใช้ภาษา python

4. ระบบมีการเชื่อมต่อกับ Application Programming Interface (Api)

5. ระบบสามารถเช็คค่าสถานะการติดเชื้อ Covid-19 ได้อย่างแม่นยำ 100%

6. ระบบสามารถแสดงค่าสถานะ Covid-19 ขึ้น Wed Server ได้

7. มีการแสดงค่าสถานะการติด Covid-19 เป็น กราฟต่างๆได้

8. ระบบมีการบอกสถานที่ต่าง ๆ ที่มีการสุ่มเสี่ยงติดเชื้อCovid-19

4. ประโยชน์ที่คาดว่าจะได้รับ

1. ช่วยเพิ่มความสะดวกสบายในการเช็คสถานะการณ์ Covid-19

2. ไม่มีข้อผิดพลาดสะดวกแม่นยำ

3. สามารถตรวจสอบการแพร่กระจายเชื้อแต่ล่ะประเทศ

5. ความรู้ที่เกี่ยวข้อง

ในส่วนกระบวนการการทำงานของทั้งระบบนั้นผู้เขียนได้ทำเป็นภาพแสดงการทำงานโดยย่อไว้ดังนี้

4. Flask คืออะไร

Flask คือ web framework ที่เขียนขึ้นมาสำหรับ Python เพื่อใช้ร่วมกัน webserver เช่น Apache และได้รับการยอมรับจาก community we pages ชั้นนำเช่น Pinterest, LinkedIn เป็นต้น โดย Flask ถูกเรียกว่า micro framework เพราะว่า มันไม่ต้องการเครื่องมือ หรือ library อะไรมาก อีกทั้ง ไม่จำเป็นต้องมี database ด้วย แต่อย่างไรก็ตาม Flask ก็ยังรองรับการเพิ่ม extensions พิเศษได้ ถ้ามันรองรับ Flask

ก่อนจะใช้งาน Flask จะติดตั้ง Python ในเครื่องก่อนนะครับ สำหรับคนที่ยังไม่มี Python ก็แนะนำให้ดาวน์โหลด Python 3 นะครับ โดยเข้าไปดาวน์โหลดได้ที่ https://www.python.org/

2. หลังจากติดตั้งเสร็จเรียบร้อยแล้ว คราวนี้เราจะมาสร้าง Virtual environment และ activate environment กัน ในที่นี้จะแสดงให้ดูเฉพาะของ Python 3 นะครับ ให้เปิด Command Prompt ขึ้นมาแล้วพิมพ์คำสั่งดังต่อไปนี้ทีละคำสั่ง

cd pathของโฟลเดอร์ที่เราต้องการในตัวอย่างนี้คือโฟลเดอร์ชื่อ flask ที่เราได้ทำการตั้งชื่อเป็นชื่อนั้นๆ
py -3 -m venv venv
venv\Scripts\activate

3. ทำการติดตั้ง Flask ใน environment ที่เรา activate ในขั้นตอนที่ 2 โดยพิมพ์คำสั่งต่อไปนี้แล้วรอจนติดตั้งเสร็จ จะเห็นว่ามันทำการติดตั้ง Werkzeug, Jinja, MarkupSafe, ItsDangerous และ Click ให้ด้วย ขั้นตอนต่อไปเราจะเขียนโค้ดกัน แต่อย่าเพิ่งปิด Command Prompt นะครับ

pip install Flask

ทำการกด Enter และ จะได้แบบนี้ ในรูปตัวอย่างต่อไป

4. ให้ไปที่โฟลเดอร์ที่เราสร้าง environment ไว้ในขั้นตอนที่ 2 ในตัวอย่างนี้คือโฟลเดอร์ flask จากนั้นให้สร้างไฟล์ hello.py ขึ้นมาครับ

5. เปิดไฟล์ hello.py ในโปรแกรม VsCode และเขียน Code ตามนี้

from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
    return "อาจารย์ครับ ผมขอ A นะครับ ผมชื่อนาย คฑาธร ลาภวงศ์ "
if __name__ == '__main__':
    app.run(debug=True)

เปิด Command prompt ขึ้นมา และรันตามนี้ ในCommand prompt cd ชื่อไฟล์ที่เราเก็บไว้ และทำการรัน hello.py

C:\Users\boat>cd C:\Users\boat\flask
C:\Users\boat\flask>hello.py

6. จากนั้นปล่อยให้มันทำงานไปแล้วเปิดเว็บขึ้นมาพิมพ์ในช่อง url ว่า

http://127.0.0.1:5000/ หรือ http://localhost:5000/

7. เข้าไปที่เว็บ http://127.0.0.1:5000/ หรือ http://localhost:5000/ จะเห็นข้อความปรากฏขึ้นมา

5. Application Programming Interface (Api) คืออะไร

คือ ช่องทางการเชื่อมต่อ ,ช่องทางหนึ่งที่จะเชื่อมต่อกับเว็บไซต์ผู้ให้บริการ API จากที่อื่น เป็นตัวกลางที่ทำให้โปรแกรมประยุกต์เชื่อมต่อกับโปรแกรมประยุกต์อื่น หรือเชื่อมการทำงานเข้ากับระบบปฏิบัติการ

API (Application Programming Interface) ทำหน้าที่ช่วยในการเข้าถึงข้อมูลต่าง ๆหรือจะเป็นการนำข้อมูลต่างๆออกจากเว็บไซต์ หรือจะเป็นการส่งข้อมูลเข้าไปก็ได้ โดยเจ้าของเว็บไซต์ที่มี API จะกำหนดขอบเขตในการเข้าถึงบริการต่าง ๆของทางเว็บไซต์

การใช้งาน API

ปัจจุบัน API ถูกใช้งานใน application เพื่อสื่อสารกับ user โดยไม่จำเป้นต้องมีความรู้ บริษัทใหญ่ๆหลายบริษัทมีการเปิด API ให้ภายนอกเข้ามาใช้งาน เช่น facebook, google, twitter ผู้พัฒนาระบบที่สนใจ สามารถนำเอา API เหล่านี้ไปไปต่อยอด ซึ่งทางบริษัทก็สามารถขยายฐานลูกค้าออกไปได้อีก รูปแบบการนำเอา API ไปใช้งานมีดังนี้

1. Web APIs

นิยมใช้กันมากในปัจจุบัน เพราะอยู่ในกลุ่มของ HTTP และขยายออกไปสู่รูปแบบ XML และ JSON ซึ่งโดนรวมแล้วก็คืออยู่บน web service เช่น SOAP (Simple Object Access Protocol) ใช้ XML format ส่งข้อมูล REST (Representational State Transfer) สามารถใช้ XML หรือ JSON format ส่งข้อมูล

2. Operating Systems API

สามารถใช้งานในการสื่อสารระหว่าง application และ operating system เช่น POSIX หรือ มาตราฐานการสื่อสารของ OS เองก็มี API เป็น command line เพื่อควบคุมการทำงานของ OS

3. Remote APIs Remote APIs

ทำไว้ให้ developer สามารถเข้าควบคุมทรัพยากรผ่านทาง protocol เพื่อให้มีมาตราฐานการสือสารเดียวกัน ถึงแม้ว่าจะเป็นคนละ technology เช่น Database API สามารถอนุญาตให้ developer เข้ามาดึงข้อมูลใน database หลากหลายชนิดได้ ผ่าน function เดียวกัน เพราะฉะนั้น remote API จึงถูกใช้บ่อยในงาน maintenance ด้วยทำทำงานที่ฝั่ง client ให้ไปดึงข้อมูลจาก server กลับลงมาทำงาน

4.Libraries and frameworks API

มักจะเอาไปใช้เป็น software library ซึ่งเขียนขึ้นตาม document ในรูปบบภาษา program ที่ต่างกันออกไป ตามความเหมาะสมกับงาน เพื่อเอาไปทำเป็น framework ให้กับระบบใช้ในการสื่อสารหากัน

ประโยชน์ของ API มีอะไรบ้าง

1. ช่วยในการพัฒนาเว็บไซต์หรือ Application ได้ง่ายและรวดเร็วซึ่ง

2. ช่วยให้นักพัฒนาเว็บไซต์หรือเจ้าของเว็บไซต์สามารถฐานผู้ชมเว็บไซต์ให้มากขึ้น

3. ทำให้ผู้ใช้งานเว็บไซต์ต่างๆที่มีการติดตั้ง API ของอีกเว็บไซต์หนึ่ง ไม่ต้องเข้าหน้าเว็บไซต์ที่เป็นเจ้าของ API เพียงแต่เข้ามายังเว็บไซต์ที่มีการติดตั้ง API เท่านั้นทำให้การรับรู้ข่าวสารต่างๆทั่วถึงกันและสะดวกในการใช้งานของผู้ใช้งานเว็บไซต์

4. API สามารถรับส่งข้อมูลข้าม Server ได้

6. ผลการดำเนินงาน

ระยะที่ 1 จะเป็นการศึกษาหาความรู้เกี่ยวกับการทำงานของการหาข้อมูลเกี่ยวกับสถานการณ์ Covid-19 และ การศึกษา Application Programming Interface (Api) และการสร้าง เว็บไซต์ HTML

ระยะที่ 2 จะเป็นการเขียนอัลกอริทึมตัวระบบขึ้นมา และสร้างเว็บไซต์ แสดงผลสถานการณ์ Covid-19 ขึ้นมา

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css -->
    <link rel="stylesheet" href="style-index.css">

    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
   
  
</head>
<body>

การเรียกใช้ library ของ font-Awesome และ Link เข้า Style-index.css

 <div class="container">
        <!-- room1 -->
        <img src="banner.png" >

        <!-- room2 -->
        <div class="navigate">
            <a href="index.html"class="active">Covid-19 Thailand & World report [API]</a>
            
        </div>

        <!-- room3 -->
        <div class="content">
            <!-- content-left -->
            <div class="content-left">

ประกาศ Class แต่ล่ะส่วน

<!-- items1 -->
                <div class="content-left-card">
                    <div class="title">
                        <i class="fas fa-virus"></i>
                        Total Cases
                    </div>
                    <p id="Confirmed">0</p> 
                </div>

                    <!-- items2 -->
                <div class="content-left-card">
                    <div class="title">
                        <i class="fas fa-skull-crossbones"></i>
                        Total Death
                    </div>
                    <p class="danger" id="Deaths">0</p>
                </div>

                   <!-- items3 -->
                   <div class="content-left-card">
                    <div class="title">
                        <i class="fas fa-heartbeat"></i>
                        Total Recovery
                    </div>
                    <p class="warning" id="Recovered">0</p>
                </div>

                   <!-- items4 -->
                   <div class="content-left-card">
                    <div class="title">
                        <i class="fas fa-virus"></i>
                        New Case
                    </div>
                    <p class="info" id="NewConfirmed">0</p>
                </div>

                   <!-- items5 -->
                   <div class="content-left-card">
                    <div class="title">
                        <i class="fas fa-skull-crossbones"></i>
                        New Death
                    </div>
                    <p class="success" id="NewDeaths">0</p>
                </div>

            </div>

ประกาศ Class ประชากรการติดโควิด การเสียชีวิต รักษาหายแล้ว ติดเชื้อใหม่ และ การเสียชีวิตใหม่ ในฝั่งซ้าย

 <!-- content-right -->
            <div class="content-right">
                <div class="content-right-card">
                    <table id="country_state">
                        <tr>
                            <th>Rank</th>
                            <th>Country</th>
                            <th>Cases</th>
                            <th>Deaths</th>
                            <th>serious critical</th>
                            <th>total recovered</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

_{ประกาศ class ฝั่งขวา เพื่อบอกจำนวนการติดเชื้อทั่วประเทศ}

หน้าต่างของฝั่งขวาที่ได้ทำการเขียน Code จากข้างบน

 <script>
        let NewConfirmed = document.getElementById('NewConfirmed');
        let NewDeaths = document.getElementById('NewDeaths');
        let Deaths = document.getElementById('Deaths');
        let Recovered = document.getElementById('Recovered');
        let Confirmed = document.getElementById('Confirmed');

        let table = document.getElementById('country_state');

        fetch("https://covid19.th-stat.com/api/open/today", {
	    "method": "GET"
    })
    .then(response => response.json().then(data => {
        console.log(data);
        Confirmed.innerHTML = data.Confirmed;
        NewConfirmed.innerHTML = data.NewConfirmed;
        NewDeaths.innerHTML = data.NewDeaths;
        Deaths.innerHTML = data.Deaths;
        Recovered.innerHTML = data.Recovered;
    }))
    .catch(err => {
	    console.log(err);
    });

_{ส่วนนี้จะเป็นการเรียกใช้ Application Programming Interface (API) ของกรมควบคุมโรค}

ส่วนนี้จะเป็นการเรียกใช้ API ของกรมควบคุมโรค ในรูปแบบ JSON และโชว์ค่าประชากรการติดโควิด ในหน้าต่างฝั่งซ้าย

โชว์ตัวเลขประชากรการติดเชื้อในหน้าต่างฝั่งซ้าย

fetch("https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php", {
	    "method": "GET",
	    "headers": {
		    "x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
		    "x-rapidapi-key": "1477673c50msh334bb7a7a428f06p1c45d0jsnc8eaa74be31c"
	}
    })

        .then(response => response.json().then(data => {
        console.log(data);
        let countries_stat = data.countries_stat;
        for(let i=0; i<countries_stat.length; i++) {
        console.log(countries_stat[i]);
        let row = table.insertRow(i + 1);

            if(i > 200){

    }
    else{
        let rank = row.insertCell(0);
        let country_name = row.insertCell(1);
        let cases = row.insertCell(2);
        let deaths = row.insertCell(3);
        let serious_critical = row.insertCell(4);
        let recovered_per_country = row.insertCell(5);

            rank.innerHTML = i ;
            country_name.innerHTML = countries_stat[i].country_name;
            cases.innerHTML = countries_stat[i].cases;
            deaths.innerHTML = countries_stat[i].deaths;
            serious_critical.innerHTML = countries_stat[i].serious_critical;
            recovered_per_country.innerHTML = countries_stat[i].total_recovered;
        }
    }
}))
    .catch(err => {
	console.log(err);
});



    </script>
    
</body>
</html>

ส่วนนี้จะเป็นของฝั่งขวาเรียกใช้ API ของทั่วประเทศเพื่อแสดงค่า ประชากรทั้งหมดเป็นรูปแบบ JSON แต่เก็บข้อมูลทั้งหมดในรูปแบบ array เวลาเรียกใช้จะมาทั้งหมดตามที่เราเขียน Code โดยจะเรียกทั่วประเทศมาไม่เกิน 200 ประเทศ

จาก Code ข้างบน HTML API ฝั่งขวาทั้งหมด 200 ประเทศ

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

ส่วน Code นี้จะเป็นของ Style-index.css ที่ Link index.html ส่วนตรงนี้จะเป็นการสร้างเว็บไซต์แล้ว เรียก Import ของ font ใน Google มาที่เราต้องการใช้

ส่วนนี้จะมาจาก ข้างบนที่เราเลือก font google มาใช้

body {
    background: #333276;
}
.danger {
    color: #e74c3c !important;
}
.warning {
    color: #f1c40f !important;
}
.info {
    color: #3498db !important;
}
.success {
    color: #1abc9c !important;
}
.active {
    color: #f1c40f !important;
}

ส่วนนี้จะเป็นส่วนการตกแต่งสี body จาก index และ สีตัวเลขประชากรการติดเชื้อ

/* container */
.container {
    width: 1200px;
    height: auto;
    margin: 30px auto;

    display: flex;
    flex-direction: column;
    align-items: center;

}
.container img {
    width: 150px;
}
.container .navigate {
    width: 100%;
    display: flex;
    justify-content: center;
}
.container .navigate a {
    color: white;
    transition: 300ms;
    cursor: pointer;
    font-size: 2rem;
    text-decoration: none;
    padding: 0 20px;
}
.container .navigate a:hover {
    text-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f, 0 0 40px #f1c40f;
    color: #f1c40f;
}

ส่วนนี้จะเป็นการกำหนดขนาดรูปให้อยู่กึ่งกลางและข้อความมีค่าเงาเวลากดเลือกเปลี่ยนช่อง และกำหนดขนาด Font ต่าง ๆ ในแต่ล่ะ class อีกด้วย


/* content */
.content {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 50px;
}
.content-left {
    width: 30%;
    margin-right: 80px;
}
.content-right {
    width: 70%;
}
.content-left, .content-right {
    display: flex;
    flex-direction: column;
}

ส่วนนี้จะเป็นของฝั่งซ้าย index กำหนดขนาด ให้ฝั่งซ้ายมีขนาด 30% ขวา 70%


/* card left */
.content-left-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 20px;
    width: 100%;
    height: auto;
    padding: 20px;
    background: #212155;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}
.content-left-card .title {
    font-size: 1.5rem;
    color: white;
}
.content-left-card p {
    font-size: 2.5rem;
    color: #fff;
}

ส่วนนี้ก็เช่นกันเลือกขนาด ของฝั่งซ้ายและทำให้ มีมุมโค้งนิดหน่อย และปรับขนาดข้อความ


/* card right */
.content-right-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: 615px;
    overflow: auto;
    padding: 20px;
    margin-bottom: 20px;
    background: #212155;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}
.content-right-card table {
    color: #fff;
    width: 100%;
}
.content-right-card table tr th {
    color: #f1c40f;
    text-align: start;
}

กำหนดขนาดในฝั่งขวา และ สีในตำแหน่งขวา และให้มีความโค้งแค่ 10px



@media screen and (max-width: 1200px) {
    .container {
        width: 800px;
    }
    .navigate a {
        text-align: center;
    }
    .content {
        display: flex;
    }
}
@media screen and (max-width: 800px) {
    .container {
        width: 300px;
    }
    .navigate a {
        font-size: 1rem !important;
    }
    .content {
        display: flex;
        flex-direction: column;
    }
    .content-left, .content-right {
        width: 100%;
    }
    .content-right {
        width: 100% !important;
    }
    .content-right-card table tr th, .content-right-card table tr td {
        padding: 0 20px;
    }
}

และส่วนสุดท้าย ของ Style-index.css เพื่อให้ลองรับขนาดของโทรศัพย์ด้วย

from flask import Flask, render_template, request
import json

app = Flask(__name__)
filename = '25122020.json'

@app.route('/', methods=['GET'])
def index():
    return(render_template('index.html'))

@app.route('/', methods=['POST'])
def result():
    #GET REQUEST DATA FROM THE FRONTEND
    country1 = request.form['country']
    country2 = request.form['country2']
    country3 = request.form['country3']

    #GET CASES FOR COUNTRIES
    casesCountry1 = getCases(country1)
    casesCountry2 = getCases(country2)
    casesCountry3 = getCases(country3)

    #GET DEATHS FOR COUNTRIES
    deathsCountry1 = getDeaths(country1)
    deathsCountry2 = getDeaths(country2)
    deathsCountry3 = getDeaths(country3)

    #GET DATES
    dateLabels = getDates()

    print(deathsCountry2)
    print(dateLabels)
    return(render_template('index.html', country1=country1, country2=country2, country3=country3, casesCountry1=casesCountry1, casesCountry2=casesCountry2, casesCountry3=casesCountry3, deathsCountry1=deathsCountry1, deathsCountry2=deathsCountry2, deathsCountry3=deathsCountry3, dateLabels=dateLabels  ))

def getCases(country):
    with open(filename) as json_file:
        jsonData = json.load(json_file)
        caseList = []
        for record in jsonData['records']:
            if record['countryterritoryCode'] == country:
                caseList.append(int(record['cases']))
    return(list(reversed(caseList)))

def getDates():
    with open(filename) as json_file:
        jsonData = json.load(json_file)
        dateList = []
        for record in jsonData['records']:
            if record['countryterritoryCode'] == 'DEU':
                dateList.append(record['dateRep'])
    return(list(reversed(dateList)))

def getDeaths(country):
    with open(filename) as json_file:
        jsonData = json.load(json_file)
        deathList = []
        for record in jsonData['records']:
            if record['countryterritoryCode'] == country:
                deathList.append(int(record['deaths']))
    return(list(reversed(deathList)))


if __name__ == '__main__':
    app.run(debug=True)

ส่วน Code นี้จะเป็นการ Run เข้า Server ด้วย Flack โดยใช้การเขียนแบบ JavaScript and Python และเชื่อมเข้า Index.HTML เพื่อแสดงเป็นรูปกราฟ ในตัวอย่างที่ 1

รูปภาพตัวอย่างที่ 1

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Corona Charts</title>
  </head>
  <body>
    <h1>Corona Charts</h1>
    <h2>Select your countries</h2>
    <form action="/" method="post">
      <select id="country" name="country">
        <option selected value="THA">Thailand</option>
        <option value="BRN">Brunei_Darussalam</option>
        <option value="KHM">Cambodia</option>
        <option value="IDN">Indonesia</option>
        <option value="LAO">Laos</option>
        <option value="MYS">Malaysia</option>
        <option value="MMR">Myanmar</option>
        <option value="PHL">Philippines</option>
        <option value="SGP">Singapore</option>
        <option value="VNM">Vietnam</option>
      </select>
      <select id="country2" name="country2">
        <option value="THA">Thailand</option>
        <option value="BRN">Brunei_Darussalam</option>
        <option value="KHM">Cambodia</option>
        <option value="IDN">Indonesia</option>
        <option value="LAO">Laos</option>
        <option value="MYS">Malaysia</option>
        <option value="MMR">Myanmar</option>
        <option selected value="PHL">Philippines</option>
        <option value="SGP">Singapore</option>
        <option value="VNM">Vietnam</option>
      </select>
      <select id="country3" name="country3">
        <option value="THA">Thailand</option>
        <option value="BRN">Brunei_Darussalam</option>
        <option value="KHM">Cambodia</option>
        <option value="IDN">Indonesia</option>
        <option value="LAO">Laos</option>
        <option value="MYS">Malaysia</option>
        <option value="MMR">Myanmar</option>
        <option value="PHL">Philippines</option>
        <option selected value="SGP">Singapore</option>
        <option value="VNM">Vietnam</option>
        
      </select>
      <input type="submit" value="Submit"/>
    </form>

    <h1>Corona Cases</h1>
    <div style="position: relative; height: 40vh; width: 80vw">
      <canvas id="caseChart" width="400" height="400"></canvas>
    </div>

    <h1>Corona Deaths</h1>
    <div style="position: relative; height: 40vh; width: 80vw">
      <canvas id="deathChart" width="400" height="400"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    <script>
      var casesCountry1 = {{ casesCountry1|safe }}
      var casesCountry2 = {{ casesCountry2|safe }}
      var casesCountry3 = {{ casesCountry3|safe }}
      var deathsCountry1 = {{ deathsCountry1|safe }}
      var deathsCountry2 = {{ deathsCountry2|safe }}
      var deathsCountry3 = {{ deathsCountry3|safe }}
      var dateLabels = {{ dateLabels|safe }}

      var caseHtml = document.getElementById('caseChart').getContext('2d');
      var caseChart = new Chart(caseHtml, {
        type: 'line',
        data: {
          labels: dateLabels,
          datasets: [{
            label: '{{ country1 }}',
            borderColor: 'rgb(255,99,132)',
            data: casesCountry1,
            fill: false
          }, {
            label: '{{ country2 }}',
            borderColor: 'rgb(139,139,0)',
            data: casesCountry2,
            fill: false
          }, {
            label: '{{ country3 }}',
            borderColor: 'rgb(51,153,255)',
            data: casesCountry3,
            fill: false
          }]
        },
        options: {
            maintainAspectRatio: false
        }
      });

      var deathHtml = document.getElementById('deathChart').getContext('2d');
      var deathChart = new Chart(deathHtml, {
        type: 'line',
        data: {
          labels: dateLabels,
          datasets: [{
            label: '{{ country1 }}',
            borderColor: 'rgb(255,99,132)',
            data: deathsCountry1,
            fill: false
          }, {
            label: '{{ country2 }}',
            borderColor: 'rgb(139,139,0)',
            data: deathsCountry2,
            fill: false
          }, {
            label: '{{ country3 }}',
            borderColor: 'rgb(51,153,255)',
            data: deathsCountry3,
            fill: false
          }]
        },
        options: {
            maintainAspectRatio: false
        }
      });

    </script>

  </body>
</html>

ส่วนนี้จะเป็น Code Index.Html ที่เอาไว้แสดงค่า กราฟจำนวน ประชากรการติดเชื้อรายใหม่ และการเสียชีวิต โดยการจะรันเข้าผ่าน flack เพื่อให้แสดงเป็นจำนวนกราฟตามรูปตัวอย่างที่ 2

รูปภาพตัวอย่างที่ 2 ในการแสดงค่า การติดเชื้อโคโรน่า และ การเสียชีวิต จะสามารถ Submit ได้ทั้งหมด 10ประเทศ ตามที่ผมได้กำหนดไว้ก็คือ ประเทศทั้งหมดในอาเซียน 10 ประเทศ