การใช้งาน Line chart from data ในภาษา Java แบบง่ายๆ พร้อมตัวอย่าง

# การใช้งาน Line chart จากข้อมูลในภาษา Java อย่างง่ายดาย พร้อมตัวอย่างโค้ด

ในโลกแห่งการเขียนโปรแกรม การนำเสนอข้อมูลเป็นสิ่งสำคัญที่สุด และการใช้ Line chart เป็นวิธีหนึ่งในการแสดงผลข้อมูลที่ทำให้ข้อมูลต่างๆเข้าใจได้ง่ายขึ้น ในภาษา Java มีไลบรารีพร้อมใช้งานมากมายที่ช่วยให้คุณสามารถสร้าง Line chart ได้อย่างรวดเร็ว ในบทความนี้ เราจะเรียนรู้วิธีการสร้าง Line chart ในภาษา Java ด้วยตัวอย่างโค้ดและการอธิบายการทำงาน เราจะยกตัวอย่าง usecase ในโลกจริงที่ Line chart สามารถช่วยได้ และเชิญชวนให้คุณมาสร้าง Line chart ด้วยตัวเองที่ EPT (Expert-Programming-Tutor) ซึ่งเป็นสถาบันที่สอนการเขียนโปรแกรมด้วยความเชี่ยวชาญ เพื่อพัฒนาทักษะการเขียนโปรแกรมของคุณไปอีกขั้น

ตัวอย่างโค้ดที่ 1: การสร้าง Line chart ด้วยไลบรารี JFreeChart

JFreeChart คือไลบรารีที่ใช้ในการสร้างกราฟและแผนภูมิใน Java มันมีความสามารถในการสร้าง Line chart ได้ง่ายและสวยงาม เรามาดูตัวอย่างโค้ดเพื่อสร้าง Line chart ง่ายๆกันเลย:

 import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.data.category.DefaultCategoryDataset;

public class LineChartExample {

    public static void main(String[] args) {
        //สร้าง Dataset
        DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        dataset.addValue(1.0, "Views", "Monday");
        dataset.addValue(3.0, "Views", "Tuesday");
        dataset.addValue(2.0, "Views", "Wednesday");
        dataset.addValue(4.0, "Views", "Thursday");
        dataset.addValue(3.5, "Views", "Friday");

        //สร้าง Line chart
        JFreeChart lineChart = ChartFactory.createLineChart(
                "Website Views per Day",
                "Day",
                "Views",
                dataset,
                PlotOrientation.VERTICAL,
                true, true, false);

        //แสดง Line chart ใน JFrame
        ChartPanel chartPanel = new ChartPanel(lineChart);
        JFrame frame = new JFrame();
        frame.add(chartPanel);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}

วิเคราะห์โค้ด:

ในโค้ดที่กำหนดข้างต้น เราเริ่มต้นด้วยการสร้าง `DefaultCategoryDataset` ซึ่งเป็นชุดข้อมูลที่จะใช้กับ Line chart ของเรา เราสามารถเพิ่มค่าข้อมูลต่างๆได้โดยระบุค่า(value), หมวดหมู่(category), และเซียรี่(series) จากนั้นเราสร้าง Line chart ด้วยการเรียกใช้ `createLineChart()` จาก `ChartFactory`. ค่าที่กำหนดในตัวโค้ดเป็นชื่อแผนภูมิ, ภาคส่วนแกน X, ภาคส่วนแกน Y, ชุดข้อมูลที่เราสร้าง, ทิศทางของแผนภูมิ, และการตั้งค่าเพิ่มเติมเกี่ยวกับความช่วยเหลือและเครื่องมือที่มีในแผนภูมิ.

ในท้ายที่สุด เราสร้าง `ChartPanel` และห่อหุ้มมันด้วย `JFrame` เพื่อแสดงผล Line chart ที่สร้างไว้ สามารถเรียกใช้ตัวอย่างโค้ดนี้และดู Line chart ในทันทีบนหน้าจอของคุณ.

Usecase ในโลกจริง:

สมมติว่าคุณทำงานที่เว็บไซต์ที่ต้องการติดตามยอดการเข้าชมของผู้ใช้ในแต่ละวัน การใช้ Line chart ดังกล่าวสามารถช่วยให้อ่านและเข้าใจยอดการเข้าชมได้อย่างชัดเจน จากนั้นสามารถนำไปประกอบการตัดสินใจโดยทีมการตลาดในการใช้กลยุทธ์ต่างๆเพื่อเพิ่มยอดเข้าชมเว็บไซต์ได้.

หากคุณต้องการสำรวจการเขียนโปรแกรม Line chart หรือกราฟและแผนภูมิกับ Java มากขึ้น EPT คือสถานที่ที่จะช่วยคุณได้ เรามีหลักสูตรที่สอนการสร้างแอปพลิเคชันการวิเคราะห์ข้อมูลด้วย Java ซึ่งจะช่วยให้คุณเข้าใจการใช้งาน Java สำหรับการวิเคราะห์ข้อมูลอย่างลึกซึ้งและเจาะจง.

ตัวอย่างโค้ดที่ 2: การสร้าง Line chart ด้วย JavaFX

JavaFX เป็นไลบรารีที่ฝังในตัว Java สำหรับการสร้างและจัดการผู้ใช้แบบกราฟิก (GUI) ต่อไปนี้คือตัวอย่างโค้ดสำหรับการสร้าง Line chart ใน JavaFX:

 import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class JavaFXLineChartExample extends Application {

    @Override
    public void start(Stage stage) {
        // กำหนดชื่อและแกนของ Line chart
        stage.setTitle("Line Chart Sample");
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Month");

        final LineChart<Number, Number> lineChart =
                new LineChart<Number, Number>(xAxis, yAxis);

        lineChart.setTitle("Stock Monitoring, 2023");

        // กำหนดข้อมูลโดยใช้ XYChart.Series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");

        // เพิ่มข้อมูลและระบุข้อมูล X และ Y
        series.getData().add(new XYChart.Data(1, 23));
        series.getData().add(new XYChart.Data(2, 14));
        series.getData().add(new XYChart.Data(3, 15));
        series.getData().add(new XYChart.Data(4, 24));
        series.getData().add(new XYChart.Data(5, 34));

        Scene scene = new Scene(lineChart, 800, 600);
        lineChart.getData().add(series);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

วิเคราะห์โค้ด:

โค้ดนี้ใช้ JavaFX ซึ่งเป็นเฟรมเวิร์กสำหรับการสร้าง GUI ใน Java. หลังจากที่เราได้กำหนดชื่อให้กับแกน X และ Y และสร้าง `LineChart` ขึ้น เราจะเริ่มเพิ่มข้อมูลลงใน `XYChart.Series` โดยเราสามารถเพิ่ม Java objects ที่เรียกว่า `XYChart.Data` เพื่อสร้างแต่ละจุดข้อมูลบน chart.

สุดท้าย, เรากำหนด `Scene` ด้วย Line chart และเริ่มการทำงานของแอปพลิเคชัน หน้าต่างของ GUI จะแสดง Line chart ที่มีข้อมูลที่เราเพิ่มเข้าไป.

Usecase ในโลกจริง:

Line chart ที่สร้างด้วย JavaFX สามารถใช้ในการติดตามและการจัดการพอร์ตการลงทุนในตลาดหุ้นได้ ผู้ใช้สามารถดูได้อย่างชัดเจนว่าราคาหุ้นของพวกเขามีการเปลี่ยนแปลงอย่างไรตลอดช่วงเวลาหนึ่ง การใช้ Line chart ช่วยให้รายละเอียดของข้อมูลสามารถถูกนำเสนอได้อย่างง่ายดายและอ่านได้.

โรงเรียน EPT จัดหลักสูตรเกี่ยวกับการพัฒนา UI/UX ที่ยอดเยี่ยมซึ่งครอบคลุมทักษะการใช้ JavaFX ในการสร้างแอปพลิเคชันที่มีชีวิตชีวาและโต้ตอบได้ การเรียนรู้ที่ EPT จะช่วยให้คุณสามารถนำเสนอข้อมูลในรูปแบบที่น่าดึงดูดและมีประโยชน์.

ตัวอย่างโค้ดที่ 3: การใช้งาน Java Swing เพื่อสร้าง Line chart

Java Swing เป็นโปรแกรมที่ฝังในตัว Java ซึ่งใช้กันอย่างกว้างขวางในการสร้าง GUI เบื้องต้น. ต่อไปนี้คือตัวอย่างโค้ดสำหรับการสร้าง Line chart:

 import javax.swing.*;
import java.awt.*;
import java.awt.geom.Line2D;

public class SwingLineChartExample extends JPanel {

    private int[] scores = {72, 90, 60, 50, 85};

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);

        // กำหนดแกน X และ Y บน JPanel
        int maxScore = 100;
        int padding = 25;
        int labelPadding = 25;
        double xScale = ((double) getWidth() - (2 * padding) - labelPadding) / (scores.length - 1);
        double yScale = ((double) getHeight() - 2 * padding - labelPadding) / (maxScore - 1);

        // สร้างแกน X และ Y เพื่อสร้างกริดผืนผ้าในชาร์ต
        List<Point> graphPoints = new ArrayList<>();
        for (int i = 0; i < scores.length; i++) {
            int x1 = (int) (i * xScale + padding + labelPadding);
            int y1 = (int) ((maxScore - scores[i]) * yScale + padding);
            graphPoints.add(new Point(x1, y1));
        }

        // วาดเส้นสำหรับแต่ละมูลค่าที่สำคัญ
        g2.setColor(Color.GRAY);
        for (int i = 0; i < scores.length; i++) {
            int x0 = i * (getWidth() - padding * 2 - labelPadding) / (scores.length - 1) + padding + labelPadding;
            int y0 = getHeight() - padding - labelPadding;
            if (scores.length > 1) {
                g2.setColor(Color.BLACK);
                String xLabel = i + "";
                FontMetrics metrics = g2.getFontMetrics();
                int labelWidth = metrics.stringWidth(xLabel);
                g2.drawString(xLabel, x0 - labelWidth / 2, y0 + metrics.getHeight() + 3);
            }
        }

        // วาดสายชาร์ต
        Stroke oldStroke = g2.getStroke();
        g2.setColor(Color.BLUE);
        g2.setStroke(new BasicStroke(2f));
        for (int i = 0; i < graphPoints.size() - 1; i++) {
            int x1 = graphPoints.get(i).x;
            int y1 = graphPoints.get(i).y;
            int x2 = graphPoints.get(i + 1).x;
            int y2 = graphPoints.get(i + 1).y;
            g2.draw(new Line2D.Float(x1, y1, x2, y2));
        }

        g2.setStroke(oldStroke);
        g2.setColor(Color.RED);

        // วาดจุดสำหรับแต่ละคะแนน
        for (Point point : graphPoints) {
            int x = point.x - 4;
            int y = point.y - 4;
            int ovalW = 8;
            int ovalH = 8;
            g2.fillOval(x, y, ovalW, ovalH);
        }
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(800, 600);
    }

    public static void createAndShowGui() {
        List<Integer> scores = Arrays.asList(72, 90, 60, 50, 85);

        SwingLineChartExample mainPanel = new SwingLineChartExample(scores);

        JFrame frame = new JFrame("DrawGraph");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(mainPanel);
        frame.pack
<p> </p>
<p> </p>
<p>หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง</p>

                        <script>
                        function autoheight(element) {
                                
                        
                                var elements = document.getElementsByClassName(element);
                                for (var i = 0, len = elements.length; i < len; i++) {
                                    var el = elements[i];
                                    el.style.height = "5px";
                                    el.style.height = (el.scrollHeight)+"px";
                                }
                            }
                        document.addEventListener("DOMContentLoaded", function(){

                                autoheight('nt_code');
                        });    
                        </script>
                                        </div>
            <br>
            <p class="">Tag ที่น่าสนใจ:
				<a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=line_chart">line_chart</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=java">java</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=jfreechart">jfreechart</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=javafx">javafx</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=java_swing">java_swing</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=gui">gui</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=data_visualization">data_visualization</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=chartfactory">chartfactory</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=defaultcategorydataset">defaultcategorydataset</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=linechart">linechart</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=numberaxis">numberaxis</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=xychart">xychart</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=series">series</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=data_analysis">data_analysis</a> <a class="btn btn-outline-primary btn-sm kbtnsm" href="/tutorial/tag.php?tag=programming">programming</a> 			</p>

            <hr>

<div class="row text-center">
    <h3>บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้</h3>
    <p>
        หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่
        <a href="http://m.me/Expert.Programming.Tutor"  >
             http://m.me/Expert.Programming.Tutor
        </a>

    </p>

</div>

<div class="row text-center p-4" style="background: aliceblue;">
    <h2>ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร? </h2>
    <h4>สมัครเรียน ONLINE ได้ทันทีที่
    <a href="https://elearn.expert-programming-tutor.com"  >
        https://elearn.expert-programming-tutor.com
    </a></h4>

    <h2>หรือติดต่อ  </h2>
    <p>085-350-7540 (DTAC) <br />
    084-88-00-255 (AIS) <br />
    026-111-618 <br />
    หรือทาง EMAIL:  NTPRINTF@GMAIL.COM<br /></p>
    <a href="https://expert-programming-tutor.com/about_us.php#maps"  >
        แผนที่ ที่ตั้งของอาคารของเรา
        <img src="/images/map_icon.png" width="130"></img>
    </a>
</div>
<br>

            <div class="row">
                <h3 id="klearnplan">แผนผังการเรียนเขียนโปรแกรม</h3>
<img src="/images/logo_circle.jpg" data-src="https://expert-programming-tutor.com/EPT-course.png" alt=""  />
            </div>
        </div>

        <div class="col-md-12 col-lg-2 p-0">
            <div class="ksidebarback" id="rightsideback" onclick="righttoggle()"></div>
<div class="krightbar" id="krightbar" >
<div class="bg-light" style="margin-top: -20px;">
    <button type="button" class="btn-close float-end m-1 kbtn-close-display" id="krightbarbtn" aria-label="Close" onclick="righttoggle()"></button>
    <h4 class="p-2">Link อื่นๆ</h4>
    <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/">หน้าแรก</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/about_us.php">เกี่ยวกับเรา</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/why_expert_programming_tutor.php">เรียนกับเราดีอย่างไร</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/example_project.php">ตัวอย่างโปรเจกต์ที่เคยสอน</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/">คอร์สทั้งหมดของเรา</a></li>
        <li class="nav-item"><a class="nav-link" href="https://elearn.expert-programming-tutor.com">เรียนออนไลน์</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/live/seal.php">SEAL TEAM CODE CAMP</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/course_set.php">Course SET ลงหลาย Course พร้อมกันมีส่วนลดให้</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/level_up.php">Course Level Up - สำหรับเด็กและผู้ใหญ่ที่ต้องการเริ่มแบบง่าย ๆ</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/levelup/lv_detail.php">Course Level Up - วิทยาการคำนวณสำหรับเด็ก (สอนสด)</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/java.php">Course JAVA</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/python.php">Course Python</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/c.php">Course C/C++</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/cs.php">Course C#</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/vb_net.php">Course VB.NET</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/php.php">Course PHP / Web Programming</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/algo.php">Course Data Structure And Algorithm</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/android.php">Course Android</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/ios.php">Course Objective C & iOS Programming</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/image_processing.php">Course Image Processing</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/math.php">Course คณิตศาสตร์สำหรับ Programmer</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course_class.php">Course สอนสด</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course_self.php">Course แบบ SELF</a></li>
        <!-- <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/special_course.php">Course พิเศษ</a></li> -->
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course2.php">หลักสูตร Advance</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/essential_course.php">Course แบบ ESSENTIAL COURSE (เรียนแบบ Private มีส่วนลด)</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/graphics_course.php">Course Graphics</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/your_private_group.php">Course แบบที่ผู้เรียนรวมกลุ่มกันมาเอง</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/fast_course.php">Course แบบด่วยจี๋ 1-2 วันจบหลักสูตรเร่งรัด</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/sketchup.php">Course สอนวาดรูป 3D โดยใช้ Sketch Up</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/payment/register.php">สมัครเรียน Course SELF</a></li>
        <li class="nav-item"><a class="nav-link" href="https://booking.expert-programming-tutor.com/">จองเวลาเรียน Course SELF</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/blog/">Blog</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/gallery/">Gallery</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/tutorial/">Free Tutorial</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/faq.php">คำถามที่พบบ่อย</a></li>
        <li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/career/">Career</a></li>
    </ul>
</div>
</div>
        </div>
    </div>
</div>


<script>
var elmnt = document.getElementById("article");
var elmnt2 = document.getElementById("kbtnarticle");
elmnt.style.backgroundColor = 'blue';
elmnt.style.color = 'white';
elmnt2.style.backgroundColor = 'blue';
elmnt2.style.color = 'white';

function copyurl(url) {
  navigator.clipboard.writeText(url);
  alert("Copied URL: " + url);
}
</script>

<style>
pre>code>textarea
{
    width: 95% !important;
    height: 80%;
    border: none;
    background-color: #f5f5f5;
    padding: 10px;
    line-height: 16px;
    font-size: 13px;
    font-family: 'Courier New', monospace;


    overflow: auto;
    text-wrap: nowrap;
    resize: none;
    outline: none;

}

pre>code>textarea {


    background: url(https://expert-programming-tutor.com/tutorial/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

</style>


    <div style="z-index: 1090; margin: 8px 8px 8px 8px; position: fixed; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; z-index: 10000;">
        <div style="align-items: center; background-color: #212121; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 8%); border-radius: 0.25rem;">
            <div style="padding: 14px 16px; color:white;">
                <div class="row">
                    <div style="padding-left: 20px; padding-right: 100px;">
                        <b>Allow sites to save and read cookie data.</b>
                        <span style="line-height: 1.7;"><br></span>
                        Cookies are small pieces of data created by sites you visit.
                        They make your online experience easier by saving browsing information.
                        We use cookies to improve your experience on our website.
                        By browsing this website, you agree to our use of cookies.
                    </div>
                    <div>
                        <form method="POST" action="https://expert-programming-tutor.com/accept_cookie_action.php">
                            <button type="submit" class="btn btn-success" style="font-size: 18px; position: fixed; right: 25px; bottom: 25px;">
                            ยอมรับ</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<div class="container-fluid bg-dark" style="color:white;" id="kfooterzone">
	<ul class="nav justify-content-center">
		<li class="nav-item"><a class="nav-link" href="https://elearn.expert-programming-tutor.com">เรียนเขียนโปรแกรม ONLINE</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/java.php">สอนเขียนโปรแกรม JAVA</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/c.php">สอนเขียนโปรแกรม C/C++</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/php.php">สอนเขียนโปรแกรม PHP</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/php.php">สอนเขียนโปรแกรม JAVASCRIPT</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/cs.php">สอนเขียนโปรแกรม C#</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/vb_net.php">สอนเขียนโปรแกรม VB.NET</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/algo.php">Data Structure And Algorithm</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/your_private_group.php">Course GROUP</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/course_set.php">Course SET</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/why_expert_programming_tutor.php">Why</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/example_project.php">Student's Project</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course2.php">Advance</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course_class.php">Course</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/course_self.php">Course SELF</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/essential_course.php">ESSENTIAL COURSE มีส่วนลด</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/graphics_course.php">Course Graphics</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/special_course.php">Course พิเศษ</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/fast_course.php">Course ด่วนจี๋</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/sketchup.php">Sketch Up</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/detail_course/android.php">สอนเขียนโปรแกรมบน Android</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/tutorial/">Free Tutorial</a></li>

		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/faq.php">คำถามที่พบบ่อย</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/legal/privacy_policy.php">นโยบายคุ้มครองข้อมูลส่วนบุคคล</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/legal/refund_policy.php">นโยบายการคืนเงิน</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/career/">Career</a></li>
		<li class="nav-item"><a class="nav-link" href="https://expert-programming-tutor.com/sitemap.php">Sitemap</a></li>

	</ul>
	<br>
	<div style="width :60%;text-align:center;font-size:12pt;margin-left:20%;margin-right:20%;">
		<p>Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. |  085-350-7540 |  084-88-00-255 | ntprintf@gmail.com</p>
		<h3 style="color:white;">ติดต่อเราได้ที่ </h3>
		085-350-7540 (DTAC) <br />
		084-88-00-255 (AIS) <br />
		026-111-618 <br />
		หรือทาง EMAIL:  NTPRINTF@GMAIL.COM<br />
		<a href="https://expert-programming-tutor.com/about_us.php#maps" style="color:white;" >
		แผนที่ ที่ตั้งของอาคารของเรา <br />
		<img src="/images/map_icon.png" width="90"></img>
		</a>
	</div>
</div>

<script>
// indicate that the dispaly == block or none of #leftsidenav is real or NT Generate for Animation
let isNTGeneratatedEvent = false;
var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};
var changeLeftNav = function(evt)
{
	var topnavHeight = document.getElementById('topnav').clientHeight;
	var leftside = document.getElementById("leftsidenav");
	var kcontent = document.getElementById("kcontent");
	if(getWidth() >= 993) {
		if(leftside.style.display === "block" && !isNTGeneratatedEvent) {
			if(kcontent ) kcontent.style.paddingLeft = "230px";

			var klearnplan = document.getElementById("klearnplan");
			var kfooterzoneHeight = document.getElementById("kfooterzone").clientHeight;
			if (window.scrollY > klearnplan.offsetTop) {
				leftside.style.bottom = (kfooterzoneHeight) + "px";
			} else if (window.scrollY > klearnplan.offsetTop - 200) {
				leftside.style.bottom = (200) + "px";
			} else {
				leftside.style.bottom = "0px";
			}
		}

		if ( window.pageYOffset > 100 ) {
			leftside.style.top = (topnavHeight) + "px";
		} else if ( window.pageYOffset > 50 ) {
			leftside.style.top = (105 + topnavHeight) + "px";
		} else {
			leftside.style.top = (200 + topnavHeight) + "px";
		}

	}
	else {
		var leftsideback = document.getElementById("leftsideback");
		if ( window.pageYOffset > 350 ) {
			leftside.style.top = (topnavHeight) + "px";
			leftsideback.style.top = (topnavHeight) + "px";
			leftsideback.style.zIndex = "1000";
		} else {
			leftside.style.top = "0px";
			leftsideback.style.top = "0px";
			leftsideback.style.zIndex = "8000";
			if (leftside.style.display === "block" && !isNTGeneratatedEvent) {
				leftsideback.style.display = "block";
			}
		}
		leftside.style.bottom = "0px";
		if(kcontent) kcontent.style.paddingLeft = "30px";
	}

};

function highlightCurrent() {
	const curPage = document.URL;
	const links = document.getElementsByTagName('a');
	for (let link of links) {
		if (link.href == curPage) {
		 link.classList.add("current");
		}
	}

	if(	curPage == "https://expert-programming-tutor.com/tutorial/index.php" ||
		curPage == "https://expert-programming-tutor.com/tutorial/"  ) {
		var btn = document.getElementById("btnlefttoggle");
		btn.style.display = "none";
	} else {
		var topnavHeight = document.getElementById('topnav').clientHeight;
		var leftside = document.getElementById("leftsidenav");
		leftside.style.display = "block";
		if(getWidth() >= 993) {
			if ( window.pageYOffset > 100 ) {
		        leftside.style.top = (topnavHeight) + "px";
		    } else if ( window.pageYOffset > 50 ) {
		        leftside.style.top = (105 + topnavHeight) + "px";
		    } else {
		        leftside.style.top = (200 + topnavHeight) + "px";
		    }
		}
		else {
			var leftsideback = document.getElementById("leftsideback");
			if ( window.pageYOffset > 350 ) {
		        leftside.style.top = (topnavHeight) + "px";
				leftsideback.style.top = (topnavHeight) + "px";
				leftsideback.style.zIndex = "1000";
		    } else {
		        leftside.style.top = "0px";
				leftsideback.style.top = "0px";
				leftsideback.style.zIndex = "8000";
		    }
		}

		addEvent(window, "resize", changeLeftNav);
		addEvent(window, "scroll", changeLeftNav);

		var btn = document.getElementById("btnlefttoggle");
		btn.style.display = "block";
		btn.style.background = "gray";
	}

	document.getElementById("krightbarbtn").style.display = "none";
}

document.onreadystatechange = () => {
	if (document.readyState === 'complete') {
		highlightCurrent()
	}
};

function lefttoggle() {
  var leftside = document.getElementById("leftsidenav");
  var leftsideback = document.getElementById("leftsideback");
  var kcontent = document.getElementById("kcontent");
  var btn = document.getElementById("btnlefttoggle");

  if(leftside) {
	  if (leftside.style.display === "none") {
	    leftside.style.display = "block";
		if(btn) btn.style.background = "gray";

		if(getWidth() >= 993) {
			if(kcontent) kcontent.style.paddingLeft = "230px";
		} else {
			leftsideback.style.display = "block";
			if(kcontent) kcontent.style.paddingLeft = "30px";
		}

	  } else {
	    leftside.style.display = "none";
		leftsideback.style.display = "none";
		if(kcontent) kcontent.style.paddingLeft = "30px";
		if(btn) btn.style.background = "#212529";
	  }
  }
}

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}



////////////////////NT ADD///////////




const targetNode = document.getElementById('leftsidenav');
if(targetNode)
{
	targetNode.style.overflowX  = 'hidden';
	// Options for the observer (which mutations to observe)
	const config = { attributes: true};

	//Global Variable

	let NTanimationDuration = 500;

	// Callback function to execute when mutations are observed
	const callback = function(mutationsList, observer) {
		// Use traditional 'for loops' for IE 11
		for(const mutation of mutationsList) {
			if(isNTGeneratatedEvent) continue;
			if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
				console.log(document.getElementById("leftsidenav").style.display +"  " + isNTGeneratatedEvent);
				if(document.getElementById("leftsidenav").style.display === 'block')
				{
					if(!isNTGeneratatedEvent )
					{
						console.log("open");


						let currentWidth = document.getElementById("leftsidenav").style.width;

						document.getElementById("leftsidenav").animate([
							// keyframes
							{ width: currentWidth},
							{ width: '200px' }
						], {
					// timing options
						duration: NTanimationDuration
						});


						setTimeout(() => {
							document.getElementById("leftsidenav").style.width = "200px";
						}, NTanimationDuration + 5);

					}


				}
				else
				{
					if(!isNTGeneratatedEvent )
					{
						isNTGeneratatedEvent = true;
						console.log("close");
						document.getElementById("leftsidenav").style.display = 'block';

						let currentWidth = document.getElementById("leftsidenav").style.width;
						document.getElementById("leftsidenav").animate([
							// keyframes
							{ width: currentWidth },
							{ width: '0px' }
							], {
							// timing options
							duration: NTanimationDuration
						});
						setTimeout(() => {

							document.getElementById("leftsidenav").style.display = 'none';
							document.getElementById("leftsidenav").style.width = "0px";
						}, NTanimationDuration + 5 );
						setTimeout(() => {
							isNTGeneratatedEvent = false;
						}, NTanimationDuration + 25);
					}

				}

			}
		}
	};

	// Create an observer instance linked to the callback function
	const observer = new MutationObserver(callback);

	// Start observing the target node for configured mutations
	observer.observe(targetNode, config);

}

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