ในการเพิ่ม Google Charts ลงในหน้าเว็บของคุณ โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
