Google Chart Tools help display live data on your site. You may check out the rich gallery of interactive charts and data tools provided by google charts.
Using Google charts, you can create ready-to-use charts that you embed in your website. You usually load some google chart libraries, provide the data to be graphed, select options to customize your chart, and finally add the javascript for your chart.
Example Google Chart using Pie Chart :
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Google Chart Galleries
To help you visualize your data, Google provides a number of charts gallery to help visualize your data needs. Our Google Chart provides a variety of charts to help you visualize your data. You can use our charts to see how your data is distributed, how your data changes over time, or how your data compares to others.
Type of Google Charts :
Geo Chart, Scatter Chart, Column Chart, Histogram, Bar Chart
Combo Chart, Area Chart, Stepped Area Chart, Line Chart
Pie Chart, Bubble Chart, Donut Chart, Org Chart, Treemap
Table, Timeline, Gauge, Candlestick Chart
Geo Chart :
A geochart is rendered within browser using SVG or VML. It is not scrollable or dragable , a geochart identified with one of three ways :
The region mode colors whole regions, such as countries, provinces, or states.
The markers mode uses circles to designate regions that are scaled according to a value that you specify.
The text mode labels the regions with identifiers (e.g., "America" or "Europe").
Region Charts
Fills the entire regions countries with colors
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Indonesia', 500],
['Vanuatu',200],
['Australia',500],
['Saudi Arabia',600],
['China', 700],
['Brazil', 300],
['Canada', 500],
['France', 600],
['United States', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 600px; height: 500px;"></div>
</body>
</html>