สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

by
Post Views: 16,954

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

    สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม  ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย

    ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs

  1. ทำการ Include ไฟล์ Javascript ของ chart.js ไว้ใน header (ในตัวอย่างเป็นการเรียกใช้งานจาก CDN หากต้องการใช้งานจากไฟล์ที่เก็บไว้ที่เว็บเซิฟเวอร์ให้ปรับแก้ src path)
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>
  1. เพิ่ม canvas ในส่วนของ body
 <canvas id="report" width="600" height="300"></canvas>
  1. เขียน JavaScript เพื่อสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง
 var dataDemo = { labels: ["Apple", "Sumsung", "ASUS", "OPPO"],
 datasets: [{
 label: "2557",
 fillColor: "#5B90BF",
 data: [20, 10, 9, 8]
 }]
 };
  1. ทำการสร้าง Context จาก canvas เพื่อนำไปสร้าง Chart Object โดยใช้คำสั่ง ดังนี้
 var ctx = $("#report").get(0).getContext("2d");
 var chart = new Chart(ctx).Bar(dataDemo, { bezierCurve: false });

 

จาก 4 ขั้นตอนดังกล่าวเราจะได้โค้ดที่เมื่อทำการเพิ่มโครงสร้างของหน้าเว็บ และบันทึกเป็นไฟล์ html แบบนี้ chart.html  ลองเปิดดูจะพบว่าสามารถแสดงกราฟแท่งได้แล้ว

 

    แต่ในงานจริงนั้น รู้กันดีนะครับ ว่ามันไม่ง่ายอย่างนั้น โจทย์ของเราคือ สามารถนำข้อมูลจาก Database ซึ่งได้เขียน Query จนได้ข้อมูลแบบที่เราเรียกกันติดปากว่า Crosstab นั้นคือมีชื่อฟิลด์ข้อมูลที่มีความสัมพันธ์กันในแกน x และแกน y ซึ่งเป็นรูปแบบข้อมูลที่นำมาสร้างเป็นกราฟนั้นเอง ส่วนวิธีการนั้น ผมไม่ขอลงรายละเอียดในบทความนี้ แต่สำหรับท่านใดที่ใช้งานฐานข้อมูล Oracle ตั้งแต่ 11g ขึ้นไปลองศึกษาคำสั่งชื่อ Pivot ดูครับ น่าจะช่วยลดความยุ่งยากในขั้นตอนนี้ได้มาก ตัวอย่างข้อมูล แบบ Crosstab ที่เราจะส่งจากฝั่ง Server มาสร้างเป็น Object สำหรับสร้างกราฟอีกทีครับ

 

crosstab-datatable

 

    อีกจุดที่มีความยุ่งยาก คือการแปลงจากรูปแบบข้อมูล Crosstab Datatable เป็น JSON ตัวช่วยของผมในเรื่องนี้คือ Library ที่ชื่อ Newtonsoft.Json สามารถดาวส์โหลดมาใช้งานผ่าน NuGet ได้เลยครับ จากนั้นก็เรียกใช้งาน ดังตัวอย่าง โดยตัวแปล data คือ Datatable ของเรา เมื่อได้ข้อมูล JSON แล้วให้ทำการสร้าง Web Service เพื่อให้สามารถดึงข้อมูลดังกล่าวจาก Javascript ได้

JsonConvert.SerializeObject(data)

ถัดจากนั้น ก็คือการนำ JSON นั้นไปสร้างเป็น Object ที่มีโครงสร้างตามที่ Chart.js ต้องการอีกที ในขั้นตอนนี้ผมลองหา Library ดูแล้วแต่ไม่เจอ ก็ได้พัฒนาเป็นชุดคำสั่ง helper เล็กๆ ซึ่งค่อนข้างจะจำเพาะกับลักษณะข้อมูล และรูปแบบการแสดงผลของเว็บไซด์ที่ผมพัฒนาอยู่ แต่สามารถนำไปปรับแก้ให้เหมาะสมได้ครับ ซึ่งในไฟล์นี้ หากใส่ parameter และเขียนโครงสร้าง html ตามตัวอย่าง เราจะเหลือโค้ดที่จะต้องเขียนเพียงไม่กี่บรรทัด ก็จะได้กราฟมาใช้งานใน 3 รูปแบบ คือ กราฟแท่ง กราฟเส้น และกราฟวงกลม ตามที่มี method ให้ครับ

 

สำหรับการสร้างกราฟจะมีขั้นตอนเปลี่ยนไปดังนี้ครับ

  1. ทำการ include ไฟล์ Javascript โดยเพิ่มเติม chart-helper.js
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>
<script src="chart-helper.js" type="text/javascript"></script>
  1. ทำการ include ไฟล์ Style Sheet ดังนี้ bootstrap-grid.css และไฟล์ chart.css
<link href="bootstrap-grid.css" rel="stylesheet" type="text/css" />
<link href="chart.css" rel="stylesheet" type="text/css" />
  1. สร้าง HTML ตามโครงสร้าง โดยมีการใช้งาน class ในส่วน grid system ของ Bootstrap มาช่วยวางตำแหน่งซ้ายขวา ดังนี้
<div class="row">
 <div class="col-xs-8">
 <canvas id="reportBar" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelBar" class="chart-label-list">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-xs-8">
 <canvas id="reportLine" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelLine" class="chart-label-list">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-xs-8">
 <canvas id="reportPie" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelPie" class="chart-label-list">
 </ul>
 </div>
 </div>
  1. จากนั้นทำการเรียกใช้งาน Method ของ chart-helper.js ซึ่งประกอบไปด้วย CreateBarChart (สร้างกราฟแท่ง), CreateLineChart (สร้างกราฟเส้น), CreatePieChart (สร้างกราฟวงกลม) จะรับค่าเป็นข้อมูล JSON และ ID ของ HTML เพื่อนำไปสร้างกราฟโดยตัวอย่างการใช้งาน Method เหล่านี้ร่วมกับ Webservice (ทั้งนี้รูปแบบการเรียก Webservice ขึ้นอยู่กับวิธีการ Response ด้วย) มีดังนี้
$.ajax({
 type: "POST",
 url: "DemoService.asmx/MethodName",
 data: { param:data1 }
 }).done(function (json) {
 CreateBarChart(json, "reportBar", "chartLabelBar");
 CreateLineChart(json, "reportLine", "chartLabelLine");
 CreatePieChart(json, "reportPie", "chartLabelPie");
 }).fail(function (jqXHR, textStatus) {
 alert(textStatus);
 });

สามารถดาวโหลดไฟล์ตัวอย่างแบบเต็มได้ตามนี้ครับ chart-with-helper.html และกราฟที่ได้จะมีหน้าตาแบบนี้ ทั้งนี้ขึ้นอยู่กับข้อมูลของเราด้วยครับ

bar line pie