27 มกราคม 2558

Try google charts

            Google charts เป็นเครื่องมือสำหรับสร้าง Data Visualization บนเว็ปตัวหนึ่งที่ใช้งานง่ายมีรูปแบบให้เลือกหลากหลายตั้งแต่ กราฟง่ายๆ จนถึง กราฟต้นไม้แบบซับซ้อน ซึ่งการนำไปใช้งานจะอยู่ในรูปแบบ JavaScript
Reference : https://developers.google.com/chart/interactive/docs/quick_start

เริ่มการใช้ Google charts อย่างง่าย
1.   ส่วนของการโหลด Libraries ของ Google มาใช้
-     Google JSAPI API
-     Google Visualization library
2.   ส่วนของการสร้างข้อมูลสามารถ สร้างในรูปแบบของตัวแปร Array หรือจะดูดข้อมูลมาจาก Spreadsheets ก็ได้ตามสะดวก
3.   ส่วนของการตั้งค่ากราฟต่างๆ เช่น ขนาด หัวข้อ รูปแบบของกราฟ

 ตัวอย่าง JavaScript อย่างง่าย

<html>
  <head>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>

     <script type="text/javascript">

       google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);

       function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Semester', 'Student'],
          ['1/2554',  286],
          ['2/2554',  281],
          ['1/2555',  254],
          ['2/2555',  231],
          ['1/2556',  193],
          ['2/2556',  175],
          ['1/2557',  174],
        ]);

         var options = {
          title: 'Engineering Student of KMUTNB Prachinburi Campus',
          'width':500,
          'height':300
        };

         var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

         chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart"></div>
  </body>
</html>

เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)