Menggunakan Charts Google
Charts Google menyediakan cara yang sempurna untuk memvisualisasikan data di website Anda. Dari grafik garis sederhana untuk peta pohon hirarkis yang kompleks, galeri grafik memberikan sejumlah besar jenis bagan yang siap digunakan.
Cara yang paling umum untuk menggunakan Google Charts adalah dengan JavaScript sederhana yang Anda masukkan dalam halaman web Anda. Anda memuat beberapa perpustakaan Bagan Google, daftar data yang akan memetakan, pilih opsi untuk menyesuaikan grafik Anda, dan akhirnya membuat objek grafik denganidyang Anda pilih. Kemudian, kemudian di halaman web, Anda membuat<Div> dengan itu id untuk menampilkan Chart Google. Itu semua yang Anda butuhkan untuk memulai.
Grafik yang terkena sebagai kelas JavaScript, dan Google Chart menyediakan banyak jenis grafik untuk Anda gunakan. Tampilan default biasanya akan semua yang Anda butuhkan, dan Anda dapat selalu menyesuaikan grafik agar sesuai dengan tampilan dan nuansa situs Anda. Grafik yang sangat interaktif dan mengekspos peristiwa yang memungkinkan Anda menghubungkan mereka untuk membuat kompleks dashboard atau pengalaman lainnya terintegrasi dengan halaman web Anda. Grafik tersebut diberikan menggunakan teknologi HTML5 / SVG untuk menyediakan kompatibilitas cross-browser (termasuk VML untuk versi IE yang lebih tua) dan lintas platform portabilitas untuk iPhone, iPads dan Android. pengguna Anda tidak akan pernah main-main dengan plugin atau perangkat lunak apapun. Jika mereka memiliki web browser, mereka dapat melihat grafik Anda.
Semua jenis grafik akan diisi dengan data menggunakan Tabel data kelas, sehingga mudah untuk beralih di antara jenis grafik yang Anda bereksperimen untuk menemukan penampilan ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data, dan dapat diisi langsung dari halaman web Anda, database, atau penyedia data yang mendukung Chart Tools DataSource protokol. (Protokol Itu termasuk bahasa query SQL-seperti dan diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan ketiga penyedia data pihak seperti Salesforce. Anda bahkan dapat menerapkan protokol di situs Anda sendiri dan menjadi penyedia data untuk layanan lainnya.)
Cara Menggambar Grafik menggunakan HTML 5
chart.draw()
Ini adalah metode dasar, berikut adalah langkah-langkah dasarnya :
1. Memuat the gstatic library loader, Google Visualization, dan chart libraries
2. Siapkan data anda
3. Siapkan opsi grafik
4. Menginstansiasi class grafik.
5. Secara opsional meregistrasi untuk menerima setiap events grafik.
6. Panggil chart.draw().
Keuntungan:
• Anda memiliki kontrol penuh atas setiap langkah dari proses.
• Anda dapat meregistrasi untuk memperhatikan semua event yang dilontarkan oleh grafik.
Kerugian:
• Banyak kata.
• Anda harus secara eksplisit memuat semua pustaka grafik yang diperlukan.
• Jika anda mengirim kueri, anda harus secara manual mengimplementasikan untuk callback, mengecek keberhasilan, mengekstrak value DataTable yang dikembalikan, dan menyampaikannya ke chart.
Contoh:
ChartWrapper
ChartWrapper merupakan class yang memudahkan untuk menangani pengambilan seluruh grafik library yang sesuai untuk anda dan juga menyederhanakan pengiriman kueri alat grafik Datasources.
Keuntungan:
1. Code lebih sedikit.
2. Memuat semua pustaka grafik yang diperlukan untuk anda.
3. Membuat kueri Datasources jauh lebih mudah dengan membuat objek.
4. Query dan penangan callback untuk anda
5. Menyampaikan wadah element ID, dan akan memanggil getElementByID untuk anda.
6. Data dapat disampaikan dalam berbagai format: sebagai sebuah array nilai, sebagai sebuah literal string JSON, atau sebagai DataTable
Kerugian:
• ChartWrapper saat ini hanya mengembangkan event select, ready, and error. Untuk mendapatkan event yang lain.
Contoh:
DrawChart()
DrawChart merupakan metode statis global yang membungkus ChartWrapper.
Keuntungan:
• Sama seperti ChartWrapper, tapi lebih sedikit untuk digunakan.
Kerugian:
• Tidak mengembalikkan handle untuk pembungkus (DrawChart), sehingga anda tidak bisa menangani events.
Contoh:
Tidak ada komentar:
Posting Komentar