Bab III Desain Pemodelan Grafik

BAB III

PERANGKAT LUNAK YANG DIGUNAKAN

3.1 BUBBLE CHART

3.1.1           PADA PERANGKAT JSFIDDLE

Jsddle adalah editor online untuk belajar HTML,CSS dan javascript, termasuk jQUery dan libary javascript lainnya. Saat anda membuka JsFiddle, akant ersedia 4 panel. 3 panel pertama unuk mengetik HTML, CSS dan javascript dan panel keempat adalah panel Result yang merupakan hasil output dari kombinasi 3 bahasa tadi. JSFiddle juga sudah dilengkapi dengan Tidy Up yang akan merapikan source code dan JSlint yagn akan mengecek kesalahan coding di javascript. Kelebihan lain dari jsddle, source code bisa dishare lewat link atau jejaring social.

berikut merupakan source kode Bubblechart pada perangkat JSFIDDLE

Korelasi antara harapan hidup, tingkat kesuburan dan populasi beberapa negara di dunia (2010)

< html >

< head >

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

<script type="text/javascript"> google.charts.

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

setOnLoadCallback(drawSeriesChart); function drawSeriesChart() { var data = google

.visualization.arrayToDataTable([

[’ID’, ’Life Expectancy’, ’Fertility Rate’

, ’Region’, ’Population’],

[’CAN’, 80.66, 1.67 ,

’North America’, 33739900] ,

[’DEU’, 79.84, 1.36 , ’Europe’, 81902307] ,

[’DNK’, 78.6, 1.84 , ’Europe’, 5523095] ,

[’EGY’, 72.73, 2.78 ,

’Middle East’, 79716203] ,

[’GBR’, 80.05, 2 ,

’Europe’, 61801570] ,

[’IRN’, 72.49, 1.7 ,

’Middle East’, 73137148] ,

[’IRQ’, 68.09, 4.77 ,

’Middle East’, 31090763] ,

[’ISR’, 81.55, 2.96 ,

’Middle East’, 7485600] ,

[’RUS’, 68.6, 1.54 ,

’Europe’, 141850000] ,

[’USA’, 78.09, 2.05 , ’North America’, 307007000] ]) ; var options = { title: ’Correlation between life expectancy, fertility rate’ + ’and population of some world countries (2010) ’, hAxis: {title: ’Life Expectancy’}, vAxis: {title: ’Fertility Rate’}, bubble: {textStyle: {fontSize: 11}} } ; var chart = new google.visualization.BubbleChart ( document.getElementById(’series_chart_div’)); chart.draw(data, options); }

< /script >

< /head >

< body >

<div id="series_chart_div" style="width: 900 px; height: 500 px;"></div >

< /body >

< /html >

COLOR BY NUMBER

Kita dapat menggunakan color by axis, pilihan warna bubbles chart dapat di lihat di contoh dibawah ini

Berikut merupakan source kode untuk perubahan warna oleh nomor::

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

<script type="text/javascript"> google.charts.load("current",

{ packages:["corechart"]}); google.charts. setOnLoadCallback(drawChart); function drawChart() { var data = google.

visualization.arrayToDataTable([

 

    [’ID’, ’X’, ’Y’, ’Temperature’],

[,	80,	167,	120] ,
[,	79,	136,	130] ,
[,	78,	184,	50] ,
[,	72,	278,	230] ,
[,	81,	200,	210] ,
[,	72,	170,	100] ,
[,	68,	477,	80]	]) ;

var options = {

colorAxis: { colors : [’yellow’, ’red’]}

} ; var chart = new

google.visualization.BubbleChart ( document.getElementById

( ’chart_div’)); chart.draw

(data, options);          }

< /script >

< /head >

< body > <div id="chart_div" style="width: 900 px; height: 500 px;"></div > < /body >

< /html >

COSTUMIZING LABELS

Di sini kita dapat mengubah tampilan, ukuran dan warna dengan perintah bubble.textstyle.

Berikut merupakan pembahasan source kode untuk merubah label.

var options = {

title: ’Correlation between life

expectancy, fertility rate ’ +

’and population of some world countries (2010) ’,

hAxis: {title: ’Life Expectancy’}, vAxis: {title: ’Fertility Rate’}, bubble: { textStyle: { fontSize: 12 , fontName: ’Times-Roman’,

color: ’green’, bold: true,

italic: true

}

}

} ;

Label pada grak di atas sulit untuk dibaca, dan salah satu alasan adalah jarak di sekitar koding yang dibuat. Itulah yang disebut aura, dan jika kita lebih memilih grak tanpa jarak tersebut, kita dapat mengatur bubble.textStyle.auraColor menjadi ’none’

CONFIGURATION OPTIONS

animation.duration	Durasi dari animasi per milliseconds
animation.easing	mempermudah pengaplikasian animasi
animation.startup	Startup dalam animasi yang dijalankan
axisTitlesPosition	menempatkan judul axis dalam area chart
backgroundColor	memberi warna pada bagian background
backgroundColor.stroke	lebar batas(dalam pixel)
backgroundColor.ll	warna pada baguan chart
Bubble	objek visual berbentuk bubble
bubble.opacity	tingkat opacity pada bubble
bubble.stroke	warna dari sisi gelembung
bubble.textStyle	text yang ada dalam bubble
ChartArea	objek visual berbentuk chart area
chartArea.backgroundColor	warna latar dari chartarea
chartArea.left	jarak dari object chart area pada sisi kiri batas
chartArea.top	jarak dari objek pada bagian atas batas
chartArea.width	lebar dari objek chartarea
chartArea.height	tinggi dari objek chartarea
Colors	warna dari elemen chart
ColorAxis	warna dari colom dan skala
colorAxis.minValue	batas minimum dari warna chart
colorAxis.maxValue	batas maksimal dari warna chart
colorAxis.values	mengontrol pengendalian nilai warna
colorAxis.colors	warna untuk axis
colorAxis.legend	warna gradasi dari tulisan
colorAxis.legend.position	posisi dari tulisan
colorAxis.legend.textStyle	tipe huruf dalam tulisan yang dibuat
colorAxis.legend.numberFormat	format nomor dalam tulisan
enableInteractivity	membuat chart dapat melakukan user-based event
explorer.actions	menjalankan action yang disediakan oleh gogglechart
explorer.axis	action bagi user membuka opsi explore
explorer.keepInBounds	user dapat menggeser area yang dipilih
explorer.maxZoomIn	titik maksimum user untuk dapat melakukan zoom-in
explorer.maxZoomOut	titik maksimum user untuk melakukan zoom out
explorer.zoomDelta	user dapat melakukan zoom in dan out
FontSize	ukuran huruf
FontName	ukuran nama dari chart

hAxis.gridlines.units        Menimpa format default hAxis.minorGridlines         untuk mengkongurasi gridlines hAxis.minorGridlines.color              Warna gridlines kecil horisontal dalam area grak hAxis.minorGridlines.count        Jumlah petak kecil horisontal antara dua petak biasa hAxis.minorGridlines.units     digunakan dengan grak dihitung minorGridlines hAxis.logScale           membuat sumbu horisontal skala logaritmik hAxis.scaleType  membuat horisontal sumbu skala logaritmik.

hAxis.textPosition           Posisi teks sumbu horisontal hAxis.textStyle            menentukan gaya teks sumbu horisontal.

hAxis.ticks       Menggantikan X-axis dengan array yang ditentukan hAxis.title                 menentukan judul sumbu horisontal.

hAxis.titleTextStyle         menentukan gaya teks judul sumbu horisontal hAxis.maxValue               nilai maks sumbu horisontal dengan nilai yang ditentukan hAxis.minValue     nilai min sumbu horisontal dengan nilai yang ditentukan hAxis.viewWindowMode               skala sumbu horisontal hAxis.viewWindow              rentang tanam sumbu horisontal. hAxis.viewWindow.max     Maksimum horisontal nilai data ke render.

hAxis.viewWindow.min  Minimum data nilai horisontal dari data ke render

height             Ketinggian grak legend             mengkongurasi berbagai aspek legenda.

legend.alignment   Penyelarasan legenda legend.maxLines   Jumlah maksimum baris dalam legenda legend.position   Posisi legenda

legend.textStyle              Sebuah objek yang menentukan gaya teks legenda selectionMode          dapat memilih beberapa titik data series                 Sebuah objek objek, di mana kuncinya adalah nama seri sizeAxis           mengkongurasi nilai ukuran gelembung sizeAxis.maxSize         radius maksimum gelembung terbesar sizeAxis.maxValue             Nilai Ukuran yang akan dipetakan sizeAxis.minSize  radius mininum dari gelembung terkecil sizeAxis.minValue     Nilai Ukuran yang akan dipetakan ke sizeAxis sortBubblesBySize           mengurutkan bubble berdasarkan ukuran

theme             memaksimalkan area grak title                 Teks untuk menampilkan di atas bagan.

titlePosition    menempatkan judul grak titleTextStyle  menentukan gaya teks judul tooltip         mengkongurasi berbagai elemen tooltip. tooltip.isHtml                 menggunakan HTML-diberikan tooltips tooltip.textStyle                menentukan gaya teks tooltip tooltip.trigger           tooltip tampil saat user melayang di atas elemen

vAxis                mengkongurasi berbagai elemen sumbu vertikal vAxis.baseline               menentukan dasar untuk sumbu vertikal vAxis.baselineColor              Menentukan warna dasar vAxis.direction        nilai-nilai sepanjang sumbu vertikal tumbuh vAxis.format        bagian dari set pola ICU vAxis.gridlines                 mengkongurasi gridlines pada sumbu vertikal vAxis.gridlines.color          Warna gridlines vertikal di dalam area grak vAxis.gridlines.count    Jumlah gridlines vertikal di dalam area grak.

vAxis.gridlines.units         Menimpa format default vAxis.minorGridlines         mengkongurasi gridlines kecil vAxis.minorGridlines.color              Warna gridlines kecil vertikal vAxis.minorGridlines.count        Jumlah petak kecil vertikal vAxis.minorGridlines.units                format untuk tahun, bulan, hari, jam dst vAxis.logScale                  membuat sumbu vertikal skala logaritmik vAxis.scaleType       Properti membuat sumbu vertikal skala logaritmik vAxis.textPosition          Posisi teks sumbu vertikal vAxis.textStyle                gaya teks sumbu vertikal.

vAxis.ticks        Menggantikan Y-axis dengan array vAxis.title            menentukan judul untuk sumbu vertikal. vAxis.titleTextStyle         gaya teks judul sumbu vertikal vAxis.maxValue        Menggerakkan nilai maks sumbu vertikal vAxis.minValue  nilai min dari sumbu vertikal dengan nilai yang ditentukan vAxis.viewWindowMode        sumbu vertikal untuk membuat nilai dalam area grak.

vAxis.viewWindow          Menentukan rentang tanam sumbu vertikal. vAxis.viewWindow.max      Maksimum vertikal nilai data ke render. vAxis.viewWindow.min      Minimum horisontal untuk membuat nilai data. width              Lebar grak, dalam piksel.

METHODS

draw(data, options)	Menggambar chart
getAction(actionID)	memanggil action objek tooltip
getBoundingBox(id)	memanggil objek dalam elemen chart
getChartAreaBoundingBox()	memanggil konten dalam objek
getChartLayoutInterface()	memanggil objek berinformasi
getHAxisValue(position, optional_axis_index)	memanggil nilai horizontal
getImageURI()	memanggil chart dengan gambar
getSelection()	memanggil array dari chart
getVAxisValue(position, optional_axis_index)	memanggil nilai vertical chart

EVENTS

animationnish	Keluar ketika animasi transisi selesai.
click	Keluar ketika pengguna mengklik dalam grak.
error	Keluar bila terjadi kesalahan
onmouseover	Keluar saat user mouses lebih entitas visual.
onmouseout	grak siap metode panggilan eksternal
ready	grak siap metode panggilan eksternal.
select	Keluar saat user sebuah entitas visual

3.2 GEOCHART

3.2.1           PADA PERANGKAT MARKER GEOCHART

Marker style merender di lingkaran pada lokasi yang spesik dalam geo chart dengan warna dan ukuran yang kita tentukan.

< html >

< head >

<script type=’text/javascript’ src=’https:// www.gstatic.com/charts/loader.js’></script> <script type=’text/javascript’> google.charts.load

(’upcoming’, {’packages’: [ ’geochart’]}); google.charts.setOn LoadCallback(drawMarkersMap); function drawMarkersMap() { var data = google.

visualization.arrayToDataTable([

[’City’,  ’Population’, ’Area’],
[’Rome’,          2761477,	1285.31] ,
[’Milan’,          1324110,	181.76] ,
[’Naples’,         959574,	117.27] ,
[’Turin’,           907563,	130.17] ,
[’Palermo’,      655875,	158.9] ,
[’Genoa’,         607906,	243.60] ,
[’Bologna’,       380181,	140.7] ,
[’Florence’,      371282,	102.41] ,
[’Fiumicino’, 67370,	213.44] ,
[’Anzio’,           52192,	43.43] ,
[’Ciampino’,    38262,	11]

]) ; var options = { region: ’IT’, displayMode: ’markers’, colorAxis: { colors : [’green’, ’blue’]}

} ; var chart = new google.visualization.GeoChart(document.

getElementById(’chart_div’)); chart.draw(data, options);

} ;

< /script >

< /head >

< body >

<div id="chart_div" style="width:

900px; height: 500 px;"></div >

< /body >

< /html >

Displaying Proportional Markers

Biasanya, geocharts penanda menampilkan nilai penanda terkecil sebagai titik minimal. Jika kita ingin menampilkan nilai-nilai penanda proporsional (katakanlah, karena mereka persentase), kita dapat menggunakan opsi sizeAxis untuk mengatur MinValue dan MAXVALUE eksplisit.

Sebagai contoh, berikut adalah peta Eropa Barat dengan populasi dan daerah untuk tiga negara: Perancis, Jerman, dan Polandia. Populasi adalah semua angka mutlak (misalnya, 65 juta untuk Perancis) tetapi daerah adalah semua persentase dari keseluruhan: Perancis penanda berwarna violet karena populasi lumayan, tetapi berukuran 50 (dari kemungkinan 100) karena mengandung 50% dari luas gabungan.

Dalam kode ini, kita menggunakan sizeAxis untuk menentukan ukuran penanda dalam kisaran dari 0 sampai 100. Kami juga menggunakan colorAxis dengan nilai-nilai RGB untuk menunjukkan populasi sebagai berbagai warna dari oranye menjadi biru, spektrum yang akan bekerja dengan baik untuk pengguna dengan kekurangan penglihatan warna. Akhirnya, kita tentukan Eropa Barat dengan wilayah 155, per "Hirarki Konten dan Kode" nanti dalam dokumen ini.

< html >

< head >

<script type=’text/javascript’ src= ’https://www.

gstatic.com/charts/loader.js’></script> <script type=’text/javascript’> google.charts.load(’upcoming’, {’packages’: [ ’geochart’]}); google.charts. setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() { var data = google.

visualization.arrayToDataTable([ [’Country’,           ’

Population’, ’Area Percentage’],

[’France’,       65700000, 50] ,

[’Germany’, 81890000, 27] ,

[’Poland’,       38540000, 23]

]) ; var options = { sizeAxis: { minValue: 0, maxValue: 100 } , region: ’155’, // Western Europe displayMode: ’markers’, colorAxis: {colors: [ ’#e7711c’,

’#4374e0’]} // orange to blue

} ; var chart = new google.visualization.

GeoChart(document.

getElementById(’chart_div’)); chart.draw(data, options);

} ;

< /script >

< /head >

< body >

<div id="chart_div" style=" width: 900px; height: 500 px;"></div >

< /body >

< /html >

TEXT GEOCHART

Kita juga dapat melapisi label kedalam geochart yang dibuat dengan cara memasukkan code displaymode:text

var data = google.visualization.

arrayToDataTable([ [’Country’, ’Popularity’],

[’South America’, 600] ,

[’Canada’, 500] ,

[’France’, 600] ,

[’Russia’, 700] ,

[’Australia’, 600]

]) ;

var options = { displayMode: ’text’ } ;

MEMBERI WARNA PADA CHART

Tersedia beberapa pilihan untuk dapat memberi warna pada GeoCharts:

1.    colorAxis: spektrum warna yang akan digunakan untuk daerah di DataTable.

2.    backgroundColor: warna latar belakang untuk grak.

3.    datalessRegionColor: warna untuk menetapkan ke daerah tanpa data yang terkait.

4.    defaultColor: warna untuk menetapkan ke daerah dalam DataTable yang nilainya baik nol atau tidak ditentukan.

Opsi colorAxis sangat penting karena itu menentukan rentang warna untuk nilai data Anda. Dalam array colorAxis, elemen pertama adalah warna yang diberikan kepada nilai terkecil di dataset Anda, dan elemen terakhir adalah warna yang diberikan dengan nilai terbesar dalam dataset. Jika kita ingin menentukan lebih dari dua warna, interpolasi akan terjadi di antara mereka. Dalam grak berikut, kita akan menggunakan semua empat pilihan. The colorAxis digunakan untuk menampilkan Afrika dengan warna bendera pan-Afrika, dengan menggunakan garis lintang dari negara-negara: dari merah di utara, melalui hitam, hijau di selatan. Opsi backgroundColor digunakan untuk mewarnai latar belakang biru muda, datalessRegionColor untuk mewarnai negara-negara non-Afrika yang merah muda, dan defaultColor untuk Madagaskar.

DATA FORMAT

Format DataTable bervariasi tergantung pada mode tampilan yang Anda gunakan: daerah, marker, atau teks. Format modus daerah Lokasi yang dimasukkan dalam satu kolom, ditambah satu kolom opsional seperti dijelaskan di sini:

Lokasi wilayah [String, Diperlukan] - Sebuah wilayah untuk menyorot. Semua format berikut diterima. kita dapat menggunakan format yang berbeda dalam baris yang berbeda

Setiap nilai didukung oleh properti daerah. warna Region - Sebuah kolom numerik opsional digunakan untuk memberikan warna kepada daerah ini, berdasarkan skala ditetapkan dalam properti colorAxis.colors. Jika kolom ini tidak hadir, semua daerah akan menjadi warna yang sama. Jika kolom hadir, nilai null tidak diperbolehkan. Nilai-nilai yang skala relatif terhadap nilai-nilai sizeAxis.minValue / sizeAxis.maxValue, atau nilai yang ditetapkan dalam properti colorAxis.values, jika disediakan.

Format modus marker

Jumlah kolom bervariasi tergantung pada format penanda digunakan, serta kolom opsional lainnya.

Lokasi penanda Kolom pertama adalah alamat string tertentu (misalnya, "1600 Pennsylvania Ave"). ATAU

Dua kolom pertama adalah numerik, dimana kolom pertama adalah lintang, dan kolom kedua adalah bujur.

CONFIGURATIONS OPTIONS

BackgroundColor	Warna latar belakang untuk wilayah utama grak.
backgroundColor.ll	Grak mengisi warna, sebagai string warna HTML.
backgroundColor.stroke	Warna perbatasan grak.
backgroundColor.strokeWidth	lebar perbatasan, dalam piksel.
ColorAxis	menentukan pemetaan nilai kolom warna
colorAxis.minValue	menentukan nilai minimum untuk data bagan warna.
colorAxis.maxValue	menetapkan nilai maksimum untuk data bagan warna.
colorAxis.values	mengontrol nilai yang berhubungan dengan warna.
colorAxis.colors	Warna untuk menetapkan nilai-nilai dalam visualisasi.
datalessRegionColor	untuk menetapkan ke daerah tanpa data yang terkait.
defaultColor	titik data memiliki nilai nol atau tidak ditentukan.
displaymode	Format DataTable sesuai
domain	geochart sedang disajikan dari daerah ini.
enableRegionInteractivity	Jika benar, memungkinkan interaktivitas wilayah.
forceIFrame	Menarik grak dalam sebuah frame inline.
height	Ketinggian visualisasi, dalam piksel
keepAspectRatio	geochart akan ditarik pada ukuran terbesar
legend	untuk mengkongurasi berbagai aspek
legend.numberFormat	Sebuah string format untuk label numerik.
legend.textStyle	Sebuah objek yang menentukan gaya teks legenda.
region	pembagian wilayah dalam geochart.
magnifyingGlass	mengkongurasi berbagai aspek kaca pembesar.
magnifyingGlass.enable	ketika user ada selama penanda berantakan
magnifyingGlass.zoomFactor	Faktor zoom kaca pembesar.
markerOpacity	Opacity dari spidol
resolusi	Resolusi perbatasan geochart.
sizeAxis	nilai yang berhubungan dengan size gelembung
sizeAxis.maxSize	radius maksimum gelembung terbesar
sizeAxis.maxValue	Nilai Ukuran yang akan dipetakan
sizeAxis.minSize	radius mininum dari gelembung terkecil
sizeAxis.minValue	Nilai Ukuran yang akan dipetakan
tooltip	untuk mengkongurasi berbagai elemen tooltip
tooltip.textStyle	Sebuah objek yang menentukan gaya teks tooltip.
tooltip.trigger	Interaksi pengguna yang menyebabkan tooltip
width	Lebar visualisasi, dalam piksel.

 

 

METHOD

 

clearChart ()	Membersihkan grak
draw(data, options)	Menarik grak.
getImageURI ()	Mengembalikan grak serial sebagai gambar
getSelection ()	Mengembalikan array entitas grak yang dipilih.
setSelection ()	Memilih entitas grak yang ditentukan.

 

 

EVENTS

error	keluar bila terjadi kesalahan,
ready	grak siap metode panggilan eksternal.
regionClick	mengklik wilayah tertentu
select	Untuk mempelajari apa yang telah dipilih

3.3 ANNOTATION CHART

Annotation chart merupakan time series line chart yang mendukung annotation chart. Berbeda dengan anotation timeline, yang dimana menggunakan ash, annotation chart merupakan SVG/VML dan tetap positif bila memungkinkan.

3.3.1           PADA PERANGKAT JSFIDDLE

< html >

< head >

<script type="text/javascript" src="https://www.gstatic.com/charts /loader.js"></script> <script type=’text/javascript’> google.charts.load(’current’, { ’packages’:[’annotationchart’ ]})

; google.charts.set OnLoadCallback(drawChart); function drawChart() { var data = new google.

visualization.DataTable() ; data.addColumn(’date’, ’Date’); data.addColumn(’number’ , ’Kepler-22b mission’); data.addColumn(’string’, ’Kepler title’); data.addColumn(’string’, ’Kepler text’); data.addColumn(’number’, ’Gliese 163 mission’); data.addColumn(’string’, ’Gliese title’); data.addColumn(’string’, ’Gliese text’); data.addRows([

[new Date(2314, 2, 15), 12400 , undefined, undefined, 10645 , undefined, undefined], [new Date(2314, 2, 16), 24045 , ’Lalibertines’, ’First encounter’, 12374 , undefined, undefined], [new Date(2314, 2, 17) , 35022, ’Lalibertines’, ’They are very tall’,

15766, ’Gallantors’, ’First Encounter’],

[new Date(2314, 2, 18), 12284, ’Lalibertines’,

’Attack on our crew!’, 34334, ’Gallantors’,

’Statement of shared principles’],

[new Date(2314, 2, 19), 8476, ’Lalibertines’,

’Heavy casualties’, 66467, ’Gallantors’, ’Mysteries revealed’],

[new Date(2314, 2, 20), 0 ,

’Lalibertines’, ’All crew lost’

, 79463, ’Gallantors’, ’Omniscience achieved’] ]) ; var chart = new google.visualization.

AnnotationChart(document.get

ElementById(’chart_div’)); var options = { displayAnnotations: true } ; chart.draw(data, options); }

< /script >

< /head >

< body >

<div id=’chart_div’ style=’width:

900px; height: 500 px;’ >

< /div >

< /body >

< /html >

CONFIGURATION OPTIONS

allowHtml	setiap penjelasan teks adalah HTML.
allValuesSux	ditambahkan ke semua nilai dalam legenda
annotationsWidth	Lebar dari daerah anotasi
color	Warna untuk jalur grak dan label
Dateformat	informasi tanggal di kanan atas
displayAnnotations	grak akan menyembunyikan meja anotasi
displayAnnotationsFilter	grak akan menampilkan kontrol lter
displayDateBarSeparator	untuk menampilkan bar pemisah kecil
displayExactValues	untuk menghemat ruang

 

 

displayLegendDots          titik dengan nilai dalam teks legenda displayLegendValues      nilai-nilai disorot dalam legenda displayRangeSelector              akan menampilkan area seleksi rentang zoom displayZoomButtons        akan menampilkan tombol zoom

max                 Nilai maks untuk menunjukkan pada sumbu Y min  Nilai min untuk menunjukkan pada sumbu Y

numberFormats               pola format angka untuk memformat nilai scaleColumns         nilai untuk menunjukkan pada sumbu Y scaleFormat        format angka untuk label centang sumbu scaleType        Menetapkan nilai maksimum dan minimum table    Berisi opsi yang berkaitan dengan tabel penjelasan. table.sortAscending      membalikkan urutan tabel penjelasan table.sortColumn         Indeks kolom tabel penjelasan anotasi diurutkan. thickness      menentukan ketebalan garis, di mana 0 adalah tertipis. zoomEndTime    Set akhir tanggal / waktu rentang zoom yang dipilih. zoomStartTime       Set awal tanggal / waktu rentang zoom yang dipilih.

 

METHODS

clearChart ()	Membersihkan grak
draw	Menarik grak.
getContainer ()	Mengambil pegangan elemen kontainer
getSelection ()	satu sel dapat dipilih oleh pengguna.
hideDataColumns	Menyembunyikan seri data dari grak
setVisibleChartRange	Menetapkan kisaran dengan kisaran tertentu
showDataColumns	Menunjukkan seri data tertentu dari grak
rangechange	keluar saat pengguna mengubah slider
Ready	grak siap metode panggilan eksternal.
select	Untuk mempelajari apa yang telah dipilih