Grafik seperti yang terlihat pada halaman posting ini adalah grafik bubble (Chart Bubble) dibuat menggunakan kode Jsapi Visualization Google kode. Tampilan grafik dibuat dengan visualisasi ini berbeda dengan grafik dibuat menggunakan microsoft office excel atau excel karena tampilannya sangat hidup.
Grafrik Bubble yang terlihat di atas adalah hasil dari kode di bawah ini. Cara membuatnya dapat membaca artikel berikut ini
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['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)- (Korelasi antara angka harapan hidup, angka kesuburan populasi beberapa negara) tahun 2010',
hAxis: {title: 'Life Expectancy (angka harapan hidup)'},
vAxis: {title: 'Fertility Rate (angka kesuburan)'},
bubble: {textStyle: {fontSize: 11}}
};
// Create and draw the visualization.
var chart = new google.visualization.BubbleChart(
document.getElementById('visualization'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization" style="height: 400px; width: 600px;">
</div>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
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)- (Korelasi antara angka harapan hidup, angka kesuburan populasi beberapa negara) tahun 2010',
hAxis: {title: 'Life Expectancy (angka harapan hidup)'},
vAxis: {title: 'Fertility Rate (angka kesuburan)'},
bubble: {textStyle: {fontSize: 11}}
};
// Create and draw the visualization.
var chart = new google.visualization.BubbleChart(
document.getElementById('visualization'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization" style="height: 400px; width: 600px;">
</div>
Keterangan:
Kode atau teks latar berwarna putih adalah data yang akan muncul ketika pengguna menyorot salah satu lingkaran dalam grafik dengan mouse.
Kode atau teks latar berwarna putih adalah data yang akan muncul ketika pengguna menyorot salah satu lingkaran dalam grafik dengan mouse.
