Co je Google Charts?


HTML

Google Maps je Google API

Google Fonts je Google API

Google Charts je Google API


Přečtěte si, jak přidat Google Charts na svou webovou stránku.


Příklad


Koláčový graf Google

Začněte jednoduchou základní webovou stránkou.

Přidejte prvek <div> s id "piechart":

Příklad

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

</body>
<html>


Přidejte odkaz na Chart API na google.com:

Příklad

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

A přidejte funkci JavaScript:

Příklad

<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>