- Web-base Tools
- Google Charts
- Other Tools
 |
| รูปที่ 1 : ตารางข้อมูลที่นำมาใช้แสดง |
Web-based Tools
Web-based Tools หมายถึง เครื่องมือที่มีการทำงานผ่านทาง Web browser อย่าง Internet Explorer, Chrome, Firefox และอื่นๆ ซึ่งต้องอาศัยการเชื่อมต่อทางอินเตอร์เน็ตในการใช้งาน
โดย web-based tools ที่ใช้ในการสร้าง Chart และ กราฟมีหลากหลาย web site ให้เลือกใช้งาน เช่น Datawrapper , RAW , Many eyes และ Plotly เป็นต้น ซึ่งในการทดสอบนี้ ได้เลือก RAW มาใช้งาน
RAW
 |
| รูปที่ 2 : แสดงหน้า homepage ของ RAW web-based |
เป็นเครื่องมือที่ใช้ในการจัดการข้อมูลที่ต้องการจะนำมาแสดงผล โดยเป็นการเชื่อมโยงกันระหว่าง spreadsheets และ vector graphics
* vector graphics เป็นการนำข้อมูลมาประมวลผลผ่านชุดคำสั่งทางคณิตศาสตร์ เพื่อสร้างภาพดิจิตอล 2 หรือ 3 มิติ
 |
| รูปที่ 3 : แสดงหน้า Features ของ Raw web-based |
 |
| รูปที่ 4 : เป็นส่วนในการเพิ่มข้อมูลที่ต้องการนำไปแสดงผล |
 |
| รูปที่ 5 : แสดงการ upload ไฟล์ *.csv ลงใน RAW |
 |
| รูปที่ 6 : ข้อมูลที่ต้องการแสดงผล |
 |
| รูปที่ 7 : การแสดงผลข้อมูลแบบต่างๆ |
 |
| รูปที่ 8 : การจัดการรูปข้อมูลที่จะใช้ในการแสดงผล |
 |
| รูปที่ 9 : การแสดงผลข้อมูลที่ได้จาก RAW |
Google Charts
Google charts เป็นเครื่องมือในการสร้าง graph หรือ charts โดยการให้บริการของ Google ที่ใช้งานได้พรี พัฒนาจาก JavaScript สามารถสร้างการแสดงผลข้อมูลออกมาได้หลากหลายรูปแบบ ทั้ง Bar Charts , Pie Chart ,Histograms และอื่นๆอีกมากมาย พร้อมทั้งคำแนะนำการใช้งานและตัวอย่าง
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Working', 5],
['Sleeping', 8],
['Surfing', 3],
['Watching TV', 2],
['Reading', 0.25],
['Relaxing', 2.5],
['Other', 3.25]
]);
var options = {
title: 'Time Usage',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById
('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
ตัวอย่างโค้ดที่ใช้ในการสร้าง Pie Chart 3D ของ Google Charts
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Working', 5],
['Sleeping', 8],
['Surfing', 3],
['Watching TV', 2],
['Reading', 0.25],
['Relaxing', 2.5],
['Other', 3.25]
]);
var options = {
title: 'Time Usage',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById
('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
 |
| รูปที่ 10 : Pie Chart ที่ได้จากการใช้ Google chart API |
Other Tools
ในการนำข้อมูลมาแสดงผลเป็น graph หรือ chart นั้นยังมีเครื่องมือื่นๆให้เลือกใช้อีกมากมาย ซึ่งในที่นี้ได้เลือกเครื่องมือที่มีชื่อว่า jschart เป็นเครื่องมือที่มีทั้งเป็นโปรแกรมให้ Download และ ติดตั้งบนเครื่องคอมพิวเตอร์ และ ใช้งาน Online ผ่าน web browser
 |
| รูปที่ 11 : หน้าเว็บไซต์ส่วนที่ให้ผู้ใช้เลือกรูปแบบการแสดงข้อมูล |
 |
| รูปที่ 12 : ส่วนที่เป็น Editor ของ JScharts Online |
 |
| รูปที่ 13 : แสดงการใส่ข้อมูลที่ต้องการแสดงผล |
 |
| รูปที่ 14 : Pie Chart ที่ได้จากการใช้ JSchart Online |
Reference:
WEB-BASE อนาคตใหม่ในการใช้งานโปรแกรมVector graphics คืออะไร
