PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย

07 December 2014 By Ninenik Narkdee
google chart

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google chart



เนื้อหาบทความนี้เน้นแนะนำ การใช้งาน google chart สำหรับสร้างกราฟแนวตั้ง
โดยโค้ด จะเป็นแค่ตัวอย่าง ทำความรู้จักอย่างง่าย สำหรับใครที่สนใจ
สามารถดู รายละเอียดได้ที่ https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

ตัวอย่าง



โค้ด google_column_chart.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div style="margin:auto;width:80%;">
<div id="chart_div" style="margin:auto;width:600px;height:400px;"></div>  
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<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() {
    // สร้างตัวแปร array เก็บค่า ข้อมูล
    var dataArray1=[
      ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]            
    ];
        
    // แปลงข้อมูลจาก array สำหรับใช้ในการสร้าง กราฟ
    var data = google.visualization.arrayToDataTable(dataArray1);

    // ตั้งค่าต่างๆ ของกราฟ
    var options = { 
        title: "หัวข้อกราฟ",
        hAxis: {title: 'ข้อความแนวนอน', titleTextStyle: {color: 'red'}},
        vAxis: {title: 'ข้อความแนวตั้ง', titleTextStyle: {color: 'blue'}},
        width: 600,
        height: 400,
        bar: {groupWidth: "70%"},
        legend: { position: 'right', maxLines: 3 },
        tooltip: { trigger: 'select' }
    };

    // สร้างกราฟแนวตั้ง แสดงใน div id = chart_div
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options); // สร้างกราฟ
    
}
</script>       
</body>
</html>







Tags:: google chart






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง