Como usar o Gráficos Google
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os Gráficos Google oferecem uma maneira perfeita de visualizar dados no seu site.
Desde gráficos de linhas simples até mapas complexos de árvores hierárquicas, a
galeria de gráficos
oferece vários tipos de gráficos prontos para uso.
A maneira mais comum de usar os Gráficos Google é com JavaScript simples
incorporado à página da Web. Carregue algumas bibliotecas do Google Chart, liste os dados a serem transformados em gráficos, selecione opções para personalizar o gráfico e crie um objeto de gráfico com um id escolhido.
Em seguida, na página da Web, crie um <div> com esse id para exibir o gráfico do Google.
Isso é tudo o que você precisa para começar.
Os gráficos são expostos como classes JavaScript, e o Google Charts oferece vários tipos de gráfico para você usar.
A aparência padrão geralmente é tudo o que você precisa, e você pode
personalizar um gráfico
para combinar com a aparência do seu site. Os gráficos são altamente interativos e expõem
eventos que permitem conectá-los para criar
painéis complexos ou outras experiências
integradas à sua
página da Web.
Os gráficos são renderizados usando a tecnologia HTML5/SVG para oferecer compatibilidade entre navegadores
(incluindo VML para versões mais antigas do IE) e portabilidade entre plataformas para iPhones,
iPads e Android. Seus usuários nunca precisarão mexer nos plug-ins ou em qualquer software.
Se o usuário tiver um navegador da Web, ele poderá ver seus gráficos.
Todos os tipos de gráficos são preenchidos com dados usando a classe DataTable. Isso facilita a alternância entre tipos de gráfico à medida que você faz experimentos para encontrar a aparência ideal.
Ela oferece métodos para classificar, modificar e filtrar dados e pode ser preenchida diretamente da sua página da Web, de um banco de dados ou de qualquer provedor de dados que ofereça suporte ao protocolo de fonte de ferramentas do gráfico.
Esse protocolo inclui uma linguagem de consulta semelhante a SQL e é implementado pelas Planilhas Google, Google Fusion Tables e provedores de dados de terceiros, como o SalesForce.
Você pode até implementar o protocolo no seu site e se tornar um provedor de dados
para outros serviços.
Pronto para criar seu primeiro gráfico? Acesse o
guia de início rápido.
Nossas ferramentas estão em constante evolução para atender melhor às suas necessidades.
Dependemos do seu feedback para nos ajudar a priorizar quais recursos incluir.
Participe do nosso
grupo de discussão.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2024-07-10 UTC.
[null,null,["Última atualização 2024-07-10 UTC."],[[["\u003cp\u003eGoogle Charts offers a wide variety of interactive and customizable chart types to visualize data on your website.\u003c/p\u003e\n"],["\u003cp\u003eEmbedding charts is straightforward using simple JavaScript that loads libraries, specifies data, customizes options, and creates a chart object within a div element.\u003c/p\u003e\n"],["\u003cp\u003eCharts are highly interactive, supporting events, dashboards, and integration with web pages for enhanced user experiences.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Charts uses HTML5/SVG technology for cross-browser and cross-platform compatibility, ensuring accessibility for all users.\u003c/p\u003e\n"],["\u003cp\u003eData population is handled by the DataTable class, enabling easy switching between chart types and providing methods for data manipulation and sourcing.\u003c/p\u003e\n"]]],[],null,["# Using Google Charts\n\nGoogle Charts provides a perfect way to visualize data on your website.\nFrom simple line charts to complex hierarchical tree maps, the\n[chart gallery](/chart/interactive/docs/gallery)\nprovides a large number of ready-to-use chart types.\n\nThe most common way to use Google Charts is with simple JavaScript\nthat you embed in your web page. You load some Google Chart libraries,\nlist the data to be charted, select options to customize your chart,\nand finally create a chart object with an id that you choose.\nThen, later in the web page, you create a \\\u003cdiv\\\u003e\nwith that id to display the Google Chart.\n\nThat's all you need to [get started](/chart/interactive/docs/quick_start).\n\nCharts are exposed as JavaScript classes, and Google Charts provides\n[many chart types](/chart/interactive/docs/gallery) for you to use.\nThe default appearance will usually be all you need, and you can always\n[customize a chart](/chart/interactive/docs/customizing_charts)\nto fit the look and feel of your website. Charts are highly interactive and expose\n[events](/chart/interactive/docs/events) that let you connect them to create complex\n[dashboards](/chart/interactive/docs/gallery/controls) or other experiences\n[integrated with your\nwebpage](/chart/interactive/docs/examples#full_html_page_example).\nCharts are rendered using HTML5/SVG technology to provide cross-browser compatibility\n(including VML for older IE versions) and cross platform portability to iPhones,\niPads, and Android. Your users will never have to mess with plugins or any software.\nIf they have a web browser, they can see your charts.\n\nAll chart types are populated with data using the\n[DataTable](/chart/interactive/docs/reference#DataTable) class,\nmaking it easy to switch between chart types as you experiment to find the ideal appearance.\nThe DataTable provides methods for sorting, modifying, and filtering data, and can be\npopulated directly from your web page, a database, or any data provider supporting the\n[Chart Tools Datasource](/chart/interactive/docs/queries) protocol.\n(That protocol includes a SQL-like query language and is implemented by Google Spreadsheets,\nGoogle Fusion Tables and third party data providers such as SalesForce.\nYou can even implement the protocol on your own website and become a data provider\nfor other services.)\n\n**Ready to create your first chart? Visit the\n[quickstart](/chart/interactive/docs/quick_start).**\n\nOur tools are constantly evolving to better address your needs;\nwe depend on your feedback to help us prioritize which features to include.\nJoin our [discussion group](http://groups.google.com/group/google-visualization-api)."]]
