วิธีเพิ่ม Google Charts ลงในหน้าเว็บ

Google Charts เป็นไลบรารี JavaScript ฟรีจาก Google สำหรับสร้างกราฟและแผนภูมิ互动 (Interactive) ตัวอย่างนี้แสดงการสร้าง Bar Chart (แผนภูมิแท่ง) แสดงข้อมูลจำนวนคนที่ได้รับการศึกษาต่อปี

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <title>Google Charts Tutorial</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
  </script>
  <style>
    .barchartContainer {
      width: 550px;
      height: 400px;
      margin: 0 auto;
      font-weight: bold;
    }
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Adding google charts to your web page Example</h1>
  <div class="barchartContainer"></div>
  <script language="JavaScript">
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Year", "India"],
        ["2013", 500],
        ["2014", 800],
        ["2015", 1000],
        ["2016", 1200],
        ["2017", 1400]
      ]);
      var options = { title: "Educated people (in millions)" };
      var chart = new google.visualization.BarChart(
        document.querySelector(".barchartContainer")
      );
      chart.draw(data, options);
    }
    google.charts.setOnLoadCallback(drawChart);
  </script>
</body>
</html>

ขั้นตอนการใช้งาน Google Charts

1. โหลด Loader: <script src="https://www.gstatic.com/charts/loader.js"></script>
2. โหลด Package: google.charts.load('current', {packages: ['corechart']});
3. เตรียม Container: <div id="chart_div"></div> พร้อมกำหนดขนาด
4. สร้าง DataTable: ใช้ google.visualization.arrayToDataTable() หรือ DataTable()
5. ตั้งค่า Options: Title, Colors, Legend, Axes, Animation, etc.
6. สร้าง Chart Object: new google.visualization.ChartType(container)
7. Draw: chart.draw(data, options)
8. Callback: ใช้ google.charts.setOnLoadCallback(drawChart)

ประเภท Chart ที่นิยมใช้

ตัวอย่าง Options ที่สำคัญ

var options = {
  title: 'Sales Performance',
  titleTextStyle: { color: '#333', fontSize: 18 },
  width: 600,
  height: 400,
  legend: { position: 'bottom' },
  colors: ['#4285f4', '#ea4335', '#fbbc05', '#34a853'],
  backgroundColor: 'transparent',
  chartArea: { width: '70%', height: '70%' },
  hAxis: { title: 'Month', textStyle: { fontSize: 12 } },
  vAxis: { title: 'Revenue', minValue: 0 },
  animation: { duration: 1000, easing: 'out' },
  tooltip: { isHtml: true }
};

Responsive Charts

Google Charts ไม่ Responsive เอง ต้องจัดการด้วย CSS + JavaScript:

.chart-container { width: 100%; height: 400px; }
window.addEventListener('resize', drawChart);
// ใน drawChart ใช้ container.offsetWidth/Height

Alternative: Chart.js / ApexCharts / ECharts

ถ้าต้องการ Control มากกว่า ขนาดไฟล์เล็กลง หรือไม่ต้องพึ่ง Google CDN ให้ลอง Chart.js (Canvas), ApexCharts (SVG), หรือ Apache ECharts (Canvas/SVG)