PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

07 December 2014 By


เนื้อหาบทความนี้เน้นแนะนำ การใช้งาน 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





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