Menggunakan Google Charts
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Google Chart memberikan cara sempurna untuk memvisualisasikan data di situs Anda.
Dari diagram garis sederhana hingga peta hierarki hierarki yang kompleks, galeri diagram menyediakan banyak jenis diagram yang siap digunakan.
Cara paling umum untuk menggunakan Google Chart adalah dengan JavaScript sederhana
yang Anda sematkan di halaman web. Anda dapat memuat beberapa library Google Chart, mencantumkan data yang akan dibuat diagramnya, memilih opsi untuk menyesuaikan diagram, dan terakhir membuat objek diagram dengan id yang dipilih.
Kemudian, di halaman web, Anda membuat <div> dengan id tersebut untuk menampilkan Google Chart.
Hanya itu yang Anda perlukan untuk memulai.
Diagram ditampilkan sebagai class JavaScript, dan Google Chart menyediakan
banyak jenis diagram untuk Anda gunakan.
Tampilan defaultnya biasanya adalah semua yang Anda perlukan, dan Anda dapat menyesuaikan diagram kapan saja agar sesuai dengan tampilan dan nuansa situs Anda. Diagram sangat interaktif dan menampilkan
peristiwa yang memungkinkan Anda menghubungkannya untuk membuat
dasbor yang kompleks atau pengalaman lain
yang terintegrasi dengan
halaman web Anda.
Diagram dirender menggunakan teknologi HTML5/SVG untuk menyediakan kompatibilitas lintas browser (termasuk VML untuk versi IE lama) dan portabilitas lintas platform ke iPhone, iPad, dan Android. Pengguna Anda tidak akan pernah menggunakan plugin atau software apa pun.
Jika memiliki browser web, mereka dapat melihat diagram Anda.
Semua jenis diagram diisi dengan data menggunakan
class DataTable,
sehingga memudahkan untuk beralih di antara jenis diagram saat Anda bereksperimen guna menemukan tampilan yang ideal.
DataTable menyediakan metode untuk mengurutkan, memodifikasi, dan memfilter data, dan dapat
diisi langsung dari halaman web Anda, database, atau penyedia data apa pun yang mendukung protokol
Sumber Data Alat Diagram.
(Protokol tersebut mencakup bahasa kueri yang mirip SQL dan diterapkan oleh Google Spreadsheet, Google Fusion Tables, dan penyedia data pihak ketiga seperti SalesForce.
Anda bahkan dapat menerapkan protokol di situs Anda sendiri dan menjadi penyedia data
untuk layanan lainnya.)
Siap membuat diagram pertama Anda? Buka panduan memulai.
Alat kami terus berkembang untuk memenuhi kebutuhan Anda dengan lebih baik;
kami mengandalkan masukan Anda untuk membantu kami memprioritaskan fitur mana yang akan disertakan.
Bergabunglah dengan
grup diskusi kami.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2024-07-10 UTC.
[null,null,["Terakhir diperbarui pada 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)."]]
