 |
| ilustrasi |
Kali ini Cyber4rt akan menyediakan cara yang cukup sederhana untuk memvisualisasikan data di website Anda. Dari grafik garis sederhana sampai yang kompleks. Anda dapat mengisi data Anda dengan mudah yang memanfaatkan jsapi dari Google.
PIE CHART
Demo:
http://blog.cyber4rt.com/p/pie-chart.html
Code:
<html>
<title>Cyber4rt Pie Charts</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Visits');
data.addRows([
['Jakarta', 84000],
['Surabaya', 63600],
['Bandung', 52900],
['Yogyakarta', 48300],
['Semarang', 38200],
['Medan', 24700],
['Makassar', 14500],
['Depok', 2900],
['Kuala Lumpur', 2800]
]);
var options = {'title':'Demographics City visitors for Cyber4rt',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('cyber4rt_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="cyber4rt_chart"></div>
</body>
</html>
<title>Cyber4rt Pie Charts</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Visits');
data.addRows([
['Jakarta', 84000],
['Surabaya', 63600],
['Bandung', 52900],
['Yogyakarta', 48300],
['Semarang', 38200],
['Medan', 24700],
['Makassar', 14500],
['Depok', 2900],
['Kuala Lumpur', 2800]
]);
var options = {'title':'Demographics City visitors for Cyber4rt',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('cyber4rt_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="cyber4rt_chart"></div>
</body>
</html>
BAR CHART
Demo:
http://blog.cyber4rt.com/p/bar-chart.html
Code:
<html>
<title>Cyber4rt Bar Charts</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Visits');
data.addRows([
['Jakarta', 84000],
['Surabaya', 63600],
['Bandung', 52900],
['Yogyakarta', 48300],
['Semarang', 38200],
['Medan', 24700],
['Makassar', 14500],
['Depok', 2900],
['Kuala Lumpur', 2800]
]);
var options = {'title':'Demographics City visitors for Cyber4rt',
'width':400,
'height':300};
var chart = new google.visualization.BarChart(document.getElementById('cyber4rt_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="cyber4rt_chart"></div>
</body>
</html>
<title>Cyber4rt Bar Charts</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Visits');
data.addRows([
['Jakarta', 84000],
['Surabaya', 63600],
['Bandung', 52900],
['Yogyakarta', 48300],
['Semarang', 38200],
['Medan', 24700],
['Makassar', 14500],
['Depok', 2900],
['Kuala Lumpur', 2800]
]);
var options = {'title':'Demographics City visitors for Cyber4rt',
'width':400,
'height':300};
var chart = new google.visualization.BarChart(document.getElementById('cyber4rt_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="cyber4rt_chart"></div>
</body>
</html>
Anda sedang membaca artikel tentang Membuat Grafik Sederhana dengan Javascript dan anda bisa menemukan artikel Membuat Grafik Sederhana dengan Javascript ini dengan url http://kucing4rt.blogspot.com/2012/10/membuat-grafik-sederhana-dengan.html. Terima kasih telah membaca Membuat Grafik Sederhana dengan Javascript .
Terima kasih telah berkunjung.
Jangan lupa tulis komentarnya ya.