Data Visualization
(
3160717 )
Practical and Source Codes
<!DOCTYPE HTML>
<html>
<head>
<title>Google API Bubble chart</title>
<meta charset="utf-8">
<meta name="author" content="SidPro" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Using Google Charts API Basics draw chart(other type) bubble chart" />
<meta name="keywords" content="Google,API,Chart,Bubble Chart,Bubble" />
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<h2>Using Google Charts API Basics draw chart(other type) bubble chart</h2>
<div id="chart" style="width: 900px; height: 500px"></div>
</body>
<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)',
curveType: 'none',
backgroundColor: '#2a2a2a',
colors: ['#51cda0', '#6d78ad'],
titleTextStyle: { color: 'white', bold: true, fontSize: 20, italic: false },
hAxis: {
title: 'Life Expectancy',
titleTextStyle: { color: 'white', bold: false, italic: false },
textStyle: { color: 'white', bold: false, italic: false },
baselineColor: '#51cda0'
},
vAxis: {
title: 'Fertility Rate',
titleTextStyle: { color: 'white', bold: false, italic: false },
baselineColor: 'white',
gridlines: { color: 'gray' },
textStyle: { color: 'white', bold: false, italic: false }
},
animation: { duration: 1000, startup: true, easing: 'linear' },
tooltip: { textStyle: { color: '#871b47' }, showColorCode: true },
bubble: { textStyle: { color: 'white', fontSize: 11 } },
legend: { textStyle: { color: 'white', fontSize: 16 } }
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</html>
No comments:
Post a Comment