Senin, 06 Februari 2017

BAB 3 PENERAPAN CHART DALAM PERANGKAT LUNAK


3.1. Google Chart

3.1.1. Apa itu Google Chart?
Google Chart umumnya dapat dijalankan dengan menggunakan JavaScript sederhana yang dimasukkan dalam halaman web. User dapat memuat beberapa perpustakaan Google Chart, daftar data yang akan digrafikkan, pilih opsi untuk menyesuaikan grafik pengguna, dan akhirnya membuat objek grafik dengan id yang Anda pilih. Kemudian, di halaman web, Anda membuat <div> dengan id itu untuk menampilkan Google Chart tersebut.

Grafik yang tampil sebagai kelas JavaScript, Google Charts menyediakan berbagai jenis grafik untuk Anda gunakan. Tampilan default biasanya akan menjadi semua yang Anda butuhkan, dan Anda dapat menyesuaikan grafik agar sesuai dengan tampilan dan nuansa situs Anda. Grafik yang sangat interaktif dan mengekspos peristiwa-peristiwa yang memungkinkan Anda menghubungkan mereka untuk membuat dashboard kompleks atau pengalaman lain yang terintegrasi dengan halaman web Anda. Grafik tersebut diterjemahkan 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 kelas DataTable, sehingga mudah untuk beralih di antara jenis grafik yang Anda telah eksperimen-kan untuk menemukan penampilan ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan menyaring data, dan dapat diisi langsung dari halaman web Anda, database, atau penyedia data pendukung  protokol Chart Tools DataSource. (Protokol itu termasuk bahasa query seperti SQL dan diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan pihak ketiga penyedia data seperti Salesforce.


3.1.2. Sejarah
Awalnya, Google menawarkan grafik sebagai gambar PNG dari sebuah grafik dari data dan parameter format di dalam sebuah permintaan HTTP. Tapi sejak April 2012 Google sekarang menggunakan SVG (VML untuk browser yang lebih tua) untuk menggambar grafik. Gambar Google Charts API sudah ditinggalkan (tapi masih bekerja). Awalnya itu adalah perangkat internal untuk mendukung embedding cepat dari grafik dalam aplikasi Google sendiri (seperti Google Finance misalnya). Google memutuskan akan menjadi alat yang berguna untuk membuat tersedia untuk pengembang web. Secara resmi diluncurkan pada tanggal 6 Desember 2007.

Saat ini, garis, bar, pie dan grafik radar, sebaik diagram Venn, plot pencar, sparklines, peta, google-o-meter, dan kode QR yang didukung.

3.1.3. Implementasi Open Source
Alih-alih menciptakan permintaan URL secara manual, ada banyak open source perpustakaan eksternal yang tersedia untuk hampir semua bahasa pemrograman.

gambar 3.0

Selain perpustakaan, Eastwood Charts adalah Open Source versi kompatibel dari Google Chart. Ia menggunakan pengkodean yang cocok dengan Google Chart API dan menambahkan fitur sendiri seperti trendline overlay, efek 3D untuk bar chart, dll. Eastwood Charts menginstall di server Java Servlet-nya sendiri dan tidak akan mengirim data mereka ke Google untuk diproses.


3.1.4. Memuat Pustaka
Halaman ini menunjukkan bagaimana untuk memuat perpustakaan Google Chart.
  • Pemuatan perpustakaan dasar
Dengan beberapa pengecualian, semua halaman web dengan Google Chart harus mencakup baris berikut di <head> dari halaman web

gambar 3.1
Baris pertama dari contoh ini memuat loader itu sendiri. Anda hanya dapat memuat loader satu kali tidak peduli berapa banyak grafik yang Anda rencanakan untuk digambar. Setelah loading loader, Anda dapat memanggil fungsi google.charts.load satu kali atau lebih untuk memuat paket untuk jenis grafik tertentu.

Argumen pertama yang google.charts.load adalah nama versi atau nomor, sebagai string. Jika Anda menentukan 'sekarang', ini menyebabkan rilis resmi terbaru dari Google Chart untuk dimuat. Jika Anda ingin mencoba kandidat untuk rilis berikutnya, menggunakan 'mendatang' sebagai gantinya. Secara umum akan ada sedikit perbedaan antara keduanya, dan mereka akan benar-benar identik kecuali ketika rilis baru sedang berlangsung. Alasan umum untuk menggunakan mendatang adalah bahwa Anda ingin menguji jenis grafik baru atau fitur bahwa Google akan rilis di bulan depan atau dua bulan kedepan. (Kami mengumumkan rilis mendatang pada forum kami dan menyarankan Anda untuk mencoba mereka ketika diumumkan, untuk memastikan bahwa setiap perubahan grafik Anda dapat diterima.)

Contoh di atas mengasumsikan Anda ingin menampilkan sebuah corechart (bar, kolom, garis, bidang, daerah melangkah, bubble, pie, donat, combo, candlestick, histogram, menyebar). Jika Anda menginginkan tipe grafik tambahan atau berbeda, pengganti atau menambahkan sesuai nama paket untuk corechart diatas (misalnya, {paket: ['corechart', 'meja', 'Sankey']}. Anda dapat menemukan nama paket di bagian ' loading ' dari halaman dokumentasi untuk setiap grafik.

Contoh ini juga mengasumsikan bahwa Anda memiliki fungsi JavaScript bernama drawChart yang didefinisikan di suatu tempat di halaman web Anda. Anda dapat memberi nama fungsi tersebut dengan apa pun yang Anda suka, tapi pastikan nama itu unik secara global dan bahwa itu didefinisikan sebelum Anda mereferensikannya didalam panggilan Anda kepada google.charts.setOnLoadCallback.

Berikut ini adalah contoh lengkap dari menggambar sebuah diagram lingkaran menggunakan teknik memuat dasar:

gambar 3.2.

  • Memuat Detail
Pertama, Anda harus memuat loader itu sendiri, yang dilakukan dalam tag script yang terpisah dengan src = "https://www.gstatic.com/charts/loader.js". Tag ini dapat berada di kepala atau tubuh dokumen, atau dapat dimasukkan secara dinamis ke dalam dokumen sementara saat itu sedang dimuat atau setelah loading selesai.

<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>

Setelah loader tersebut dimuat, Anda bebas untuk memanggil google.charts.load. Di mana saat Anda memanggilnya bisa terdapat di tag script di kepala atau tubuh dokumen, dan Anda bisa memanggilnya baik saat dokumen masih loading atau saat setelah selesai loading.

Pada versi 45, Anda dapat menghubungi google.charts.load lebih dari satu kali untuk memuat paket tambahan, tetapi jika Anda melakukannya, Anda harus menyediakan nomor versi yang sama dan bahasa pengaturan setiap kali.
  • Memuat Versi Nama atau Nomor
Argumen pertama dari panggilan google.charts.load Anda adalah nama versi atau nomor. Hanya ada dua nama versi khusus pada saat ini, dan beberapa versi beku.

Jaman Sekarang
Ini adalah untuk rilis resmi yang terbaru yang berubah setiap kali kita mendorong keluar sebuah rilis baru. Versi ini secara teori sudah teruji dengan baik dan bebas bug, tetapi Anda mungkin ingin menspesifikasikan sebuah versi beku tertentu, sebagai gantinya saat setelah Anda puas itu bekerja.

Mendatang
Ini adalah untuk rilis berikutnya, sementara itu masih sedang diuji dan sebelum itu menjadi rilis baru yang resmi. Silahkan uji versi ini secara teratur sehingga Anda tahu sesegera mungkin apakah ada masalah yang harus ditangani sebelum versi ini menjadi rilis resmi.
Ketika kami merilis versi baru dari Google Chart, beberapa perubahan besar, seperti jenis grafik yang benar-benar baru. Perubahan kecil lainnya adalah, seperti perangkat tambahan untuk penampilan atau perilaku dari grafik yang ada.

Banyak pembuat Google Chart menyempurnakan tampilan dan nuansa dari grafik mereka sampai menjadi apa yang benar-benar mereka inginkan. Beberapa pencipta mungkin merasa lebih nyaman apabila mengetahui bahwa grafik mereka tidak akan pernah berubah, terlepas dari perbaikan apa yang kita buat di masa depan. Bagi para pengguna, kami mendukung Google Chart beku.

  • Pengaturan Muatan
Parameter kedua dalam panggilan Anda dari google.charts.load adalah obyek untuk menentukan pengaturan.
Properti berikut didukung untuk pengaturan.

Paket
Sebuah Array dari nol atau lebih paket. Setiap paket yang dimuat akan memiliki kode yang diperlukan untuk mendukung satu set fungsi, biasanya suatu jenis dari grafik. Suatu Paket atau banyak paket yang Anda perlu muatkan tercantum dalam dokumentasi untuk setiap jenis grafik. Anda dapat menghindari menentukan paket apapun jika Anda menggunakan ChartWrapper untuk secara otomatis memuat apa yang akan diperlukan.

Bahasa
Kode untuk bahasa atau lokal yang harus menyesuaikan teks yang mungkin menjadi bagian dari grafik. Lihat Locales untuk lebih jelasnya.

Pemanggilan kembali
Sebuah fungsi yang akan dipanggil setelah paket telah dimuat. Atau, Anda dapat menentukan fungsi ini dengan memanggil google.charts.setOnLoadCallback seperti yang ditunjukkan pada contoh di atas. Lihat Callback untuk lebih jelasnya.

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

mapsApiKey
Untuk versi 45 dan selanjutnya, pengaturan ini memungkinkan Anda menentukan kunci yang dapat Anda gunakan dengan Geochart dan Map Chart. Anda mungkin ingin melakukan hal ini daripada menggunakan perilaku default yang dapat mengakibatkan layanan throttling sesekali untuk pengguna Anda. Pelajari cara mengatur kunci Anda sendiri untuk menggunakan layanan 'Google Maps API JavaScript' di sini: Dapatkan Key / Authentication. Kode Anda akan terlihat seperti ini:

var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });
  • Locales
Locales digunakan untuk menyesuaikan teks untuk suatu negara atau bahasa, mempengaruhi format dari nilai-nilai seperti mata uang, tanggal, dan nomor.

Secara default, Google Chart dimuat dengan "en" lokal. Anda dapat mengganti default ini dengan secara eksplisit menentukan sebuah locale dalam pengaturan memuat.

Untuk memuat suatu grafik yang sudah diformat untuk locale tertentu, gunakan pengaturan bahasa seperti:

// Memuat Google Charts untuk locale Jepang.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});
  • Callback
Sebelum Anda dapat menggunakan salah satu dari paket yang telah dimuat oleh google.charts.load Anda harus menunggu untuk menyelesaikan loading. Hal ini tidak cukup hanya untuk menunggu dokumen untuk selesai loading. Karena dapat mengambil beberapa waktu sebelum pemuatan ini selesai, Anda harus mendaftar sebuah fungsi callback. Ada dua cara supaya ini bisa dilakukan. Entah menentukan pengaturan panggilan balik dalam panggilan google.charts.load Anda atau hubungi setOnLoadCallback lewat fungsi sebagai argumen.

Perhatikan bahwa Anda perlu memberikan definisi fungsi, daripada memanggil fungsi. Fungsi yang Anda berikan dapat berupa fungsi bernama atau fungsi anonim. Ketika paket telah selesai loading, fungsi callback ini akan dipanggil tanpa argumen. Loader juga akan menunggu dokumen untuk menyelesaikan loading sebelum memanggil callback.

Jika Anda ingin menggambar lebih dari satu grafik, Anda juga dapat mendaftarkan lebih dari satu fungsi callback, atau Anda dapat menggabungkan mereka ke dalam satu fungsi. Pelajari lebih lanjut tentang cara Menggambar Beberapa Grafik di Satu Halaman.

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // atau
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });


3.1.5. Format Mode Teks

Label yang dimasukkan di dalam kolom pertama, ditambah satu kolom opsional:
  • Label teks [String, Diperlukan] Sebuah alamat string tertentu (misalnya, "1600 Pennsylvania Ave").
  • Ukuran teks [Nomor, Opsional] Kolom kedua adalah sebuah kolom numerik opsional yang digunakan untuk menetapkan ukuran label. Jika kolom ini tidak hadir, semua label akan menjadi ukuran yang sama.
3.1.6. Pilihan Konfigurasi

  1. BackgroundColor
Warna latar belakang untuk wilayah utama dari grafik. Dapat berupa string warna HTML sederhana, misalnya: ’merah’ atau ’#00CC00’, atau benda dengan sifat sebagai berikut.
Tipe: string atau objek
Default: putih.
  1. BackgroundColor.fill
Grafik mengisi warna, sebagai string warna HTML.
Tipe: string
Default: putih.
  1. BackgroundColor.stroke
Warna perbatasan grafik, sebagai string warna HTML.
Tipe: string
Default: ’#666’.
  1. BackgroundColor.strokeWidth
Lebar garis batas, dalam piksel.
Tipe: nomor
Default: 0
  1. ColorAxis
Sebuah objek yang menentukan sebuah pemetaan antara nilai kolom warna dan warna atau sebuah skala gradien. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini: {minValue: 0, colors: [’#FF0000’, ’#00FF00’]}
Tipe: objek
Default: null
  1. ColorAxis.minValue
Jika hadir, menentukan sebuah nilai minimum untuk data warna grafik. Nilai data warna dari nilai ini dan lebih rendah akan diberikan sebagai warna pertama di dalam kisaran colorAxis.colors.
Tipe: nomor
Default: Nilai minimum dari kolom warna di data grafik
  1. ColorAxis.maxValue
Jika hadir, menentukan sebuah nilai minimum untuk data warna grafik. Nilai data warna dari nilai ini dan lebih tinggi akan diberikan sebagai warna terakhir di dalam kisaran colorAxis.colors
Tipe: nomor
Default: Nilai maksimum dari kolom warna di data grafik.
  1. ColorAxis.values
Jika hadir, mengontrol bagaimana nilai-nilai yang berhubungan dengan warna. Setiap nilai dikaitkan dengan warna yang sesuai di dalam array colorAxis.colors. Nilai-nilai ini berlaku untuk data warna grafik. Pewarnaan dilakukan sesuai dengan gradien dari nilai yang ditetapkan di sini. Tidak
menentukan sebuah nilai untuk opsi ini setara dengan menentukan [minValue, maxValue].
Tipe: array dari nomor-nomor
Default: null.
  1. ColorAxis.colors
Warna untuk ditetapkan kepada nilai-nilai di dalam visualisasi. Sebuah Array dari string, dimana setiap elemen adalah string warna HTML, misalnya: colorAxis: {warna: [’merah’, ’#004411’]}.
Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai-nilai Anda, ditambah nilai perantara dihitung, dengan warna pertama sebagai nilai terkecil, dan warna t erakhir sebagai yang tertinggi.
Tipe: array dari string warna
Default: null.
  1. DatalessRegionColor
Warna untuk ditetapkan ke daerah tanpa data yang terkait
Tipe: string
Default: ’#F5F5F5’
  1. DefaultColor
Warna yang untuk digunakan saat untuk titik data di dalam sebuah geochart ketika lokasi (misalnya, ’AS) hadir tetapi nilai baik nol atau tidak ditentukan. Hal ini berbeda dari datalessRegionColor, yang merupakan warna yang digunakan ketika data hilang.
Tipe: string
Default: ’#267114’
  1. DisplayMode
Tipe mana yang dari geochart adalah ini. Format DataTable harus cocok dengan nilai yang ditentukan. Berikut ini adalah nilai-nilai yang didukung:
  • ’auto’ - Memilih berdasarkan format DataTable.
  • ’regions’ - Mewarnai daerah pada geochart.
  • ’markers’ – Menempatkan marker pada region.
  • 'text’ – Melabelkan region dengan teks dari DataTable.
Tipe: string
Default: ’auto’
  1. Domain
Tampilkan geochart seolah-olah itu sedang disajikan dari region ini. Misalnya, pengaturan domain ke ’IN’ akan menampilkan Kashmir sebagai milik India bukan sebagai wilayah yang disengketakan.
Tipe: string
Default: null
  1. EnableRegionInteractivity
Jika benar, memungkinkan interaktivitas wilayah, termasuk fokus dan alat-tip elaborasi di hover mouse, dan pemilihan wilayah dan pengaktifan regionClick dan pilih events di klik mouse. Default adalah benar dalam mode region, dan salah dalam mode marker.
Tipe: boolean
Default: automatic
  1. ForceIFrame
Menggambar grafik di dalam sebuah frame inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua grafik IE8 digambar di i-frame.)
Tipe: boolean
Default: false.
  1. Height
Ketinggian visualisasi, dalam piksel. Ketinggian default adalah 347 piksel, kecuali opsi lebar ditentukan dan keepAspectRatio diatur ke true - dalam hal ketinggian yang dihitung sesuai.
Tipe: nomor
Default: auto
  1. KeepAspectRatio
Jika benar, geochart akan digambar pada ukuran terbesar yang dapat ditampung di dalam area grafik di rasio aspek natural. Jika hanya salah satu pilihan dari lebar dan tinggi yang ditentukan, yang lain akan dihitung sesuai dengan rasio aspek. Jika salah, geochart akan membentang dengan ukuran yang tepat dari grafik seperti yang ditentukan oleh opsi lebar dan tinggi.
Tipe: boolean
Default: true
  1. Legend
Sebuah objek dengan anggota untuk mengkonfigurasi berbagai aspek dari legend, atau ’none’, jika tidak ada legend akan muncul. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan notasi objek literal, seperti yang ditunjukkan di sini:
{textStyle: {color: ’blue’, fontSize: 16}}
Tipe: Objek / ’none’
Default: null
  1. Legend.numberFormat
Sebuah format string untuk label numerik. Ini adalah sebuah bagian dari set pola ICU. Misalnya,
{NumberFormat: ’. ##’} Akan menampilkan nilai-nilai "10,66", "10,6", dan "10,0" untuk nilai 10,666, 10,6, dan 10.
Tipe: string
Default: auto
  1. Legend.textStyle
Sebuah objek yang menentukan gaya teks legend. Objek tersebut memiliki format ini:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Warna dapat berupa string warna HTML, misalnya: ’merah’ atau ’# 00CC00’. Juga lihat fontName
dan fontSize.
Tipe: objek
Default: {color: ’black’, fontName: <global-font-name>, fontSize: <global-font-size>}
  1. Region
Area untuk ditampilkan pada geochart tersebut. (Sekitarnya akan ditampilkan juga). Bisa menjadi salah satu dari berikut:
  • ’world’ - Sebuah geochart dari seluruh dunia. Sebuah benua atau sub-benua, yang ditentukan oleh kode 3-digit, misalnya, ’011’ untuk Afrika Barat.
  • Sebuah negara, yang ditentukan oleh kode ISO 3166-1 alpha-2, misalnya, ’AU’ untuk Australia.
  • Sebuah negara di Amerika Serikat, yang ditentukan oleh kode ISO 3166-2:US, misalnya, ’USAL’ untuk Alabama. Perhatikan bahwa opsi resolusi harus diatur baik ’provinsi’ atau ’metro’.
  • Tipe: string
Default: ’world’
  1. MagnifyingGlass
Sebuah objek dengan anggota untuk mengkonfigurasi berbagai aspek kaca pembesar. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{enable: true, zoomFactor: 7.5}
Tipe: Object
Default: {enable: true, zoomFactor: 5.0}
  1. MagnifyingGlass.enable
Jika benar, ketika pengguna tetap hidup selama marker berantakan, kaca pembesar akan dibuka. Catatan: fitur ini tidak didukung dalam browser yang tidak mendukung SVG, yaitu Internet Explorer versi 8 atau sebelumnya.
Tipe: boolean
Default: true
  1. MagnifyingGlass.zoomFactor
Faktor pembesar dari kaca pembesar. Bisa jadi angka berapapun yang lebih besar dari 0.
Tipe: nomor
Default: 5.0
  1. MarkerOpacity
Tingkat ketebalan dari spidol, di mana 0,0 sepenuhnya transparan dan 1.0 sepenuhnya buram.
Tipe: nomor, 0.0–1.0
Default: 1.0
  1. Resolution
Resolusi perbatasan geochart. Pilih salah satu dari nilai berikut: ’countries’ - Didukung untuk semua daerah, kecuali untuk daerah negara bagian AS. ’provinces’ - Didukung hanya untuk wilayah negara dan wilayah negara bagian AS. Tidak didukung untuk semua negara; silahkan menguji sebuah negara untuk melihat apakah pilihan ini didukung. ’metros’ - Didukung untuk wilayah negara AS dan wilayah negara bagian AS saja.
Tipe: string
Default: ’countries’
  1. SizeAxis
Sebuah objek dengan anggota untuk mengkonfigurasi bagaimana nilai-nilai terhubung dengan ukuran gelembung. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini: {minValue: 0, maxSize: 20}
Tipe: objek
Default: null
  1. SizeAxis.maxSize
Radius maksimum dari kemungkinan gelembung terbesar, dalam piksel.
Tipe: nomor
Default: 12
  1. SizeAxis.maxValue
Nilai ukuran (seperti yang ditampilkan dalam data grafik) yang akan dipetakan ke sizeAxis.maxSize. Nilai yang lebih besar akan dipotong untuk nilai ini.
Tipe: nomor
Default: Nilai maksimum dari kolom ukuran di dalam data grafik
  1. SizeAxis.minSize
Radius minimum dari gelembung kemungkinan terkecil, dalam piksel
Tipe: nomor
Default: 3
  1. SizeAxis.minValue
Nilai Ukuran (seperti yang ditampilkan dalam data grafik) yang akan dipetakan ke sizeAxis.minSize. nilai-nilai yang lebih kecil akan dipotong untuk nilai ini.
Tipe: nomor
Default: Nilai minimum dari kolom ukuran di dalam data grafik.
  1. Tooltip
Sebuah objek dengan anggota untuk mengkonfigurasi berbagai elemen tooltip. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{textStyle: {color: ’#FF0000’}, showColorCode: true}
Tipe: objek
Default: null
  1. Tooltip.textStyle
Sebuah objek yang menentukan gaya teks tooltip. Objek tersebut memiliki format ini: { color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Warna dapat berupa string warna HTML, misalnya: ’merah’ atau ’# 00CC00’. Lihat juga fontName dan fontsize.
Tipe: objek
Default: {color: ’black’, fontName: <global-font-name>, fontSize: <global-font-size>}.
  1. Tooltip.trigger
Interaksi pengguna yang menyebabkan tooltip akan ditampilkan:
  • 'focus’ - Tooltip akan ditampilkan ketika pengguna melayang di atas elemen.
  • ’one’ – Tooltip tidak akan ditampilkan.
  • ’selection’ – Tooltip akan ditampilkan ketika pengguna memilih elemen tersebut.
Tipe: string
Default: ’focus’
  1. Width
Lebar dari visualisasi, dalam piksel. Lebar default adalah 556 piksel, kecuali opsi ketinggian telah ditentukan dan keepAspectRatio diatur ke benar - dalam hal lebar dihitung sesuai.
Tipe: nomor
Default: auto

3.1.7. Bubble Chart

Memuat
The google.charts.load package name is "corechart".
google.charts.load("current", {packages: ["corechart"]});
The visualization's class name is google.visualization.BubbleChart.
var visualization = new google.visualization.BubbleChart(container);

Format Data
Barisan: Setiap baris di dalam tablel menampilkan sebuah bubble tunggal.
Kolom-kolom:

gambar 3.3. 

      1. Metode
    1. Draw(data, options) :
Menarik grafik. Grafik menerima metode panggilan lebih lanjut setelah readyevent dinyalakan.
Deskripsi yang diperpanjang.
Tipe Kembali: tidak ada.
    2. GetAction(actionID) :
Mengembalikan objek tindakan tooltip dengan actionID yang telah diajukan.
Tipe Kembali: objek.
      3. GetBoundingBox(id) :
Mengembalikan sebuah objek yang mengandung kiri, atas, lebar, dan tinggi dari grafik elemen id. Format untuk id belum didokumentasikan (mereka adalah nilai-nilai kembali dari event handler), tapi di sini ada beberapa contoh:
var cli = chart.getChartLayoutInterface();
Tipe Kembali: objek.
4. GetChartAreaBoundingBox() :
Mengembalikan sebuah objek yang berisi kiri, atas, lebar, dan tinggi dari kandungan grafik (yaitu, tidak termasuk label dan legenda):
varcli = chart.getChartLayoutInterface();
cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartArea Bounding Box().width
Nilai-nilai adalah relatif terhadap kontainer dari grafik. Panggil ini setelah grafik digambar.
Tipe Kembali: object
5. GetChartLayoutInterface() :
Mengembalikan sebuah objek yang berisi informasi tentang penempatan layar dari grafik dan unsurunsurnya Metode berikut dapat disebut pada objek yang telah dikembalikan.
tipe Kembali: string
6. GetImageURI() :
Mengembalikan grafik serial sebagai gambar URI. Panggil ini setelah grafik digambar. Lihat Printing PNG Charts.
tipe Kembali: string
7. GetSelection() :
Mengembalikan array dari entitas grafik yang dipilih. Entitas yang bisa dipilih adalah gelembung. Untuk grafik ini, hanya satu entitas dapat dipilih pada saat tertentu. Deskripsi yang telah diperpanjang.
Tipe Kembali: Array dari elemen-elemen yang terpilih.
8. RemoveAction(actionID) :
Menghapus aksi tooltip dengan actionID yang telah diminta dari grafik.
Tipe Kembali: none
9. SetAction(action) :
Mengatur sebuah tindakan tooltip untuk dieksekusi ketika pengguna mengklik pada teks aksi.
Tipe Kembali: none
10. SetSelection() :
Memilih entitas grafik yang ditentukan. Membatalkan setiap seleksi sebelumnya. entitas dipilih gelembung. Untuk grafik ini, hanya satu entitas dapat dipilih pada suatu waktu. Deskripsi yang
telah diperpanjang.
Tipe Kembali: none
11. ClearChart() :
Membersihkan grafik, dan melepaskan semua sumber daya yang telah dialokasikan.
Tipe Kembali: none

  • Event

Nama
animationfinish
Dinyalakan ketika animasi transisi selesai.
Properties:none
click
Dinyalakan ketika pengguna mengklik dalam grafik. Dapat digunakan untuk mengidentifikasi ketika judul, elemen data, entri legenda, kapak, gridlines, atau label yang diklik.
Properties:targetID
error
Dinyalakan bila terjadi kesalahan saat mencoba untuk membuat grafik.
Properties:id, message
onmouseover
Dinyalakan ketika pengguna mencari-cari sebuah entitas visual. Melewati kembali baris dan kolom indeks dari elemen data tabel yang sesuai. Gelembung berkorelasi dengan baris di dalam tabel data (indeks kolom adalah null).
Properties:row, column
onmouseout
Dinyalakan ketika pengguna mencari jauh dari entitas visual. Melewati kembali baris dan kolom indeks dari elemen tabel data yang sesuai. Gelembung berkorelasi dengan baris dalam tabel data (indeks kolom adalah null).
Properties:row, column
ready
Grafik siap untuk metode panggilan eksternal. Jika Anda ingin berinteraksi dengan grafik, dan memanggil metode setelah Anda memanggilnya, Anda harus mengatur pendengar untuk acara ini sebelum Anda memanggil metode draw, dan memanggil mereka hanya setelah event dinyalakan.
Properties:none
select
Dinyalakan ketika pengguna mengklik sebuah entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection ().
Properties:none

      1. Configuration Options
·       animation.duration    
Durasi animasi dalam milidetik.
Type: number
Default: 0
·       animation.easing       
Fungsi yang mempermudah penerapan animasi. Fungsi yang tersedia sebagai berikut:
o   'linear' – kecepatan konstan.
o   'in' – memulai animasi secara perlahan semakin cepat.
o   'out' – memulai animasi secara cepat dan semakin lambat.
o   'inAndOut' - memulai animasi secara perlahan, semakin cepat, kemudfian semakin lambat.
Type: string
Default: 'linear'
·       animation.startup      
Menentukan apakah grafik akan berjalan dari keadaan awal. Jika benar, grafik akan mulai berjalan dari keadaan awal ke keadaan akhir
Type: boolean
Default false
·       axisTitlesPosition      
Menempatkan judul sumbu, mengikuti dengan daerah grafik. Nilai yang mendukung:
in - Memberi judul sumbu di dalam area grafik.
out - Memberi judul sumbu di luar area grafik.
none - Menghilangkan judul sumbu.
Type: string
Default: 'out'
·       backgroundColor       
Warna latar belakang untuk wilayah utama grafik. Dapat berupa warna HTML string sederhana, Contoh: 'red' atau '#00cc00', atau objek dengan properti yang tersedia.
Type: string atau object
Default: 'white'
·       backgroundColor.stroke        
Warna bingkai grafik, sebagai string warna HTML.
Type: string
Default: '#666'
·       backgroundColor.strokeWidth          
lebar bingkai grafik dalam piksel.
Type: number
Default: 0
·       backgroundColor.fill 
Pengisi warna grafik sebagai string warna HTML.
Type: string
Default: 'white'
·       bubble
Sebuah objek dengan anggota untuk mengkonfigurasi properti visual dari gelembung.
Type: object
Default: null
·       bubble.opacity
Pengaturan keburaman dari gelembung, di mana 0 adalah sepenuhnya transparan dan 1 sepenuhnya buram.
Type: number antara 0.0 dan 1.0
Default: 0.8
·       bubble.stroke 
Warna dari gelembung.
Type: string
Default: '#ccc'
·       bubble.textStyle        
Menentukan gaya teks gelembung dengan format sebagai berikut:

{color: <string>, fontName: <string>, fontSize: <number>}

Warna dapat berupa perintah string warna HTML, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
·       chartArea       
Mengkonfigurasi penempatan dan ukuran daerah grafik (di mana grafik itu sendiri diambil, tidak termasuk sumbu dan legenda). Dua format yang didukung: ‘number’ yang diikuti dengan besar pixel, atau ‘number’ yang diikuti dengan persentasi. Contohnya:

chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
·       chartArea.backgroundColor  
Daerah bagan warna latar belakang. Ketika string yang digunakan, dapat berupa string hex (contohnya '#fdc') atau nama warna dalam bahasa Inggris. Ketika sebuah benda sedang digunakan, sifat-sifat berikut dapat diberikan:
o   stroke: Warna, tersedia sebagai string hex atau nama Inggris warna.
o   strokeWidth: memberi warna di sekitar bingkai grafik dengan lebar yang diberikan (dan dengan warna stroke).
Type: string atau object
Default: 'white'
·       chartArea.left
Jarak antara grafik dengan bingkai kiri.
Type: number or string
Default: auto
·       chartArea.top 
Jarak antara grafik dengan bingkai atas.
Type: number atau string
Default: auto
·       chartArea.width         
Lebar area grafik.
Type: number atau string
Default: auto
·       chartArea.height        
Ketinggian area grafik.
Type: number atau string
Default: auto
·       colors 
Warna-warna yang digunakan untuk mewarnai elemen grafik, dimana setiap elemen adalah string warna HTML, misalnya: colors:['red','#004411'].
Type: Array atau strings
Default: default colors
·       colorAxis       
Sebuah objek yang menentukan letak pemetaan antara nilai kolom warna dan warna atau skala gradien. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:

{minValue: 0,  colors: ['#FF0000', '#00FF00']}

Type: object
Default: null
·       colorAxis.minValue  
Jika ada, dapat menentukan nilai minimum untuk data bagan warna. Nilai data warna nilai ini sampai nilai terendah akan diberikan sebagai warna pertama dalam kisaran colorAxis.colors.
Type: number
Default: Minimum value of color column in chart data
·       colorAxis.maxValue 
Jika ada, dapat menetapkan nilai maksimum untuk data bagan warna. nilai data warna nilai ini sampai nilai tertinggi akan diberikan sebagai warna terakhir dalam kisaran colorAxis.colors.
Type: number
Default: Maximum value of color column in chart data
·       colorAxis.values        
Jika ada, dapat mengontrol bagaimana nilai-nilai yang berhubungan dengan warna. Setiap nilai dikaitkan dengan warna yang sesuai dalam array colorAxis.colors. Nilai-nilai ini berlaku untuk data grafik warna. Pewarnaan dilakukan sesuai dengan gradien dari nilai yang ditetapkan di sini.
Type: array of numbers
Default: null
·       colorAxis.colors        
Warna untuk menetapkan nilai-nilai dalam visualisasi, di mana setiap elemen adalah string warna HTML, misalnya: colorAxis: {colors:['red','#004411']}. Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai-nilai Anda, ditambah nilai perantara dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai yang tertinggi.
Type: array of color strings
Default: null
·       colorAxis.legend       
Sebuah objek yang menentukan gaya warna gradient legenda.
Type: object
Default: null
·       colorAxis.legend.position     
Posisi legenda.
o   'top' – Terletak diatas grafik.
o   'bottom' - Terletak dibawah grafik.
o   'in' - Terletak didalam atas grafik.
o   'none' – Legenda tidak ditampilkan.
Type: object
Default: 'top'
·       colorAxis.legend.textStyle    
Sebuah objek yang menentukan gaya teks legenda. objek memiliki format ini:

{color: <string>, fontName: <string>, fontSize: <number>}

Warna dapat berupa string warna HTML, misalnya: 'red' atau '# 00CC00'. Juga lihat fontName dan fontsize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
·       colorAxis.legend.numberFormat      
Sebuah string format untuk label numerik. Ini adalah bagian dari set pola ICU. Misalnya, {NumberFormat: '. ##'} Akan menampilkan nilai-nilai "10,66", "10,6", dan "10,0" untuk nilai 10,666, 10,6, dan 10.
Type: string
Default: auto
·       explorer         
Opsi explorer memungkinkan pengguna untuk menggeser dan memperbesar grafik Google. explorer: {} memberikan perilaku default explorer, memungkinkan pengguna untuk menggeser secara horizontal dan vertikal dengan menyeret, dan untuk memperbesar dan memperkecil dengan menggulir.
Fitur ini masih dalam tahap eksperimen dan dapat berubah dalam rilis mendatang.
Catatan: explorer hanya bekerja dengan sumbu kontinyu (seperti nomor atau tanggal).
Type: object
Default: null
·       explorer.actions
Google Charts explorer hanya mendukung tiga aksi:
o   dragToPan: Drag untuk menggeser grafik horizontal dan vertikal. Untuk menggeser hanya sepanjang sumbu horisontal, menggunakan explorer: {axis: 'horisontal'}. Demikian pula untuk sumbu vertikal.
o   dragToZoom: Perilaku default explorer adalah untuk zoom in dan zoom out ketika pengguna melakukan scroll. Jika explorer: { actions: ['dragToZoom', 'rightClickToReset'] } dipakai, akan menyeret seluruh area persegi zoom ke daerah itu. Sebaiknya gunakan rightClickToReset setiap kali dragToZoom digunakan. Lihat explorer.maxZoomIn, explorer.maxZoomOut, dan explorer.zoomDelta untuk kustomisasi zoom.
o   rightClickToReset: Mengklik kanan pada grafik akan mengembalikan ke ukuran zoom yang semula.
Type: Array of strings
Default: ['dragToPan', 'rightClickToReset']
·       explorer.axis  
Secara default, pengguna dapat menggeser secara horisontal dan vertikal ketika opsi explorer digunakan. Jika Anda ingin pengguna untuk hanya menggeser secara horizontal, menggunakan explorer:{ axis: 'horizontal' }. Demikian pula, explorer:{ axis: 'vertical' } untuk melakukan pergeseran secara vertikal.
Type: string
Default: both horizontal and vertical panning
·       explorer.keepInBounds         
Secara default, pengguna dapat menggeser sekitar, terlepas dari mana data tersebut. Untuk memastikan bahwa pengguna tidak menggeser luar grafik asli, dapat menggunakan explorer: { keepInBounds: true }.
Type: boolean
Default: false
·       explorer.maxZoomIn 
Zoom in maksimum explorer yang dapat dilakukan. Secara default, pengguna dapat dapat zoom in sampai 25% dari tampilan aslinya. Pengaturan explorer: { maxZoomIn: .5 } memperbolehkan pengguna zoom in sampai setengah dari tampilan aslinya.
Type: number
Default: 0.25
·       explorer.maxZoomOut          
Zoom out maksimum explorer yang dapat dilakukan. Secara default, pengguna dapat dapat melakukan zoom out suatu grafik sampai tersisa 1/4 dari keseluruhan ruang. Pengaturan explorer: { maxZoomOut: 8 } memperbolehkan pengguna zoom in sampai 1/8 dari total ruangnya.
Type: number
Default: 4
·       explorer.zoomDelta   
When users zoom in or out, explorer.zoomDelta determines how much they zoom by. The smaller the number, the smoother and slower the zoom.  Ketika pengguna melakukan zoom in atau zoom out, explorer.zoomDelta menentukan berapa besar ukuran zoomya. Semakin kecil angkanya, semakin halus dan lebih lambat.
Type: number
Default: 1.5
·       fontSize         
Ukuran font default, dalam piksel, dari semua teks pada grafik. Anda dapat mengganti ini dengan menggunakan properti untuk elemen grafik tertentu.Type: number
Default: automatic
·       fontName       
Font default untuk semua teks dalam grafik. Anda dapat mengganti ini dengan menggunakan properti untuk elemen grafik tertentu.Type: string
Default: 'Arial'
·       forceIFrame   
Menggambar grafik dalam sebuah frame inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua grafik IE8 diambil di i-frame.)
Type: boolean
Default: false
·       hAxis 
Sebuah objek untuk mengkonfigurasi berbagai elemen sumbu horisontal. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Type: object
Default: null
·       hAxis.baseline
Dasar untuk sumbu horisontal.
Type: number
Default: automatic
·       hAxis.baselineColor  
Warna dasar untuk sumbu horisontal. Dapat berupa string apapun warna HTML, misalnya: 'red' or '#00cc00'.
Type: number
Default: 'black'
·       hAxis.direction          
Arah di mana nilai-nilai sepanjang sumbu horisontal tumbuh.
Type: 1 atau -1
Default: 1
·       hAxis.format 
Sebuah string format untuk label sumbu numerik. Ini adalah bagian dari set pola ICU. Contohnya,{format:'#,###%'} akan menampilkan nilai-nilai "1,000%", "750%", dan "50%" untuk nilai 10, 7.5, and 0.5. Anda juga dapat menyediakan salah satu dari berikut:
o   {format: 'none'}: menampilkan angka tanpa format (contoh: 8000000)
o   {format: 'decimal'}: menampilkan angka dengan pemisah angka (contoh: 8,000,000)
o   {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (contoh: 8e6)
o   {format: 'currency'}: menampilkan angka  dalam mata uang lokal (contoh: $8,000,000.00)
o   {format: 'percent'}: menampilkan angka sebagai persentase (contoh: 800,000,000%)
o   {format: 'short'}: menampilkan  angka dalam bentuk singkatan (contoh: 8M)
o   {format: 'long'}: menampilkan angka dalam bentuk kalimat (contoh: 8 million)
Format yang sebenarnya diterapkan pada label berasal dari dan telah dimuat dengan Google API.
Type: string
Default: auto
·       hAxis.gridlines          
Mengkonfigurasi gridlines pada sumbu horisontal. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{color: '#333', count: 4}
Type: object
Default: null
·       hAxis.gridlines.color 
Warna gridlines horisontal dalam area grafik. Menentukan warna HTML string yang valid.
Type: string
Default: '#CCC'
·       hAxis.gridlines.count
Jumlah gridlines horisontal dalam area grafik. Nilai minimum adalah 2. Bila diatur sebagai -1 secara otomatis akan menghitung jumlah gridlines.
Type: number
Default: 5
·       hAxis.gridlines.units 
Memberi format default untuk berbagai aspek tipe data tanggal / datetime / timeOfDay bila digunakan dengan grafik yang dihitung dengan gridlines. Memungkinkan membuat format tahun, bulan, hari, jam, menit, detik, dan milidetik.
Format umumnya adalah:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Type: object
Default: null
·       hAxis.minorGridlines
Mengkonfigurasi gridlines kecil pada sumbu horisontal, mirip dengan opsi hAxis.gridlines.
Type: object
Default: null
·       hAxis.minorGridlines.color  
Warna gridlines kecil horisontal dalam area grafik. Menentukan warna HTML string yang valid.
Type: string
Default: Campuran dari garis grid dan warna latar belakang
·       hAxis.minorGridlines.count 
Jumlah petak kecil horisontal antara dua petak biasa.
Type: number
Default: 0
·       hAxis.minorGridlines.units   
Menimpa format default untuk berbagai aspek tipe data tanggal / datetime / timeOfDay bila digunakan dengan grafik yang dihitung dengan minorGridlines. Memungkinkan membuat format tahun, bulan, hari, jam, menit, detik, dan milidetik.
Format umumya adalah:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Additional information can be found in Dates and Times.
Type: object
Default: null
·       hAxis.logScale          
Properti hAxis yang membuat sumbu horisontal skala logaritmik (mengharuskan semua nilai positif). Diatur ke ‘true’ untuk mengaktifkannya.
Type: boolean
Default: false
·       hAxis.scaleType        
Properti hAxis yang membuat horisontal sumbu skala logaritmik. Dapat menjadi salah satu dari berikut:
o   null - Tidak ada skala logaritmik dilakukan.
o   'log' - skala logaritmik. nilai-nilai negatif dan nol tidak diplot. Pilihan ini sama dengan pengaturan hAxis: { logscale: true }.
o   'mirrorLog' - skala logaritmik di mana nilai-nilai negatif dan nol diplot. nilai diplot dari angka negatif adalah negatif dari log dari nilai absolut. Nilai mendekati 0 diplot pada skala linear.
Type: string
Default: null
·       hAxis.textPosition     
Posisi teks sumbu horisontal, relatif terhadap daerah grafik. nilai-nilai yang didukung: 'out', 'in', 'none'.
Type: string
Default: 'out'
·       hAxis.textStyle          
Sebuah objek yang menentukan gaya teks sumbu horisontal. Berbagaiu objek memiliki format ini sebagai berikut:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Untuk warna bisa menggunakan perintah warna string dari HTML, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
·       hAxis.ticks     
Menggantikan secara otomatis X-axis dengan array yang telah ditentukan. Setiap elemen dari array harus berupa nilai yang valid (seperti nomor, tanggal, datetime, atau timeOfDay), atau benda. Jika berupa sebuah objek, harus memiliki properti v untuk nilai centang, dan f properti opsional yang mengandung string literal yang akan ditampilkan sebagai label.
Contoh:
hAxis: { ticks: [5,10,15,20] }
hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Type: Array of elements
Default: auto
·       hAxis.title      
Properti hAxis yang menentukan judul sumbu horisontal.
Type: string
Default: null
·       hAxis.titleTextStyle  
Sebuah objek yang menentukan gaya teks judul sumbu horisontal. Dengan format sebagai berikut:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Untuk warna bisa menggunakan perintah warna string dari HTML, misalnya: 'red' or '#00cc00'. Lihat juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
·       hAxis.maxValue        
Menggerakkan nilai maks sumbu horisontal dengan nilai yang ditentukan. Abaikan ini bila diatur ke nilai yang lebih kecil dari maksimum x-nilai data. hAxis.viewWindow.max menimpa properti ini.
Type: number
Default: automatic
·       hAxis.minValue        
Menggerakkan nilai min sumbu horisontal dengan nilai yang ditentukan. Abaikan ini jika diatur ke nilai yang lebih besar daripada minimum x-nilai data. hAxis.viewWindow.min menimpa properti ini.
Type: number
Default: automatic
·       hAxis.viewWindowMode     
Menentukan bagaimana menskala sumbu horisontal untuk membuat nilai-nilai dalam area grafik. Nilai-nilai string berikut yang didukung:
o   'pretty' - Skala nilai horisontal sehingga maksimum dan data minimum nilai yang diberikan sedikit dalam kiri dan kanan area grafik. Hal ini akan menyebabkan haxis.viewWindow.min dan haxis.viewWindow.max diabaikan.
o   'maximized' - Skala nilai horisontal sehingga data maksimum dan data minimum menyentuh kiri dan kanan area grafik. Hal ini akan menyebabkan haxis.viewWindow.min dan haxis.viewWindow.max untuk diabaikan.
o   'explicit' - Opsi untuk menghantikan penentuan nilai-nilai skala kiri dan kanan area grafik. (dikarenakan berlebihan dengan haxis.viewWindow.min dan haxis.viewWindow.max.) Nilai-nilai data di luar nilai-nilai ini akan dipotong. Anda harus menentukan objek hAxis.viewWindow mana yang menggambarkan nilai-nilai maksimum dan minimum.
Type: string
Defaut: Setara dengan 'cantik', tapi haxis.viewWindow.min dan haxis.viewWindow.max diutamakan jika digunakan.
·       hAxis.viewWindow   
Menentukan rentang tanam sumbu horisontal.
Type: object
Default: null
·       hAxis.viewWindow.max       
Maksimum horisontal nilai data ke render.
diabaikan ketika hAxis.viewWindowMode telah di 'maximized'.
Type: number
Default: auto
·       hAxis.viewWindow.min       
The minimum horizontal data value to render.
Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.
Type: number
Default: auto
·       height 
Ketinggian grafik dalam piksel.
Type: number
Default: ketinggian yang mengandung elemen.
·       legend
Mengkonfigurasi berbagai aspek legenda. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
·       legend.alignment       
Penyelarasan legenda. Dapat menjadi salah satu dari berikut:
o   'start' – Terletak pada awal legenda.
o   'center' – terletak di tengah legenda.
o   'end' – terletak pada akhir daerah dialokasikan untuk legenda.
Type: string
Default: automatic
·       legend.maxLines       
Jumlah maksimum baris dalam legenda. Atur ini sesuai degnan kebutuhan jumlah baris legenda Anda. Catatan: logika yang tepat digunakan untuk menentukan jumlah sebenarnya garis diberikan masih dalam fluks.
Pilihan saat ini bekerja ketika legend.position adalah 'top'.
Type: number
Default: 1
·       legend.position          
Posisi legenda. Dapat menjadi salah satu dari berikut:
o   'bottom' – Bawah grafik.
o   'left' - Di sebelah kiri grafik, disediakan sumbu kiri yang tidak memiliki seri yang terkait dengan itu. Jadi jika Anda ingin legenda di sebelah kiri, gunakan opsi targetAxisIndex: 1.
o   'in' - Di dalam grafik, dengan sudut kiri atas.
o   'none' - Tidak ada legenda ditampilkan.
o   'right' - Di sebelah kanan grafik. Tidak kompatibel dengan pilihan vAxes.
o   'top' – Berada diatas grafik.
Type: string
Default: 'right'
  • legend.textStyle         


Sebuah obyek yang menentukan gaya teks legenda. Ini format objek tersebut:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
warn dapat berupa string dalam HTML, seprti: 'red' or '#00cc00'. Juga terdapat pada fontName dan fontSize.
Tipe: obyek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
  • selectionMode

ketika selectionMode terdapat 'beberapa', pengguna dapat memilih beberapa data point.
Tipe: string
Default: 'single'
  • series
Sebuah objek dari obyek, di mana kuncinya adalah nama seri (nilai-nilai dalam kolom Color) dan masing-masing objek yang menggambarkan format seri yang sesuai pada grafik. Jika seri atau nilai yang tidak ditentukan, nilai global akan digunakan.
Beberapa obyek pendukung seperti berikut ini:
o   color – spesifikasi yang cocok dan valid pada string HTML.
o   visibleInLegend – sebuah nilai bolean, dimana entri harus memiliki entri legend. Default harus benar.
contoh:
seri: {'Europe': {color: 'green'}}
Tipe: Object with nested objects
Default: {}
  • sizeAxis

Sebuah objek dengan anggota untuk mengkonfigurasi bagaimana nilai-nilai yang berhubungan dengan bubble size. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{minValue: 0,  maxSize: 20}
Tipe : object
Default : null
  • sizeAxis.maxSize      

radius maksimum kemungkinan terdapat di bubble. Dan dam pixel.
Tipe: nomor
Default: 30
  • sizeAxis.maxValue   

Nilai ukuran (seperti yang ditampilkan dalam data grafik) yang akan dipetakan pada sizeAxis.maxSize.
nilai yang lebih besar akan dipotong untuk nilai ini.
Tipe: number
Default: nilai maksimum kolom ukuran dalam data grafik.
  • sizeAxis.minSize       

radius mininum dari gelembung terkecil yang mungkin, dalam piksel.
Tipe: number
Default: 5
·       Nilai Ukuran (seperti yang ditampilkan dalam data grafik) yang akan dipetakan ke sizeAxis.minSize. nilai-nilai yang lebih kecil akan dipotong untuk nilai ini.
Tipe: number
Default: nilai minimum kolom ukuran dalam data grafik.
  • sortBubblesBySize    

Jika benar, macam-macam gelembung dengan ukuran berfariasi sehingga gelembung kecil muncul di atas gelembung yang lebih besar. Jika salah, gelembung diurutkan sesuai urutan mereka di dalam DataTable.
Tipe: boolean
Default: true
  • theme

Sebuah tema yang seperangkat nilai opsi yang telah ditetapkan yang bekerja sama untuk mencapai perilaku grafik tertentu atau efek visual. Saat ini hanya satu tema yang tersedia:
'maximized' - Memaksimalkan area grafik, dan menarik legenda dan semua label di dalam area grafik. Menetapkan pilihan berikut
§  chartArea: {width: '100%', height: '100%'},
§  legend: {position: 'in'},
§  titlePosition: 'in', axisTitlesPosition: 'in',
§  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Tipe: string
Default: null
  • title    

Teks untuk menampilkan di atas bagan.
Tipe: string
Default: tampa judul
  • titlePosition   

Di mana untuk menempatkan judul grafik, bandingkan dengan daerah grafik.
nilai-nilai yang didukung:
o   in - Menggambar judul di dalam area grafik.
o   out - Menggambar judul di luar area grafik..
o   none - Menghilangkan judul.Type: string
Default: 'out'
  • titleTextStyle 

Sebuah objek yang menentukan gaya teks judul. objek memiliki format ini:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Warna dapat berupa string warna HTML, misalnya 'red' or '#00cc00'. Dan juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
  • tooltip

Sebuah objek dengan anggota untuk mengkonfigurasi berbagai elemen tooltip. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:
{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipe: object
Default: kosong
  • tooltip.isHtml

jika diatur ke true, menggunakan HTML-rendered (lebih dari SVG-rendered) tooltips. Lihat dan sesuaikan Keterangan alat Konten untuk lebih jelasnya.
Catatan: kustomisasi konten HTML tooltip melalui peran kolom data tooltip tidak didukung oleh Bubble Chart visualization.
Tipe: boolean
Default: false
  • tooltip.textStyle

Sebuah objek yang menentukan gaya teks tooltip. Objek ini memiliki format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Warna dapat berupa string warna HTML, misalnya: 'red' or '#00cc00'. Dan juga lihat fontName dan fontSize
Tipe: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
  • tooltip.trigger

Interaksi pengguna yang menyebabkan tooltip yang akan ditampilkan:
'Fokus' - tooltip akan ditampilkan ketika pengguna melewati atas elemen.
‘none' - tooltip tidak akan ditampilkan.
'selection' - tooltip akan ditampilkan bila pengguna memilih elemen.
Tipe: string
Default: 'focus'
  • vAxis 

Sebuah objek dengan anggota untuk mengkonfigurasi berbagai elemen sumbu vertikal. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, terlihat seperti ini :{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipe: object
Default: null
  • vAxis.baselineColor

Menentukan warna dasar untuk sumbu vertikal. Dapat berupa string warna HTML, contohnya : 'red' or '#00cc00'.
Tipe: number
Default: 'black'
  • vAxis.direction

Arah di mana nilai-nilai sepanjang sumbu vertikal tumbuh. Tentukan -1 untuk membalik urutan dari nilai-nilai tersebut.
Type: 1 or -1
Default: 1
  • vAxis.gridlines.color

Warna gridlines vertikal di dalam area grafik. Menentukan warna HTML string yang valid.
Type: string
Default: '#CCC'
  • vAxis.format

Sebuah string format untuk label sumbu numerik. Ini adalah bagian dari set pola ICU. Seperti ini, {format:'#,###%'}, akan menampilkan nilai-nilai "1,000%", "750%", dan "50%" untuk nilai 10, 7.5, dan 0.5. kamu bisa menyediakan dari format berikut:
o   {format: 'none'}: menampilkan nomor tanpa format (e.g., 8000000)
o   {format: 'decimal'}: nomor display dengan ribuan pemisah (e.g., 8,000,000)
o   {format: 'scientific'}: nomor ditampilkan dalam notasi ilmiah (e.g., 8e6)
o   {format: 'currency'}: nomor display dalam mata uang lokal (e.g., $8,000,000.00)
o   {format: 'percent'}: nomor menampilkan sebagai persentase (e.g., 800,000,000%)
o   {format: 'short'}: nomor ditampilkan dengan singkat (e.g., 8M)
o   {format: 'long'}: nomor ditampilkan dengan penuh (e.g., 8 million)
Format yang sebenarnya diterapkan pada label berasal dari lokal API telah dimuat dengan. Untuk lebih jelasnya, lihat memuat grafik dengan lokal tertentu.
Type: string
Default: auto
  • vAxis.gridlines

Sebuah objek dengan anggota untuk mengkonfigurasi gridlines pada sumbu vertikal. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan di sini:{color: '#333', count: 4}
Tipe: object
Default: null
  • vAxis.gridlines.count

Jumlah gridlines vertikal di dalam area grafik. Nilai minimum adalah 2. Tentukan -1 untuk secara otomatis menghitung jumlah gridlines.
Tyie: number
Default: 5
  • vAxis.minorGridlines

Sebuah objek dengan anggota untuk mengkonfigurasi gridlines kecil pada sumbu vertikal, mirip dengan opsi vAxis.gridlines.
Tipe: object
Default: null
  • vAxis.minorGridlines.color

Warna gridlines kecil vertikal di dalam area grafik. Menentukan warna HTML string yang valid.
Tipe: string
Default: Campuran dari gridline dan latar belakang warna.
  • vAxis.minorGridlines.count 

Jumlah petak kecil vertikal antara dua petak biasa.
Type: number
Default: 0
  • vAxis.minorGridlines.units   

Menimpa format default untuk berbagai aspek tipe data tanggal / datetime / timeOfDay bila digunakan dengan grafik dihitung minorGridlines. Memungkinkan format untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.
Format dasarnya ialah:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Informasi tambahan dapat ditemukan di Dates dan Times.
Type: object
Default: null
  • vAxis.logScale          

Jika bernilai benar, akan membuat sumbu vertikal skala logaritmik. Catatan: Semua nilai harus positif.
Type: boolean
Default: false
  • vAxis.scaleType        

Properti vAxis  membuat sumbu vertikal skala logaritmik. Dapat menjadi salah satu dari berikut:
o   null - Tidak ada skala logaritmik dilakukan.
o   'log' - Skala logaritmik. Nilai-nilai negatif dan nol tidak diplot. Pilihan ini sama dengan pengaturan vAxis: { logscale: true }.
o   'mirrorLog' - Skala logaritmik di mana nilai-nilai negatif dan nol diplot. Nilai yang diplot dari angka negatif adalah negatif dari log dari nilai absolut. Nilai mendekati 0 diplot pada skala linear.
Type: string
Default: null
  • vAxis.textPosition     

Posisi teks sumbu vertikal, relatif terhadap daerah grafik. nilai-nilai yang didukung: 'out', 'in', 'none'.
Type: string
Default: 'out'
  • vAxis.textStyle          

Sebuah objek yang menentukan gaya teks sumbu vertikal. objek memiliki format ini:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Untuk warna bisa menggunakan perintah warna string dari HTML, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
  • vAxis.ticks     

Menggantikan secara otomatis Y-axis kutu dengan array yang telah ditentukan. Setiap elemen dari array harus memiliki nilai valid (seperti nomor, tanggal, datetime, atau timeOfDay), atau benda. Jika itu sebuah objek, harus memiliki properti v untuk nilai centang, dan f properti opsional yang mengandung string literal yang akan ditampilkan sebagai label.
Examples:
o   vAxis: { ticks: [5,10,15,20] }
o   vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
o   vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
o   vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Type: Array of elements
Default: auto
  • vAxis.title      

Properti vAxis yang menentukan judul untuk sumbu vertikal.
Type: string
Default: no title
  • vAxis.titleTextStyle  

Sebuah objek yang menentukan gaya teks judul sumbu vertikal. objek memiliki format ini:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Untuk warna bisa menggunakan perintah warna string dari HTML, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
  • vAxis.maxValue        

Menggerakkan nilai maks sumbu vertikal dengan nilai yang ditentukan. Diabaikan jika diatur ke nilai yang lebih kecil dari nilai data maksimum y. vAxis.viewWindow.max merupakan salah satu properti ini.
Type: number
Default: automatic
  • vAxis.minValue        

Bergerak nilai min dari sumbu vertikal dengan nilai yang ditentukan. Diabaikan jika ini diatur ke nilai yang lebih besar dari nilai data minimum y. vAxis.viewWindow.min merupakan salah satu properti ini.
Type: number
Default: null
  • vAxis.viewWindowMode     

Menentukan bagaimana skala sumbu vertikal untuk membuat nilai-nilai dalam area grafik. Nilai-nilai string berikut yang didukung:
o   'pretty' - Skala nilai vertikal sehingga maksimum dan data minimum nilai yang diberikan sedikit di dalam bagian atas dan bawah dari daerah grafik. Hal ini akan menyebabkan vaxis.viewWindow.min dan vaxis.viewWindow.max dapat diabaikan.
o   'maximized' - Skala nilai vertikal sehingga maksimum dan data minimum nilai menyentuh bagian atas dan bawah dari daerah grafik. Hal ini akan menyebabkan vaxis.viewWindow.min dan vaxis.viewWindow.max dapat diabaikan.
o   'explicit' - Menentukan nilai-nilai skala atas dan bawah dari daerah grafik.
Type: string
Default: Setara dengan 'pretty', tapi vaxis.viewWindow.min dan vaxis.viewWindow.max diutamakan jika digunakan.
  • vAxis.viewWindow   

Menentukan rentang tanam sumbu vertikal.
Type: object
Default: null
  • vAxis.viewWindow.max       

Maksimum vertikal nilai data ke render.
Diabaikan ketika vAxis.viewWindowMode adalah 'pretty' atau 'maximized'.
Type: number
Default: auto
  • vAxis.viewWindow.min       

Minimum data nilai horisontal untuk dirender.
Diabaikan ketika vAxis.viewWindowMode adalah 'pretty' atau 'maximized'.
Type: number
Default: auto
  • width  

Lebar grafik dalam piksel.
Type: number

3.1.10. Geo Chart

Loading
The google.charts.load package name is "geochart".
google.charts.load('upcoming', {'packages': ['geochart']});
The geochart visualization class name is google.visualization.GeoChart.
var visualization = new google.visualization.GeoChart(container);

Format Data
Format DataTable bervariasi tergantung pada mode tampilan yang Anda gunakan: regions, penanda, atau teks.
Wilayah mode format:
Lokasi yang dimasukkan di dalam satu kolom, ditambah satu kolom opsional seperti yang dijelaskan di sini:

1.     Lokasi wilayah [String, Dibutuhkan] - Sebuah wilayah ke hal yang penting. Semua format berikut sudah diterima. Anda dapat menggunakan format yang berbeda di baris yang berbeda:
  • Sebuah nama negara sebagai sebuah string (contohnya, "Inggris"), atau sebuah kode huruf besar ISO-3166-1 alpha-2 atau setara teks bahasa Inggris (contohnya, "GB" atau "United Kingdom").
  • Sebuah huruf besar kode wilayah ISO-3166-2 or setara teks bahasa Inggris (contohnya, "US-NJ" atau "New Jersey").
  • Sebuah kode area metropolitan. Ini adalah kode metro tiga digit yang digunakan untuk menunjuk berbagai daerah; hanya kode US yang di dukung. Catatan bahwa ini adalah tidak sama dengan kode area telepon.
  • Setiap nilai didukung oleh properti wilayah.
[
Format mode penanda
Jumlah kolom bervariasi tergantung pada format penanda yang digunakan, serta kolom opsional lainnya.
  • Lokasi penanda [Dibutuhkan]
  • Kolom pertama adalah sebuah alamat string spesifik (contohnya, "1600 Pennsylvania Ave").
  • Warna Penanda [Nomor, Opsional] Kolom berikutnya adalah kolom numerik opsional yang digunakan untuk memberikan warna kepada marker ini, berdasarkan skala yang telah ditetapkan dalam properti colorAxis.colors. Jika kolom ini tidak hadir, semua penanda akan menjadi warna yang sama. Jika kolom ini hadir, nilai null tidak diperbolehkan. Nilai-nilai yang telah diskala-kan secara relatif satu sama lain, atau benar-benar kepada nilai-nilai yang telah ditentukan di properti colorAxis.values.
  • Ukuran penanda [Nomor, Opsional] Sebuah kolom numerik opsional yang digunakan untuk menetapkan ukuran penanda, relatif terhadap ukuran penanda lainnya. Jika kolom ini tidak hadir, nilai dari kolom sebelumnya akan digunakan (atau ukuran default, jika tidak ada kolom warna yang tersedia lagi). Jika kolom ini hadir, nilai null tidak diperbolehkan.
  • Label teks [String, Dibutuhkan] Sebuah alamat string yang spesifik (contohnya, "1600 Pennsylvania Ave").
  • Ukuran teks [Nomor, Opsional] Kolom kedua adalah sebuah kolom numerik opsional yang digunakan untuk menetapkan ukuran label. Jika kolom ini tidak hadir, semua label akan menjadi ukuran yang sama.
Metode

gambar 3.5. 

Event

gambar 3.6. 

3.1.11. Grafik Anotasi
1. Loading
The google.charts.load package name is "annotationchart".
  google.charts.load("current", {packages: ['annotationchart']});
The visualization's class name is google.visualization.AnnotationChart.
  var visualization = new google.visualization.AnnotationChart(container);
2. Format Data
Anda dapat menampilkan satu atau lebih baris pada tabel Anda. Setiap baris mewakili posisi X pada tabel-yaitu, waktu spesifik; setiap baris dijelaskan oleh satu set satu sampai tiga kolom.
  • Kolom pertama adalah tanggal tipe tanggal atau tanggal waktu, dan menentukan nilai X dari titik pada grafik. Jika kolom ini adalah tipe tanggal (dan bukan tanggal-waktu) maka waktu resolusi terkecil pada sumbu X akan menjadi suatu hari.
  • Setiap baris data kemudian dijelaskan oleh satu set dari 1-3 kolom tambahan seperti dijelaskan di sini:
  • Nilai Y - [Dibutuhkan, Nomor] Kolom pertama di setiap set menjelaskan nilai dari garis pada waktu yang sesuai dari kolom pertama. Label kolom ditampilkan pada grafik sebagai judul baris tersebut.
  • Keterangan judul - [Opsional, String] Jika sebuah kolom string mengikuti kolom nilai, dan displayAnnotationsoption adalah benar, kolom ini memegang sebuah gelar singkat yang menjelaskan hal ini. Misalnya, jika baris ini merupakan suhu di Brazil, dan titik ini adalah angka yang sangat tinggi, judulnya bisa menjadi "Rekor hari terpanas".
  • Teks keterangan - [String Opsional] Jika sebuah kolom string kedua ada untuk seri ini, nilai sel akan digunakan sebagai teks deskriptif tambahan untuk titik ini. Anda harus mengatur pilihan displayAnnotations supaya benar menggunakan kolom ini. Anda dapat menggunakan tag HTML, jika Anda menetapkan allowHtml menjadi true; pada dasarnya tidak ada batas ukuran, tetapi catatan bahwa entri terlalu panjang mungkin meluap bagian layar. Anda tidak diharuskan untuk memiliki kolom ini bahkan jika Anda memiliki kolom judul penjelasan untuk hal ini. Label kolom tidak digunakan oleh grafik. Misalnya, jika ini adalah hari terpanas pada titik catatan, Anda mungkin mengatakan sesuatu seperti "Hari terdekat berikutnya adalah 10 derajat lebih dingin!".

Opsi Konfigurasi
  •  allowHtml      

Jika diatur ke true, setiap teks penjelasan yang termasuk tag HTML akan dijadikan HTML.
Tipe: boolean
Default: false
  • allValuesSuffix         

Sebuah akhiran yang akan ditambahkan ke semua nilai di dalam legenda dan label tanda di sumbu vertikal.
Tipe: string
Default: none
  • annotationsWidth      

Lebar (dalam persen) dari daerah anotasi, dari seluruh wilayah grafik. Harus menjadi satu nomor dalam kisaran 5-80.
Tipe: nomor
Default: 25
  • colors 

Warna-warna yang akan digunakan untuk garis grafik dan label-label. Sebuah Array dari string. Setiap elemen adalah string dalam format warna HTML yang valid. Misalnya 'merah' atau '#00CC00'.
Tipe: Array dari strings
Default: Warna Default
  • dateFormat    

Format yang digunakan untuk menampilkan informasi tanggal di sudut kanan atas. Format dari bidang ini adalah seperti yang ditentukan oleh kelas java SimpleDateFormat.
Tipe: string
Default: Entah 'MMMM dd, yyyy' atau 'HH: mm MMMM dd, yyyy', tergantung pada tipe dari kolom pertama (tanggal, atau waktu-tanggal, masing-masing).
  • displayAnnotations   

Jika diatur ke false, grafik akan menyembunyikan tabel anotasi, dan anotasi-anotasi dan annotationText tidak akan terlihat (tabel penjelasan juga tidak akan ditampilkan jika tidak ada penjelasan dalam data Anda, terlepas dari pilihan ini). Bila opsi ini diatur ke true, setelah setiap kolom numerik, dua kolom penjelasan string opsional dapat ditambahkan, satu untuk judul penjelasan dan satu untuk teks penjelasan.
Tipe: boolean
Default: true
  • displayAnnotationsFilter       

Jika diatur ke true, grafik akan menampilkan sebuah kontrol filter untuk menyaring penjelasan. Gunakan opsi ini ketika ada banyak penjelasan.
Tipe: boolean
Default: false
  • displayDateBarSeparator      

Kalau untuk menampilkan sebuah pemisah bar kecil (|) diantara nilai-nilai seri dan tanggal didalam legenda, di mana true yang berarti ya.
Tipe: boolean
Default: true
  • displayExactValues   

Kalau untuk menampilkan yang sudah dipersingkat, versi bulat dari nilai-nilai di atas grafik, untuk menghemat ruang; false menunjukkan bahwa hal itu mungkin. Misalnya, jika diatur ke false, 56.123,45 mungkin ditampilkan sebagai 56.12k.
Tipe: boolean
Default: false
  • displayLegendDots    

Apabila akan menampilkan titik-titik berikutnya dengan nilai-nilai dalam teks legenda, dimana true berarti ya.
Tipe: boolean
Default: true
  • displayLegendValues

Apabila untuk menampilkan nilai-nilai disorot dalam legenda, dimana yes berarti ya.
Tipe: boolean
Default: true
  • displayRangeSelector

Apabila untuk menampilkan area seleksi rentang zoom (daerah di bawah grafik), dimana false berarti tidak.
Garis luar di pemilih zoom adalah sebuah versi skala log dari seri pertama di chart, diskala-kan untuk cocok dengan ketinggian dari pemilih zoom.
Tipe: boolean
Default: true
  • displayZoomButtons 

Apabila untuk menampilkan tombol zoom ("1d 5d 1m" dan seterusnya), dimana false berarti tidak.
Tipe: boolean
Default: true
·       fill      
Sebuah nomor dari 0-100 (inklusif) menetapkan alpha dari pengisian dibawah setiap baris didalam grafik garis. 100 berarti 100% buram, dan 0 berarti tidak mengisi sama sekali. Warna pengisian adalah warna yang sama dengan baris di atas itu.
Tipe: nomor
Default: 0
  • legendPosition

Apabila untuk menempatkan legenda berwarna pada baris yang sama dengan tombol zoom dan tanggal ('sameRow'), atau pada baris baru ('newRow').
Tipe: string
Default: 'sameRow'
  • max    

Nilai maksimum untuk menunjukkan sumbu Y. Jika titik data maksimum melebihi nilai ini, pengaturan ini akan diabaikan, dan grafik akan disesuaikan untuk menunjukkan tanda centang besar berikutnya di atas titik data maksimum. Ini akan lebih diutamakan daripada maksimum sumbu Y yang ditentukan oleh scaleType.
Hal ini mirip dengan MAXVALUE di grafik inti.
Type: nomor
Default: automatic
  • min     

Nilai minimum untuk menunjukkan sumbu Y. Jika data titik minimum kurang dari nilai ini, pengaturan ini akan diabaikan, dan grafik akan disesuaikan untuk menunjukkan tanda centang besar berikutnya dibawah titik data minimum. Ini akan lebih diutamakan daripada minimum sumbu Y yang ditentukan oleh scaleType.
Hal ini mirip dengan MinValue di grafik inti.
Tipe: nomor
Default: automatic
  • numberFormats         

Menentukan pola format angka yang akan digunakan untuk memformat nilai-nilai diatas grafik. Pola harus dalam format yang ditentukan oleh kelas java DecimalFormat.
o   Jika tidak ditentukan, pola format standar yang digunakan.
o   Jika pola string tunggal yang ditentukan, digunakan untuk semua nilai.
o   Jika sebuah peta telah ditetapkan, kuncinya adalah (zero-based) indeks dari seri, dan nilai-nilainya adalah pola yang akan digunakan untuk memformat seri yang telah ditetapkan.
Anda tidak diharuskan untuk menyertakan format untuk setiap seri pada grafik; setiap seri yang tidak ditentukan akan menggunakan format default.
Jika opsi ini ditetapkan, opsi displayExactValues diabaikan.
Tipe: String, atau sebuah peta dari nomor: pasangan String
Default: automatic
  • scaleColumns

Menentukan nilai yang mana untuk menunjukkan pada sumbu Y tanda centang didalam grafik. Default adalah untuk memiliki skala tunggal di sisi kanan, yang berlaku untuk kedua seri; tetapi Anda dapat memiliki sisi yang berbeda dari grafik skala nilai-nilai seri yang berbeda.
Opsi ini mengambil array nol sampai tiga angka yang menentukan (berbasis nol) indeks seri untuk digunakan sebagai nilai skala. Di mana nilai-nilai ini menampilkan tergantung pada berapa banyak nilai-nilai yang Anda masukkan dalam array Anda:
o   Jika Anda menentukan array kosong, grafik tidak akan menampilkan nilai-nilai Y disebelah tanda centang.
o   Jika Anda menentukan satu nilai, skala dari seri yang ditunjukkan akan ditampilkan di sisi kanan dari grafik saja.
o   Jika Anda menentukan dua nilai, sebuah skala untuk seri kedua akan ditambahkan di sebelah kanan grafik.
o   Jika Anda menentukan tiga nilai, skala untuk seri ketiga akan ditambahkan ke tengah grafik.
Nilai-nilai setelah ketiga dalam array akan diabaikan.
Ketika menampilkan lebih dari satu skala, disarankan untuk mengatur opsi scaleType ke 'allfixed' atau 'allmaximized'.
Tipe: Array dari nomor-nomor
Default: Otomatis
  • scaleFormat   

Format angka yang akan digunakan untuk label sumbu centang. Default menampilkan '#' sebagai integer
Tipe: string
Default: '#'
  • scaleType       

Menetapkan nilai maksimum dan minimum yang ditampilkan pada sumbu Y. Berikut adalah opsi yang tersedia:

o   'dimaksimalkan' - Sumbu Y akan span minimum untuk nilai maksimum dari seri. Jika Anda memiliki lebih dari satu seri, gunakan allmaximized.
o    'tetap' [default] – Sumbu Y bervariasi, tergantung pada nilai-nilai data:
§  Jika semua nilai >= 0, sumbu Y akan span dari nol ke nilai data maksimum.
§  Jika semua nilai  <= 0, sumbu Y akan span dari nol ke nilai data yang minimum
§  If values are both positive and negative, the Y axis will range from the series maximum to the series minimum. Jika nilai keduanya positif dan negatif, sumbu Y akan berkisar dari seri maksimum ke seri minimum.
Untuk beberapa seri, gunakan 'allfixed'.
o   'Allmaximized' - Sama seperti 'maximized,' tetapi digunakan ketika beberapa skala ditampilkan. Kedua grafik akan dimaksimalkan dalam skala yang sama, yang berarti bahwa satu akan salah mengartikan terhadap sumbu Y, tetapi melayang di atas setiap seri akan menampilkan nilai yang benar.
o   'allfixed' - Sama seperti 'fixed', tapi digunakan ketika beberapa skala ditampilkan. Pengaturan ini menyesuaikan setiap skala untuk seri yang berlaku (menggunakan ini dalam hubungannya dengan scaleColumns).
Jika Anda menentukan min and/or pilihan max, mereka akan lebih mengutamakan nilai minimum dan maksimum ditentukan oleh jenis skala Anda.
Tipe: string
Default: 'fixed'
  • table   

Berisi opsi yang berkaitan dengan tabel penjelasan. Untuk menentukan sifat dari objek ini, Anda dapat menggunakan objek notasi literal:

var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};

Tipe: object
Default: null
  • table.sortAscending   

Jika diatur ke benar, membalikkan urutan tabel penjelasan dan menampilkannya dalam urutan dari kecil ke besar.
Tipe: boolean
Default: false
  • table.sortColumn       

Indeks kolom dari tabel penjelasan yang anotasinya akan diurutkan. Indeks harus berupa 0, untuk kolom label penjelasan, atau 1, untuk kolom penjelasan teks.
Tipe: number
Default: 0
  • thickness        

Satu angka dari 0-10 (inklusif) menentukan ketebalan garis, di mana 0 adalah yang tertipis
Tipe: nomor
Default: 0
  • zoomEndTime

Menetapkan akhir tanggal/waktu dari rentang zoom yang dipilih
Tipe: Tanggal
Default: none
  • zoomStartTime          

Set awal tanggal / waktu dari rentang zoom yang dipilih.
Tipe: Tanggal
Default: tidak ada
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)