Ada banyak jenis data yang bisa di tampilkan dalam sebuah aplikasi web. Salah satunya adalah data statistik yang biasanya menggunakan grafik. Dalam teknologi web, menampilkan data dalam bentuk grafik yang bersifat dinamis dan fleksibel awalnya terlihat sangat sulit dan mustahil.
Namun, dengan teknologi web baru-baru ini, menampilkan data statistik menggunakan grafik yang dinamis menjadi sangat mudah. Dengan kombinasi antara Jquery, CSS dan HTML5 canvas, semua itu menjadi hal mudah dan menarik.
Pada kesempatan ini, saya akan menunjukkan bagaimana menampilkan data dengan menggunakan grafik bergaya flat. Kali ini saya tidak membuat kodenya sendiri, sehingga saya tidak membahas teknik pembuatannya. Yang saya bahas disini adalah teknik pemasangannya menggunakan Template Flat Chart dari w3layouts.com agar lebih cepat.
Seperti yang anda lihat pada gambar di atas, ada 6 jenis grafik yang bisa anda terapkan. Semuanya bergaya flat. Sebelumnya, silahkan anda lihat dulu demonya dan download filenya. Lalu buka di text editor anda. Kita akan bahas satu – persatu.
Daftar Isi Postingan
Langkah 1
Pastikan anda memanggil library jquery, chart.js, dan file style.css yang ada pada bundle yang sudah didownload. Begitu pula font-nya jika anda ingin menggunakan font yang sama juga.
<script src=”path/to/js/jquery-1.11.1.min.js“></script>
<script src=”path/to/js/Chart.js“></script>
<link href=’//fonts.googleapis.com/css?family=Montserrat:400,700′ rel=’stylesheet’ type=’text/css’>
– Kode hijau merupakan kode untuk memanggil font, silahkan disertakan jika ingin menggunakan font yang sama seperti pada demo.
Langkah 2
Setelah semua libraby dan script sudah di load, kini saatnya anda memasang salah satu grafik dalam markup html anda. Untuk setiap grafik, markup HTML beserta script configurasinya bisa anda lihat di bawah.
Tipe 1 – Diagram Batang
<canvas id=”canvas” height=”350″ width=”600″></canvas>
<script>
var barChartData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(9, 35, 78, 0.91)”,
strokeColor : “rgba(9, 35, 78, 0.91)”,
data : [65,59,90,81,56,55,40]
},
{
fillColor : “rgba(255, 137, 167, 0.78)”,
strokeColor : “rgba(255, 163, 186, 0.93)”,
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById(“canvas”).getContext(“2d”)).Bar(barChartData);
</script>
</div>
Tipe 2 – Diagram Garis 1
<div class=”month-graph effect21″>
<canvas id=”line” height=”300″ width=”300″ style=”width:300px; height: 300px;”></canvas>
<script>
var lineChartData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(9, 35, 78, 0.91)”,
strokeColor : “rgb(255, 137, 167)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [65,59,90,81,56,55,40]
},
{
fillColor : “rgba(255, 137, 167, 0.78)”,
strokeColor : “rgba(9, 35, 78, 0.91)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById(“line”).getContext(“2d”)).Line(lineChartData);
</script>
</div>
</div>
Tipe 3 – Diagram Garis 2
<div class=”left-graph-info”>
<div class=”alert-close4″></div>
<h3>Statistics</h3>
<script src=”js/jquery.flot.min.js”></script>
<!–//graph–>
<script>
$(document).ready(function () {
// Graph Data ##############################################
var graphData = [{
// Returning Visits
data: [ [6, 4500], [7,3500], [8, 6550], [9, 7600], ],
color: ‘#FFA3BA’,
points: { radius: 4, fillColor: ‘#1d365f’ }
}
];
// Lines Graph #############################################
$.plot($(‘#graph-lines’), graphData, {
series: {
points: {
show: true,
radius: 1
},
lines: {
show: true
},
shadowSize: 0
},
grid: {
color: ‘#1d365f’,
borderColor: ‘transparent’,
borderWidth: 10,
hoverable: true
},
xaxis: {
tickColor: ‘transparent’,
tickDecimals: false
},
yaxis: {
tickSize: 1200
}
});
// Bars Graph ##############################################
$.plot($(‘#graph-bars’), graphData, {
series: {
bars: {
show: true,
barWidth: .9,
align: ‘center’
},
shadowSize: 0
},
grid: {
color: ‘#fff’,
borderColor: ‘transparent’,
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: ‘transparent’,
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});// Graph Toggle ############################################
$(‘#graph-bars’).hide();
$(‘#lines’).on(‘click’, function (e) {
$(‘#bars’).removeClass(‘active’);
$(‘#graph-bars’).fadeOut();
$(this).addClass(‘active’);
$(‘#graph-lines’).fadeIn();
e.preventDefault();
});$(‘#bars’).on(‘click’, function (e) {
$(‘#lines’).removeClass(‘active’);
$(‘#graph-lines’).fadeOut();
$(this).addClass(‘active’);
$(‘#graph-bars’).fadeIn().removeClass(‘hidden’);
e.preventDefault();
});// Tooltip #################################################
function showTooltip(x, y, contents) {
$(‘<div id=”tooltip”>’ + contents + ‘</div>’).css({
top: y – 16,
left: x + 20
}).appendTo(‘body’).fadeIn();
}var previousPoint = null;$(‘#graph-lines, #graph-bars’).bind(‘plothover’, function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$(‘#tooltip’).remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, y+ x );
}
} else {
$(‘#tooltip’).remove();
previousPoint = null;
}
});});
</script>
<!– Graph HTML –>
<div id=”graph-wrapper”>
<div class=”graph-container”>
<div id=”graph-lines”> </div>
<div id=”graph-bars”> </div>
</div>
</div>
<!– end Graph HTML –>
</div>
</div>
Tipe 4
<canvas id=”radar” height=”400″ width=”350″></canvas>
<script>
var radarChartData = {
labels : [“Eating”,”Drinking”,”Sleeping”,”Designing”,”Coding”,”Partying”,”Running”],
datasets : [
{
fillColor : “rgba(9, 35, 78, 0.91)”,
strokeColor : “rgba(9, 35, 78, 0.91)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [65,59,90,81,56,55,40]
},
{
fillColor : “rgba(249, 224, 59, 0.65)”,
strokeColor : “rgba(9, 35, 78, 0.91)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [28,48,40,19,96,27,100]
}
]}var myRadar = new Chart(document.getElementById(“radar”).getContext(“2d”)).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
</script>
</div>
Tipe 5 – Diagram Bulat 1
<canvas id=”pie” height=”400″ width=”300″></canvas>
<div class=”legend”>
<div id=”os-Win-lbl”>Chrome <span>100%</span></div>
<div id=”os-Mac-lbl”>Internet Explorer <span> 50%</span></div>
<div id=”os-Other-lbl”>Safari<span>30%</span></div>
</div>
<script>
var pieData = [
{
value: 30,
color:”#FFA3BA”
},
{
value : 50,
color : “#1d365f”
},
{
value : 100,
color : “#f9e03b”
}
];var myPie = new Chart(document.getElementById(“pie”).getContext(“2d”)).Pie(pieData);
</script>
</div>
Tipe 6 – Diagram Bulat 2
<canvas id=”polar” height=”400″ width=”350″></canvas>
<script>
var chartData = [
{
value : Math.random(),
color: “#1d365f”
},
{
value : Math.random(),
color: “#FFA3BA”
},
{
value : Math.random(),
color: “#f9e03b”
},
{
value : Math.random(),
color: “#1d365f”
},
{
value : Math.random(),
color: “#bb62a6”
},
{
value : Math.random(),
color: “#0dd3f4”
}
];
var myPolarArea = new Chart(document.getElementById(“polar”).getContext(“2d”)).PolarArea(chartData);
</script>
</div>
Data-data yang ditampilkan di atas tentunya adalah data palsu yang dibuat untuk demo saja. Karena itulah anda harus menggantinya dengan mengambil data dari database menggunakan bahasa server side seperti php.
Kode-kode berwarna merah di atas, adalah kode-kode untuk isi data dan konfigurasinya. Anda harus mengintegrasikannya sehingga data yang anda tampilkan benar-benar real.
Selamat mencoba. Good luck 🙂
Semoga bermanfaat.
~Muhammad Syakirurohman~
Prisma Try Laksana
Wih makin keren aja, hehe 😀
Amry Martin
Good Post.
Jika Anda membutuhkan Driver Printer, kunjungi website http://www.agendriver.com
Fernanda
ka aku mau tanya kan aku pkl nah dikasih project sruh buat website sekolah tapi dibagi2 dan aku bagianya yang dokumen di dalamnya itu pdf tapi bisa di donwload dan di view bagaimana caranya ya ka?
Syakir Rahman
Kalo pertanyaannya spesifik gitu kakak ga bisa jawab de..
WONDHOEZ
Ini hanya bisa di pasang pada PHP ya gan, Kalo di pake ke Bloger bisa tidak..?
Syakir Rahman
Bisa saja.. tapi kan ini untuk data dinamis.. walaupun bisa, kayanya ngga cocok
androidmaker
Mantap artikelnya…
androidmaker
Mantap artikelnya…
Mayuf
Terimakasih sangat membantu