วันจันทร์ที่ 26 มกราคม พ.ศ. 2558

Exercise2 - try other tools(continue)

Exercise2 

  • Try google charts
      บริการ google chart พัฒนาจาก Javascript ทำให้สำดวกในการใช้งานร่วมกับเอกสาร HTML มีรูปแบบกราฟหลากหลาย  ทำงานผ่าน Visualization API โดยการส่งข้อมูลทางสถิติไปยัง google และรับ script ที่ google chart สร้างขึ้นกลับมาแสดงผล (รับ-ส่ง ข้อมูลในรูปแบบ client-server architecture)  
ข้อดี - กราฟมีการตอบสนองเป็น อนิเมชัน
        - หากนำไปใช้ใน E-book หรือ สื่อออนไลน์เพราะกราฟจะแสดงผลได้แบบ real time และสามารถอัพเดทข้อมูลได้เสมอ



Line chart https://developers.google.com/chart/interactive/docs/gallery/linechart


code
<html>
<head>
  <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Smart Phone');
      data.addColumn('number', 'PC');
      data.addColumn('number', 'Tablet');

      data.addRows([
        ['2009',  175,  305,  0],
        ['2010',  297,  346,  18],
        ['2011',  468,  370,  64],
        ['2012',  630,  393,  104],
        ['2013',  789,  418,  178],
        ['2014',  947,  482,  252],
        ['2015',  1105,  535,  326]
      ]);

      var options = {
        chart: {
          title: 'Sale of client devices 2009 to 2015',
          subtitle: 'millions of units'
        },
        width: 750,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

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



Highlighter
เขียนโดย ที่

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

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

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