ASP.NET C# : มาดูวิธีสร้างกราฟในเว็บไซต์ง่ายๆ ด้วย Google Chart API กันเถอะ !

ทิป & เทคนิค #192
เขียนโดย :
มีผู้อ่าน : 3,102 คน วันนี้ : 2 คน

การแสดงผลแบบกราฟ คือ สิ่งที่ช่วยให้ผู้ใช้งาน อ่านข้อมูลได้เห็นภาพของข้อมูลได้ชัดเจนมากยิ่งขึ้น โดยไม่ต้องลงรายละเอียดตัวเลขแต่ละตัวก็สามารถเข้าใจข้อมูลอย่างคร่าวๆ ได้ 

สำหรับเว็บเทคโนโลยีเองก็มีตัวช่วยสำหรับสร้างกราฟประเภทต่างๆ มากมาย ทั้งแบบขาย License, Freeware หรือแม้กระทั่งเป็น Open Source ครับ

 

ซึ่งในบทความนี้ เราจะมาสร้างกราฟบนเว็บไซต์ ด้วย ASP.NET ภาษา C# ในการแสดงข้อมูลราคาทองคำแบบง่ายๆ ภายใน 4 ขั้นตอน โดยใช้ Google Chart API ซึ่งสามารถใช้ได้ฟรีโดยไม่มีค่าใช้จ่าย

 

ขั้นตอนที่ 1) 

สร้างไฟล์ HTML5 แล้วตั้งชื่อว่า index.html และใส่ HTML elements ดังนี้
 

<html lang="en-us">
  <head>

  </head>
  <body>

  </body>
</html>

 

ขั้นตอนที่ 2)   

สร้าง <div> ใน <body> tag สำหรับเป็นพื้นที่แสดงกราฟ ชื่อ : gold-pricing-chart

<body>
        <!--Element ของกราฟที่ต้องการแสดงผล-->
        <div id="gold-pricing-chart"></div>

</body>

 

ขั้นตอนที่ 3)   

ที่ <head> tag ทำการใส่โค้ดดังนี้

<head>
        <!--ทำการโหลดไฟล์ js library ของ Google Chart API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <!--สร้าง javascript การทำงานในการเตรียมข้อมูลและวาดกราฟ-->
        <script type="text/javascript">
        //โหลด library เฉพาะประเภทกราฟที่ต้องการวาด กรณีนี้เลือก line chart
        google.charts.load('current', { 'packages': ['line'] });
        //เรียกใช้ function drawChart เมื่อทำการโหลด library เสร็จ
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            //สร้างข้อมูลตัวอย่างโดยใช้ DataTable
            var data = new google.visualization.DataTable();
            //สร้างลำดับ columns ที่ตรงกับข้อมูลที่มีและใส่ประเภทให้ถูกต้อง
            data.addColumn('date', 'วันที่');
            data.addColumn('number', 'ทองคำแท่งรับซื้อ');
            data.addColumn('number', 'ทองคำแท่งขาย');
            data.addColumn('number', 'ทองรูปพรรณรับซื้อ');
            data.addColumn('number', 'ทองรูปพรรณขาย');

            //สร้างข้อมูลตัวอย่าง กรณีนี้ทำให้อยู่ในรูป JSON Row Arrays (อาจปรับใช้โดยการเรียก Web API)
            data.addRows([
                [new Date('2016-09-12'), 21900.00, 22000.00, 21451.40, 22500.00],
                [new Date('2016-09-10'), 21850.00, 21950.00, 21451.40, 22450.00],
                [new Date('2016-09-09'), 21900.00, 22000.00, 21512.04, 22500.00],
                [new Date('2016-09-08'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-09-07'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-09-06'), 21750.00, 21850.00, 21360.44, 22150.00],
                [new Date('2016-09-05'), 21700.00, 21800.00, 21314.96, 22300.00],
                [new Date('2016-09-03'), 21650.00, 21750.00, 21254.32, 22250.00],
                [new Date('2016-09-02'), 21400.00, 21500.00, 21011.76, 22000.00],
                [new Date('2016-09-01'), 21350.00, 21450.00, 20966.28, 21950.00],
                [new Date('2016-08-31'), 21500.00, 21600.00, 21117.88, 22100.00],
                [new Date('2016-08-30'), 21550.00, 21650.00, 21163.36, 22150.00],
                [new Date('2016-08-29'), 21550.00, 21650.00, 21163.36, 22150.00],
                [new Date('2016-08-27'), 21650.00, 21750.00, 21254.32, 22250.00],
                [new Date('2016-08-26'), 21600.00, 21700.00, 21208.84, 22200.00],
                [new Date('2016-08-25'), 21600.00, 21700.00, 21208.84, 22200.00],
                [new Date('2016-08-24'), 21850.00, 21950.00, 21451.40, 22450.00],
                [new Date('2016-08-23'), 21900.00, 22000.00, 21512.04, 22500.00],
                [new Date('2016-08-22'), 21850.00, 21950.00, 21451.40, 22450.00],
                [new Date('2016-08-20'), 21950.00, 22050.00, 21557.52, 22550.00],
                [new Date('2016-08-19'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-08-18'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-08-17'), 21950.00, 22050.00, 21557.52, 22550.00],
                [new Date('2016-08-16'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-08-15'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-08-13'), 21950.00, 22050.00, 21557.52, 22550.00],
                [new Date('2016-08-12'), 22000.00, 22100.00, 21603.00, 22600.00],
                [new Date('2016-08-11'), 22100.00, 22200.00, 21709.12, 22700.00],
                [new Date('2016-08-10'), 22150.00, 22250.00, 21754.60, 22750.00],
                [new Date('2016-08-09'), 22000.00, 22100.00, 21603.00, 22600.00]
            ]);

            //ตั้งค่าเริ่มต้นของกราฟ เช่น ข้อความที่จะแสดง, ตำแหน่งข้อความ และขนาดกราฟ
            var options = {
                chart: {
                    title: 'ราคาทองย้อนหลัง',
                    subtitle: '(ทองคำแท่งรับซื้อ/ขาย บาทละ, ทองรูปพรรณรับซื้อ/ขาย บาทละ)'
                },
                width: 900,
                height: 500,
                axes: {
                    x: {
                        0: { side: 'bottom' }
                    }
                }
            };

            //สร้างตัวแปรเพื่อระบุตำแน่งกราฟที่จะวาด
            var chart = new google.charts.Line(document.getElementById('gold-pricing-chart'));

            //ทำการวาดกราฟด้วยข้อมูลตัวอย่าง
            chart.draw(data, options);
        }
    </script>

</head>

 

ขั้นตอนที่ 4)

ทดลองเปิดไฟล์ index.html ด้วย browser จะได้ผลลัพธ์ดังนี้

ASP.NET C# : มาดูวิธีสร้างกราฟในเว็บไซต์ง่ายๆ ด้วย Google Chart API กันเถอะ !

 

เป็นยังไงบ้างครับ เพียง 4 ขั้นตอนเท่านั้น คุณก็จะสามารถสร้างกราฟ ในเว็บไซต์ ASP.NET C# ของคุณได้แล้ว ! ง่ายๆ ใช่ไหมล่ะครับ การสร้างกราฟนั้น จะช่วยเรื่องการแสดงผลเมื่อปริมาณข้อมูลมีมหาศาลซึ่งจะช่วยให้ผู้ใช้งานสะดวกต่อการดูข้อมูลมากยิ่งขึ้น ทำให้ เว็บไซต์ของเรานั้นดูน่าสนใจขึ้นอีกหลายเท่าตัวเลยครับ

 

สำหรับใครที่ลองทำตามแล้ว เกิดปัญหา หรือ มี Error อย่างไร ก็สามารถเข้ามาสอบถาม กันได้ใน Page ของเรา https://www.facebook.com/code.cssteps/ ได้เลยครับ มาเรียนรู้ด้าน ASP.NET C# ไปกับพวกเรา ทีมงาน CsSteps ครับ แล้วพบกันกับบทความ Tip & Technique ของ ASP.NET C# ในบทความหน้าครับ ไม่นานเกินรอครับผม

 

Tag : ASP.NET , C#.NET