Menampilkan Data Menggunakan Grafik dengan HTML5 Canvas [Template Flat Charts]

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.

Demo Download

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.

– Kode merah merupakan letak url yang harus anda sesuaikan sesuai dengan dimana file-file tersebut disimpan dalam project anda
– 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

<div class=”graph”>
<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=”graph”>
<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=”graph lost”>
<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

<div class=”graph”>
<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

<div class=”graph”>
<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

<div class=”graph lost1″>
<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~