Wat is Google Charts?
Google Maps is 'n Google API
Google Fonts is 'n Google API
Google Charts is 'n Google API
Leer hoe om Google Charts by jou webblad te voeg.
Voorbeeld
Google Sirkeldiagram
Begin met 'n eenvoudige basiese webblad.
Voeg 'n <div>-element by met die id "piechart":
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
</body>
<html>
Voeg 'n verwysing na die Chart API by google.com:
Voorbeeld
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
En voeg 'n JavaScript-funksie by:
Voorbeeld
<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>