Apa itu Google Chart?

❮ Sebelumnya Berikutnya ❯

HTML

Google Maps adalah Google API

Google Font adalah Google API

Google Charts adalah Google API

Pelajari cara menambahkan Google Charts ke halaman web Anda.

Contoh

Bagan Pai Google

Mulailah dengan halaman web dasar yang sederhana.

Tambahkan elemen <div> dengan id "piechart":

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

</body>
<html>

Tambahkan referensi ke Chart API di google.com:

Contoh

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Dan tambahkan fungsi JavaScript:

Contoh

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Friends', 2],
['Eat', 2],
['TV', 2],
['Gym', 2],
['Sleep', 8]
]);

// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};

// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>

❮ Sebelumnya Berikutnya ❯