Esta página lista as diferentes maneiras de instanciar e desenhar um gráfico na página. Cada método tem vantagens e desvantagens, conforme listado abaixo.
Índice
- gráfico.draw()
- ChartWrapper (link em inglês)
- DrawChart().
- Mais informações
Chart.draw().
Este é o método básico abordado no exemplo Hello Chart nesta documentação. Veja abaixo as etapas básicas:
- Carregar o carregador de bibliotecas gstatic, a visualização do Google e as bibliotecas de gráficos
- Preparar os dados
- Preparar as opções do gráfico
- Instancie a classe de gráfico, transmitindo um identificador para o elemento de contêiner da página.
- Você pode se registrar para receber eventos de gráfico. Se você pretende chamar métodos no gráfico, detecte o evento "ready".
- Chame
chart.draw()
, transmitindo os dados e as opções.
Vantagens:
- Você tem controle total sobre cada etapa do processo.
- Você pode se registrar para detectar todos os eventos gerados pelo gráfico.
Desvantagens:
- Detalhado
- Você precisa carregar explicitamente todas as bibliotecas de gráficos necessárias.
- Se você enviar consultas, será necessário implementar manualmente o callback, verificar o sucesso, extrair o
DataTable
retornado e transmiti-lo ao gráfico.
Exemplo:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var data; var chart; // Load the Visualization API and the piechart 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 our data table. 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. chart = new google.visualization.PieChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); } function selectHandler() { var selectedItem = chart.getSelection()[0]; var value = data.getValue(selectedItem.row, 0); alert('The user selected ' + value); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
Wrapper do Chart
ChartWrapper
é uma classe de conveniência que processa o carregamento de todas as bibliotecas de gráficos apropriadas para você e também simplifica o envio de consultas a fontes de dados de ferramentas de gráfico.
Vantagens:
- Muito menos código
- Carrega todas as bibliotecas de gráficos necessárias para você
- Facilita a consulta a fontes de dados criando o objeto
Query
e processando o callback para você. - Transmita o ID do elemento do contêiner, e ele chamará o elemento getElementByID para você.
- Os dados podem ser enviados em vários formatos: como uma matriz de valores, como uma string literal JSON ou como um gerenciador
DataTable
Desvantagens:
- No momento, o
ChartWrapper
propaga apenas os eventos select, ready, and error. Para acessar outros eventos, use um identificador para o gráfico encapsulado e inscreva-se nos eventos. Consulte a documentação deChartWrapper
para ver exemplos.
Exemplos:
Veja o exemplo de um gráfico de colunas com dados construídos localmente especificados como uma matriz. Não é possível especificar rótulos de gráfico ou valores de data e hora usando a sintaxe da matriz, mas é possível criar manualmente um objeto DataTable
com esses valores e transmiti-los para a propriedade dataTable
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], ['', 700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw(); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
Veja o exemplo de um gráfico de linhas que recebe os dados consultando uma planilha do Google. O código não precisa processar o callback.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() // No query callback handler needed! } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
Em conjunto com o carregamento automático, o código pode ser muito compacto:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
Como usar o Editor de gráficos com o ChartWrapper
Você pode usar a caixa de diálogo "Editor de gráficos" integrada ao Planilhas
Google para criar um gráfico e solicitar a string ChartWrapper
serializada que o representa. Em seguida, copie e cole essa string e use-a conforme
descrito acima em ChartWrapper
.
É possível incorporar um editor de gráfico à sua própria página e expor métodos para que os usuários se conectem a outras fontes de dados e retornem a string ChartWrapper
. Consulte a documentação de referência do ChartEditor
para mais informações.
DrawChart().
DrawChart
é um método estático global que encapsula um ChartWrapper
.
Vantagens:
- O mesmo que
ChartWrapper
, mas um pouco mais curto para usar.
Desvantagens:
- Não retorna um identificador para o wrapper, portanto, você não pode processar nenhum evento.
<DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization_div" style="width: 600px; height: 400px;"></div> </body> </html>