Membuat Chart Slideshow Menggunakan Jquery Slick dan Highcharts
Pembuatan image slideshow yang dapat dimanipulasi sebagai cara dalam menyaikan konten berita secara slideshow sudah sering kita dengar dan sudah banyak tutorial yang beredar.
Nah bagaimana dengan menampilkan chart secara slideshow ?. Tentu bisa juga kita lakukan. Dalam tutorial ini, untuk membuat slidewshow chartnya kita menggunakan bantuan librari slick.js.
Sedangkan untuk pembuatan grafiknya atau chartnya, kita menggunakan bantuan librari highcharts.js. Berikut ini beberapa panduan membuat grafik dengan highcharts :
- Membuat Grafik Batang dari database dengan librari Highchart
- Membuat Grafik Pie Chart (Grafik Lingkaran) dari database dengan librari Highchart
- Membuat Grafik Pie Chart dari database dengan parsing data JSON
- Membuat Grafik Line Chart dari database dengan parsing data JSON
- Membuat Grafik Area Chart dari database dengan parsing data JSON
Berikut ini adalah ouput yang akan kita buat dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Seperti yang tampak pada Gambar.1, kita melihat ada arrowNavigation yang dapat digunakan untuk mengforward atau backward dari grafik yang diinginkan. Pada sisi bawah ada dotNavigation yang menunjukkan indikator posisi grafik.
Dalam tutorial ini, kita tidak membahas cara pembuatan chartnya, silahkan baca tutorial yang lebih mendalam pembuatan grafik pada link tutorial diatas.
Membuat Slideshow pada Grafik
Dalam contoh ini, kita memiliki tiga grafik. Ketiga grafik tersebut akan dikelompokkan dengan sebuah div class chartGroup. Nama chartGroup dapat anda sesuaikan dengan nama yang anda inginkan.<div class="chartGroup">
<div id="container1" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
<div id="container2" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
<div id="container3" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
</div>Untuk div id container1, container2, container3 merupakan hasil grafik yang sudah terender yang akan ditampilkan pada div class chartGroup.
Kemudian setelah itu kita tambahkan script berikut untuk membuat efek slideshow terhadap ketiga grafik tersebut :
<script type="text/javascript">
$(document).ready(function() {
$('.chartGroup').slick({
accessibility: true,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 8000,
arrows: true,
dots: true,
draggable: false,
focusOnSelect: true,
infinite: true,
speed: 1000
});
$('.slick-prev').css('margin-left', '10px');
$('.slick-next').css('margin-right', '10px');
});
</script>
<script src="assets/slick/slick.js"></script>Berikut ini source code lengkapnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Bootstrap Graph Slideshow </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<link rel="stylesheet" href="assets/slick/slick.css">
<!--<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/-->
<link rel="stylesheet" href="assets/slick/slick-theme.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<style>
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
<script>
$(function () {
$('#container1').highcharts({
chart: {
type: 'column',
zoomType: 'xy'
},
title: {
text: '<b>Proyeksi Penduduk Indonesia Berdasarkan Hasil Sensus Penduduk 2010</b>'
},
subtitle: {
text: '<br/>(Sumber :<a href="http://bps.go.id/"> BPS)</a><br/>'
},
xAxis: {
categories: ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2023','2024','2025','2026','2027','2028','2029','2030','2031','2032','2033','2034','2035']
},
yAxis: {
//min: 0,
title: {
text: 'Proyeksi Penduduk 2010-2035 (Perempuan+Laki-Laki)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}</b></td><td> Ribu Jiwa</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'INDONESIA',
data:[238518.8,241990.7,245425.2,248818.1,252164.8,255461.7,258705,261890.9,265015.3,268074.6,271066.4,273984.4,276822.3,279577.4,282246.6,284829,287324.5,289732.1,292049.5,294274,296405.1,298444,300390.6,302242.2,303996.7,305652.4]
}]
});
});
</script>
<script>
$(function () {
$('#container2').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: <a href="http://www.highcharts.com/demo/line-basic">Highcharts</a>',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
<script>
$(function () {
// Build the chart
$('#container3').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Internet Browser Statistics'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: 'green',
formatter: function()
{
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' % ';
}
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 50
}, {
name: 'Firefox',
y: 25,
sliced: true,
selected: true
}, {
name: 'Safari',
y: 15
}, {
name: 'Konqueror',
y: 50
}, {
name: 'Opera',
y: 5
}]
}]
});
});
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->
<div class="container" style="margin-top:20px">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">DISPLAY VARIOUS CHARTS SLIDESHOW</div>
<div class="panel-body">
<div class="chartGroup">
<div id="container1" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
<div id="container2" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
<div id="container3" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.chartGroup').slick({
accessibility: true,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 8000,
arrows: true,
dots: true,
draggable: false,
focusOnSelect: true,
infinite: true,
speed: 1000
});
$('.slick-prev').css('margin-left', '10px');
$('.slick-next').css('margin-right', '10px');
});
</script>
<script src="assets/slick/slick.js"></script>
<div class="navbar navbar-default navbar-fixed-bottom footer-bottom">
<div class="container text-center">
<p class="text-center">Copyright © 2016, DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
</div>
</div>
</body>
</html>
