Adicionar um gráfico (tipo Excel) no Site (ou Blog)

Por | Atualizado em 2013-12-02
O Google Charts é um serviço gratuito que permite adicionar gráficos (tipo Excel), diretamente no seu Site ou blog. Os gráficos são carregados diretamente dos servidores Google, configurar apenas os dados iniciais que o gráfico deve apresentar.

Google Charts – Criar gráfico


Comece por aceder ao Google Charts. Clique no botão “Get Started”. No menu esquerdo, clique em “Chart Gallery” para escolher o gráfico que mais gosta (e se adequa as suas necessidades).

Na página que surge, você irá visualizar um exemplo do gráfico e as opções de configuração “Configuration Options”, que nos indicam o significado de cada parâmetro (essencial para editar o gráfico).

Exemplo prático:

Neste exxemplo selecionamos o gráfico “Pie Chart”. Para iniciar a edição, clicamos no link “Visualization Playground” – “Edit HTML”. Agora, vamos editar os parâmetros do gráfico, como é explicado nas instruções fornecidas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Trabalho', 11],
['Comer', 2],
['Ginásio', 2],
['Ver TV', 2],
['Dormir', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Como é o seu dia?"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 200px;"></div>
</body>
</html>

Resultado:


Por fim, basta copiar o código do gráfico e adicionar nas suas páginas.

Caso tenha dificuldades, poderá experimentar hospedar o arquivo usando o Google Drive.

Para mais detalhes, consulte o nosso tutorial: Hospedar código externo no Google Drive.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *