Mengolah PIkiran: Februari 2017

1. Bubble chart

CONTOH 1

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

gambar 4.1.

Source code HTML

<head>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

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: 12,

fontName: 'Times-Roman',

color: 'green',

bold: true,

italic: true

}

};

var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Label pada grafik di atas sulit untuk dibaca, dikarenakan ruang putih di sekitar mereka. Itulah yang disebut aura, dan jika Anda lebih memilih grafik Anda tanpa mereka, Anda dapat mengaturnya dengan menambahkan auraColor menjadi 'none'.

gambar 4.2.

Source code HTML

<head>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

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: {

auraColor: 'none', // menghilangkan area putih tulisan

}

};

var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

CONTOH 2

gambar 4.3.

Source code HTML

<Html>

<Head>

<Title> Google Charts Tutorial </ title>

google.charts.load ( 'sekarang', {paket: [ 'corechart']});

</ Script>

</ Head>

<Body>

Fungsi drawChart () {

// Tentukan grafik yang akan ditarik.

var data = baru google.visualization.DataTable ();

data.addColumn ( 'string', 'Id');

data.addColumn ( 'jumlah', 'Umur');

data.addColumn ( 'jumlah', 'Berat');

data.addRows ([

[ 'Robert', 8, 12],

[ 'Mohan', 4, 5,5],

[ 'Ramesh', 11, 14],

[ 'Julie', 4, 5],

[ 'Sohan', 3, 3,5],

[ 'Karim', 6,5, 7]

]);

// Mengatur pilihan grafik

Pilihan var = { 'title': 'Umur vs Berat',

'Width': 550,

'Tinggi': 400

};

// Instantiate dan menarik grafik.

var grafik = baru google.visualization.BubbleChart (document.getElementById ( 'wadah'));

chart.draw (data, opsi);

}

google.charts.setOnLoadCallback (drawChart);

</ Script>

</ Body>

</ Html>

2. Geo chart

CONTOH 3

Peta dunia

gambar 4.4.

Source code HTML

<html>

<head>

google.charts.load('upcoming', {'packages': ['geochart']});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

var data = google.visualization.arrayToDataTable([

['Country', 'Popularity'],

['South America', 600],

['Canada', 500],

['France', 600],

['Russia', 700],

['Australia', 600]

]);

var options = { displayMode: 'text' };

var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Ada beberapa pilihan untuk mengubah warna GeoChart:

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

backgroundColor: warna latar belakang untuk grafik.

datalessRegionColor: utuk mewarnai suatu wilayah.

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

colorAxis menentukan rentang warna untuk nilai data. Dalam array colorAxis, elemen pertama adalah warna yang diberikan kepada nilai terkecil di dataset, dan elemen terakhir adalah warna yang diberikan dengan nilai terbesar dalam dataset. Jika 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.

gambar 4.5.

Source code HTML

<html>

<head>

google.charts.load('upcoming', {'packages':['geochart']});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

var data = google.visualization.arrayToDataTable([

['Country', 'Latitude'],

['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],

['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],

['Canary Islands', 28], ['Cape Verde', 15],

['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],

['Comoros', -12], ['Cote d\'Ivoire', 6],

['Democratic Republic of the Congo', -3], ['Djibouti', 12],

['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],

['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],

['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],

['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],

['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],

['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],

['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],

['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],

['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],

['São Tomé and Principe', 0], ['Senegal', 15],

['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],

['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],

['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],

['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],

['Zimbabwe', -18]

]);

var options = {

region: '002', // Africa

colorAxis: {colors: ['#00853f', 'black', '#e31b23']},

backgroundColor: '#81d4fa',

datalessRegionColor: '#f8bbd0',

defaultColor: '#f5f5f5',

};

var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));

chart.draw(data, options);

};

</script>

</head>

<body>

</body>

</html>

CONTOH 4

Peta Indonesia

gambar 4.6.

Source Code HTML

html>

<head>

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {

var data = google.visualization.arrayToDataTable([

['Region', 'Population (fiktif)'],

['Jakarta', 69043],

['East Java', 24813],

['West Java', 15712],

['Yogyakarta', 10937],

['Central Java', 10345],

['North Sumatra', 9470],

['Banten', 3405],

['South Sumatra', 3181],

['Riau', 2898],

['Bali', 2830],

['South Sulawesi', 2811],

['Lampung', 4000],

['West Sumatra', 3000],

['East Kalimantan', 2000],

['Central Sulawesi', 2953],

['West Kalimantan', 10666],

['Riau Islands', 5000],

['South Kalimantan', 4367],

['North Sulawesi', 6790],

['West Nusa Tenggara', 9932],

['East Nusa Tenggara', 6654],

['Papua', 2000],

['Central Kalimantan', 7549],

['Aceh', 6660],

['Bengkulu', 4642],

['Jambi', 3456],

['Maluku', 5432],

['Gorontalo', 10000],

['South East Sulawesi', 8096],

['North Maluku', 4567],

['Bangka Belitung Islands', 2345],

['West Papua', 1085]

]);

var options = {

region: 'ID',

displayMode: 'markers',

colorAxis: {colors: ['green', 'blue']}

};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(data, options);

};

</script>

</head>

<body>

</body>

</html>

3. Annotation Chart

CONTOH 5

gambar 4.7.

Source Code HTML

<html>

<head>

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

google.charts.setOnLoadCallback(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.getElementById('chart_div'));

var options = {

displayAnnotations: true

};

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Mengolah PIkiran

Senin, 06 Februari 2017

BAB 5 KESIMPULAN

BAB 4 CONTOH KASUS