3.1 BUBBLE CHART
3.1.1 PADA PERANGKAT JSFIDDLE
Jsfiddle 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 jsfiddle, 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: 900px;
height: 500px;"></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: 900px;
height: 500px;"></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 grafik 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 grafik 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
|
• 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
|
|
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 spesifik 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: 500px;"></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: 500px;"></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 grafik.
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 grafik 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.
|
|
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.
|
|
error
|
keluar
bila terjadi kesalahan,
|
|
ready
|
grak siap
metode panggilan eksternal.
|
|
regionClick
|
mengklik
wilayah tertentu
|
|
select
|
Untuk
mempelajari apa yang telah dipilih
|
Annotation chart merupakan time series line chart yang mendukung annotation chart. Berbeda dengan anotation timeline, yang dimana menggunakan flash, 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: 500px;'>
</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
|
• 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
|
No comments:
Post a Comment