Memulai Diagram

Halaman ini menjelaskan dasar-dasar penggunaan Chart API untuk membuat diagram.

Kebijakan Penggunaan Diagram Google

Tidak ada batasan jumlah panggilan per hari yang dapat Anda lakukan ke Google Chart API. Namun, kami berhak memblokir penggunaan apa pun yang kami anggap sebagai penyalahgunaan.

Ringkasan

Melihat Diagram dalam Dokumentasi Ini

Semua gambar diagram dalam dokumentasi ini dibuat langsung, menggunakan Chart API. Untuk melihat URL gambar apa pun, lakukan hal berikut:

• Jika Anda menggunakan Firefox, klik kanan dan pilih "{i>View Image<i}" atau "{i>Properties<i}".
• Jika Anda menggunakan Internet Explorer, klik kanan dan pilih "{i>Properties<i}".

Agar URL lebih mudah dibaca, dokumen ini sering kali menampilkannya dalam beberapa baris. Saat Anda menggunakan Google Chart API, Anda harus menyediakan URL pada satu baris.

Google Chart API menampilkan gambar diagram sebagai respons terhadap permintaan URL GET atau POST. API dapat membuat berbagai jenis diagram, dari diagram lingkaran atau garis hingga kode QR dan formula. Semua informasi tentang diagram yang Anda inginkan, seperti data diagram, ukuran, warna, dan label, merupakan bagian dari URL. (Untuk permintaan POST, cara ini sedikit berbeda, tetapi jangan khawatir.)

Untuk membuat diagram yang sesederhana mungkin, semua URL yang perlu Anda tentukan adalah jenis, data, dan ukuran diagram. Anda dapat mengetik URL ini langsung di browser, atau mengarahkannya dengan tag <img> di halaman web. Misalnya, ikuti tautan berikut untuk bagan pai:

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

Link sebelumnya adalah contoh URL Chart API dasar. Semua URL Diagram memiliki format berikut:

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

Semua URL diawali dengan https://chart.googleapis.com/chart?, diikuti oleh parameter yang menentukan tampilan dan data diagram. Parameter adalah pasangan name=value, yang dipisahkan dengan karakter ampersand (&), dan parameter dapat berada dalam urutan apa pun, setelah ?. Semua diagram memerlukan setidaknya parameter berikut: cht (jenis diagram), chd (data), dan chs (ukuran diagram). Namun, ada banyak parameter lainnya untuk opsi tambahan, dan Anda dapat menentukan parameter tambahan sebanyak yang didukung oleh diagram.

Mari kita periksa URL di atas secara lebih mendetail:

URL

Komponen

https://chart.googleapis.com/chart?   cht=p3&   chs=250x100&   chd=t:60,40&   chl=Hello|World

https://chart.googleapis.com/chart? Ini adalah URL dasar untuk semua permintaan diagram. cht=p3 Jenis diagram: di sini, diagram lingkaran 3D. chs=250x100 Ukuran diagram (lebar x tinggi), dalam piksel. Lihat nilai maksimum di sini. chd=t:60,40 Data diagram. Data ini menggunakan format teks sederhana, tetapi ada format lainnya. chl=Hello|World Label irisan. & Parameter dipisahkan dengan ampersand. Catatan: Saat menyematkan URL di HTML, misalnya sebagai atribut src untuk tag <img>, Anda harus mengganti & di antara parameter dengan karakter &amp;. Hal ini termasuk saat Anda membuat HTML halaman menggunakan PHP atau bahasa lainnya. Namun, saat mengetik URL di browser, atau saat memanggil URL dalam kode, misalnya saat mengambil URL dalam PHP atau Perl, Anda harus menggunakan tanda &.

Salin dan tempel URL ini di browser Anda, lalu coba buat beberapa perubahan: tambahkan nilai tambahan ke data (jangan lupa tambahkan koma sebelum setiap nilai data baru). Tambahkan label baru (beri tanda | sebelum setiap nilai baru). Perbesar diagram.

Kembali ke atas

Cara Membuat Diagram

Berikut cara membuat diagram gambar:

1. Tentukan jenis diagram. Lihat galeri untuk melihat daftar diagram; jenis diagram ditentukan oleh parameter cht. Buat sketsa semua komponen yang Anda inginkan untuk diagram Anda (sumbu, label, latar belakang, dan sebagainya), dan jika perlu, cari tahu dimensi piksel untuk berbagai komponen (total ukuran diagram, ukuran legenda, dan sebagainya). Anda harus membaca dokumentasi dengan cermat untuk jenis diagram Anda terlebih dahulu, atau Anda mungkin akan mengalami pengalaman yang menjengkelkan.
2. Buat dan format data diagram Anda. Data ditentukan menggunakan parameter chd. Anda harus memutuskan format yang akan digunakan untuk data:
   • Pilih format data. Anda dapat menggunakan format teks sederhana untuk data diagram, yang mudah dibaca, tetapi membutuhkan lebih banyak ruang untuk dikirim, atau menggunakan salah satu jenis encoding, yang lebih kecil untuk dikirim, tetapi membatasi rentang nilai yang dapat Anda kirim.
   • Tentukan apakah data Anda harus diskalakan agar sesuai dengan diagram Anda. Format yang berbeda mendukung rentang nilai yang berbeda. Anda mungkin ingin menskalakan data sehingga mencakup seluruh rentang nilai yang diperbolehkan oleh format Anda, agar perbedaan terlihat lebih jelas. Anda dapat melakukannya dengan menskalakan data agar sesuai dengan format data yang digunakan, atau menggunakan format teks dengan penskalaan kustom.
   • Mengenkode data, jika perlu. Jika Anda telah memilih format yang dienkode, kami menawarkan beberapa JavaScript untuk membantu jenis encoding lainnya.
3. Tentukan ukuran diagram. Ukuran diagram ditentukan menggunakan parameter chs. Lihat dokumentasi untuk format dan nilai maksimum.
4. Tambahkan parameter tambahan. Setiap dokumentasi diagram mencantumkan parameter opsional yang tersedia. Opsi umum mencakup label, judul, dan warna. Perhatikan bahwa semua teks label atau judul harus berenkode UTF-8. Perhatikan bahwa ada banyak parameter yang memungkinkan Anda memasukkan beberapa nilai. Misalnya, parameter chm memungkinkan Anda menempatkan bentuk pada satu titik data pada diagram. Anda dapat menempatkan bentuk di beberapa titik data menggunakan parameter chm, tetapi untuk melakukannya, Anda tidak harus menetapkan parameter chm beberapa kali di URL (misalnya, SALAH: chm=square&chm=circle&chm=triangle). Sebaliknya, parameter yang mengambil beberapa nilai akan menggunakan pembatas, seperti tanda koma atau vertikal, di antara beberapa nilai dalam parameter yang sama. Untuk chm, ini adalah batang, sehingga Anda akan mendapatkan hasil seperti ini: RIGHT: chm=square|circle|triangle. Lihat detail setiap parameter untuk mempelajari cara menentukan beberapa parameter.
5. Buat string URL. URL-nya diawali dengan https://chart.googleapis.com/chart? dan diikuti oleh semua parameter wajib (cht, chd, chs) dan parameter opsional. Catatan: Jika menggunakan URL dalam tag <img>, Anda harus mengubah semua karakter & menjadi & di link Anda. Contoh: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />.
6. Gunakan GET atau POST untuk mendapatkan gambar. GET, dapat terjadi saat Anda mengetikkan URL secara langsung ke browser, atau menggunakannya dalam tag <img>. Namun, URL dibatasi hingga 2K, jadi jika Anda memiliki lebih banyak data dari itu, atau ingin darah, sebaiknya pertimbangkan untuk menggunakan POST, seperti yang dijelaskan di sini.
7. Buat wilayah yang dapat diklik. Anda dapat memilih untuk membuat peta gambar untuk diagram yang memungkinkan Anda menambahkan hyperlink atau mengklik elemen ke elemen diagram tertentu. Lihat Membuat Peta Gambar Diagram untuk mengetahui detailnya.

Kembali ke atas

Glosarium Istilah Diagram

Berikut adalah beberapa istilah penting yang kami gunakan dalam dokumentasi ini:

Series

Set data terkait dalam diagram. Faktor yang membentuk deret bergantung pada jenis diagram: di diagram garis, deret adalah satu baris; di diagram lingkaran, setiap entri merupakan sebuah irisan, dan semua irisan yang ada adalah sebuah deret. Dalam diagram batang, deret adalah semua batang dari set data yang sama; deret yang berbeda dikelompokkan secara berdampingan atau ditumpuk di atas satu sama lain, bergantung pada jenis diagram batang. Diagram berikut menunjukkan diagram batang yang dikelompokkan dengan dua deret, satu dalam biru tua, satu dalam warna biru muda:

Label sumbu

Nilai angka atau teks di sepanjang sumbu. Pada diagram sebelumnya, label itu adalah label "Jan", "Feb", "Mar", "0", "50", "100".

Komponen Diagram

Berikut ini beberapa komponen diagram:

Area diagram

Area yang menampilkan gambar seri. Lihat sidebar "Komponen Diagram" untuk detail selengkapnya.

Keterangan

Area kecil pada diagram yang menjelaskan seri. Pada diagram di atas, ini adalah bagian yang mencantumkan "Kucing" dan "".

Parameter

Pasangan kunci=value yang digunakan di URL. Misalnya: chxt=x, dengan chxt sebagai nama parameter dan x sebagai nilai parameter.

GET dan POST

Dua metode pengiriman URL Diagram. GET biasanya dilakukan dengan mengetik URL di browser, atau dengan menjadikannya sumber tag <img>. Permintaan POST lebih kompleks untuk dibuat, tetapi dapat menyertakan lebih banyak data. Alasan utama untuk menggunakan POST dibandingkan GET adalah karena permintaan POST dapat mengambil lebih banyak data daripada permintaan GET (16 ribu karakter vs 2 ribu karakter). POST dibahas di sini.

Karakter pipa

Karakter |, sering digunakan sebagai pembatas nilai parameter—yaitu karakter untuk memecah beberapa nilai. Koma dan ampersand (&) juga digunakan sebagai pembatas di URL Diagram.

Diagram gabungan

Diagram yang merupakan kombinasi dari dua jenis diagram yang berbeda: misalnya, diagram batang dengan garis, atau diagram garis dengan penanda lilin. Lihat Diagram Gabungan.

Kembali ke atas

Pengoptimalan

Setelah Anda mempelajari dasar-dasar pembuatan diagram, berikut beberapa pengoptimalan yang dapat Anda gunakan.

Menggunakan POST

URL dibatasi hingga 2 ribu, jadi jika diagram Anda memiliki lebih banyak data dari itu, Anda harus menggunakan POST, bukan GET, seperti yang dijelaskan di sini. GET adalah saat Anda mengetik URL diagram ke kolom URL browser, atau menggunakannya sebagai sumber elemen <img> di halaman web. POST memerlukan pemrograman tambahan dalam bahasa lain, seperti PHP atau PERL.

Membuat Diagram di JavaScript

Anda dapat menggunakan Google Visualization API untuk membuat diagram gambar bagi Anda. Google Visualization API adalah API berbasis JavaScript yang memberikan alat kepada Anda untuk membuat, memfilter, dan memanipulasi data, atau untuk membuat kueri data di Google Spreadsheet atau situs lain. Anda dapat menggunakan Visualization API untuk membuat data, lalu memanggil Image Charts API untuk merender diagram di halaman. Untuk informasi selengkapnya, lihat dokumentasi Diagram Gambar Generik, atau lihat di Galeri visualisasi untuk setiap diagram Google yang ditandai (Gambar).