Usar Gráficos de Google
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Google Charts proporciona una manera perfecta de visualizar datos en tu sitio web.
Desde gráficos de líneas simples hasta mapas jerárquicos complejos y complejos, la galería de gráficos proporciona una gran cantidad de tipos de gráficos listos para usar.
La forma más común de usar los gráficos de Google es mediante el simple uso de JavaScript que incorporas en la página web. Carga algunas bibliotecas de gráficos de Google, enumera los datos que se representarán, selecciona opciones para personalizar el gráfico y, por último, crea un objeto de gráfico con el id que elijas.
Más adelante, en la página web, crearás un elemento <div> con ese id para mostrar el gráfico de Google.
Eso es todo lo que necesitas para comenzar.
Los gráficos se exponen como clases de JavaScript y Google Charts proporciona muchos tipos de gráficos que puedes usar.
Por lo general, la apariencia predeterminada será todo lo que necesitas y siempre puedes personalizar un gráfico para que se adapte al aspecto de tu sitio web. Los gráficos son muy interactivos y exponen eventos que te permiten conectarlos para crear paneles o experiencias de otros tipos integrados en tu página web.
Los gráficos se renderizan con la tecnología de HTML5/SVG a fin de proporcionar compatibilidad en varios navegadores (incluida VML para las versiones anteriores de IE) y portabilidad entre plataformas en iPhones, iPads y Android. Los usuarios nunca tendrán que jugar con complementos ni software.
Si tienen un navegador web, pueden ver los gráficos.
Todos los tipos de gráficos se propagan con datos mediante la clase DataTable, lo que facilita el cambio entre los tipos de gráfico a medida que experimentas para encontrar la apariencia ideal.
La tabla de datos proporciona métodos para ordenar, modificar y filtrar datos, y se puede propagar directamente desde tu página web, una base de datos o cualquier proveedor de datos que admita el protocolo de fuente de datos de herramientas de gráficos.
(Ese protocolo incluye un lenguaje de consulta similar a SQL y lo implementan las hojas de cálculo de Google, las tablas de fusión de Google y los proveedores de datos de terceros, como SalesForce.
Incluso puedes implementar el protocolo en tu propio sitio web y convertirte en un proveedor de datos para otros servicios).
¿Estás listo para crear tu primer gráfico? Consulta la guía de inicio rápido.
Nuestras herramientas evolucionan constantemente para satisfacer mejor tus necesidades. Dependemos de tus comentarios, ya que nos ayudan a priorizar qué funciones incluir.
Únete a nuestro grupo de discusión.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2024-07-10 (UTC)
[null,null,["Última actualización: 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)."]]
