Gráfico do Google
De gráficos de linhas simples a mapas de árvore hierárquicos complexos, a galeria do Google Chart oferece um grande número de tipos de gráficos prontos para uso:
- Gráfico de dispersão
- Gráfico de linha
- Gráfico de barras/colunas
- Gráfico de área
- Gráfico de pizza
- Gráfico de rosca
- Quadro organizacional
- Mapa / Geográfico
Como usar o Google Chart?
Para usar o Google Chart em sua página da web, adicione um link ao carregador de gráficos:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
O Google Chart é fácil de usar.
Basta adicionar um elemento <div> para exibir o gráfico:
<div id="myChart" style="max-width:700px; height:400px"></div>
O elemento <div> deve ter um id exclusivo.
Em seguida, carregue a API do Google Graph:
- Carregar a API de visualização e o pacote corechart
- Definir uma função de retorno de chamada para chamar quando a API for carregada
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
Isso é tudo!
Gráfico de linha
Código fonte
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Gráficos de dispersão
Para espalhar os mesmos dados, altere google.visualization para LineChart:
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
Gráficos de barra
Código fonte
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Gráfico de setores
Para converter um gráfico de barras em um gráfico de pizza , basta substituir:
google.visualization. BarChart
com:
google.visualization. Gráfico de pizza
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
torta 3D
Para exibir o Pie em 3D, basta adicionar is3D: true às opções:
var options = {
title: 'World Wide Wine Production',
is3D: true
};