Artikel ini terinspirasi pada saat saya sedang mengerjakan
sebuah projek di perusahaan pembuat kendaraan yang ada di Jakarta. Seorang
klien meminta untuk membuatkan sebuah tampilan banyak chart dibagi menjadi
beberapa page. Untuk melihat page selanjunya dapat dilakukan dengan menggeser
dan menekan tombol Next seperti halnya slideshow untuk image yang sering kita
jumpai pada situs-situs tertentu.
Adapun Slideshow yang menampilkan banyak chart yang
akan kita buat adalah sebagai berikut.
Tampilan yang di atas dibuat dari beberapa kondisi seperti
penggunaan row no-gutter pada bootstrap untuk menghilangkan/remove space
column, highchart dengan tipe line yang dinamis, dan carousel yang merupakan
inti dari slideshow.
Langkah-langkah pembuatan Slideshow Highchart
Pertama,
buka software editor seperti Notepad++, Sublime Text atau yang lainnya.
Kedua,
copy dan pastekan script di bawah ini pada lembar baru pada software editor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Ketiga,
Pastekan script di bawah ini di bawah <head>, script ini dibutuhkan untuk
menjalankan method yang ada pada script tersebut. Namun untuk menjalankanya
anda perlu terkoneksi internet karena script tertuju langsung ke situs-nya
masing-masing.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Keempat,
Buatkan div container seperti di bawah ini di dalam <body>
<div id="container" class="container" style="width:100%;">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-value="A" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-value="B" data-slide-to="1"></li>
<!--<li data-target="#myCarousel" data-slide-to="2"></li> -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- col-md-4 pl-0 pr-0 pl (padding-left) -->
<div class="carousel-item active">
<div class="row no-gutter">
<div class="col-md-6">
<div style="border: 3px solid gray; width: auto; height:auto;">
<div id="container1" style="width: 100%; height: 100%;" class="text-left"></div>
</div>
</div>
<div class="col-md-6">
<div style="border: 3px solid gray; width: auto; height:auto;">
<div id="container2" style="width: 100%; height: 100%;" class="text-left"></div>
</div>
</div>
</div>
</div>
<div class=" -item">
<div class="row no-gutter">
<div class="col-md-6">
<div style="border: 3px solid gray; width: auto; height:auto;">
<div id="container3" style="width: 100%; height: 100%;" class="text-left"></div>
</div>
</div>
<div class="col-md-6">
<div style="border: 3px solid gray; width: auto; height:auto;">
<div id="container4" style="width: 100%; height: 100%;" class="text-left"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev" style="background:none;" >
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next" style="background:none">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
Catatan: pembuatan <div> dengan id=”container”
bertujuan agar <div> dengan id=” myCarousel” dapat diatur dimana letak (center) dan
sizenya.
Kelima,
Masukan script css untuk mempercantik dan menjalankan slideshow. Seperti yang
dijelaskan sebelumnya row no-gutter bertujuan untuk mengatur jarak space column
antar <div>, col-md-6 adalah pengaturan jumlah kolom, lalu jika ingin
mengatur lokasi tombol next dan pre anda dapat menambah ukuran width pada carousel-control.
Sedangkan jika anda ingin merubah warna tombolnya anda dapat menganti color
pada carousel-control-next-icon dan carousel-control-pre-icon.
<style type="text/css">
/* Make the image fully responsive */
.row.no-gutter {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom:0;
width:100%;
height:100%;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 1px;
padding-left: 1px;
padding-top: 1px;
padding-bottom:1px;
}
.carousel {
background-color: black;
width: 100%;
}
.col-md-6
{
text-align:center;
font-family:Arial;
font-size: 62.5%;
}
.carousel-control
{
bottom:0%;
flex-align:end;
width: 2%;
bottom:0px;
}
.container1, .container2, .container3, .container4
{
text-align:center;
font-family:Arial;
font-size: 62.5%;
background-color:yellow;
width:100%;
height:200px;
border:1px solid gray;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
//border: 1px solid black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}
</style>
Keenam,
Memasukan script jquery untuk menampilkan highchart.
<script type="text/javascript">
var gScreenStatus = null;
var gProduct = null;
var slide = 0;
var scrollPosition = 0;
var scollPositionWidth = 0
var zoomChart = 0;
var oneColumn = false;
$(document).ready(function () {
viewChart1();
viewChart2();
viewChart3();
viewChart4();
});
function viewChart1() {
Highcharts.chart('container1', {
chart: {
type: '',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
console.log("reload new data");
// set up the updating of the chart each second
var colors = ["#9acd32", "#800000", "#008080"];
var series = this.series[0];
setInterval(function () {
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
var randomNumber = vals[Math.floor(Math.random() * vals.length)].toFixed(2);
if (randomNumber > 3.55) {
series.options.color = colors[1];
color = colors[1];
}
else if (randomNumber < 3.45) {
series.options.color = colors[1];
color = colors[1];
}
else {
series.options.color = colors[2];
color = colors[2];
}
series.update(series.options);
var xPoint = (new Date()).getTime(), // current time
yPoint = parseFloat(randomNumber);//Math.random();
//series.addPoint([x, y], true, true);
series.addPoint({
marker: { fillColor: color }, x: xPoint, y: yPoint, color: color
}, true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Kondisi Bahan 1'
},
accessibility: {
announceNewData: {
enabled: true,
minAnnounceInterval: 15000,
announcementFormatter: function (allSeries, newSeries, newPoint) {
if (newPoint) {
return 'New point added. Value: ' + newPoint.y;
}
return false;
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
fontSize: '12px',
color: 'black'
}
},
},
yAxis: {
title: {
text: '',
style: {
fontSize: '15px',
color: 'black'
}
},
labels: {
style: {
fontSize: '12px',
color: 'black'
},
formatter: function () {
return this.value + '%';
}
},
plotLines: [{
value: 3.45,
width: 2,
color: '#800000'
},
{
value: 3.55,
width: 2,
color: '#800000'
}
]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
//y: vals[Math.floor(Math.random() * vals.length) * Math.floor(Math.random() * decimal.length)]
y: vals[Math.floor(Math.random() * vals.length)]
});
}
return data;
}()),
lineWidth: 3,
marker: {
radius: 4
}
}]
});
}
function viewChart2() {
Highcharts.chart('container2', {
chart: {
type: '',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
console.log("reload new data");
// set up the updating of the chart each second
var colors = ["#9acd32", "#800000", "#008080"];
var series = this.series[0];
setInterval(function () {
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
var randomNumber = vals[Math.floor(Math.random() * vals.length)].toFixed(2);
if (randomNumber > 3.55) {
series.options.color = colors[1];
color = colors[1];
}
else if (randomNumber < 3.45) {
series.options.color = colors[1];
color = colors[1];
}
else {
series.options.color = colors[2];
color = colors[2];
}
series.update(series.options);
var xPoint = (new Date()).getTime(), // current time
yPoint = parseFloat(randomNumber);//Math.random();
//series.addPoint([x, y], true, true);
series.addPoint({
marker: { fillColor: color }, x: xPoint, y: yPoint, color: color
}, true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Kondisi Bahan 2'
},
accessibility: {
announceNewData: {
enabled: true,
minAnnounceInterval: 15000,
announcementFormatter: function (allSeries, newSeries, newPoint) {
if (newPoint) {
return 'New point added. Value: ' + newPoint.y;
}
return false;
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
fontSize: '12px',
color: 'black'
}
},
},
yAxis: {
title: {
text: '',
style: {
fontSize: '15px',
color: 'black'
}
},
labels: {
style: {
fontSize: '12px',
color: 'black'
},
formatter: function () {
return this.value + '%';
}
},
plotLines: [{
value: 3.45,
width: 2,
color: '#800000'
},
{
value: 3.55,
width: 2,
color: '#800000'
}
]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
//y: vals[Math.floor(Math.random() * vals.length) * Math.floor(Math.random() * decimal.length)]
y: vals[Math.floor(Math.random() * vals.length)]
});
}
return data;
}()),
lineWidth: 3,
marker: {
radius: 4
}
}]
});
}
function viewChart3() {
Highcharts.chart('container3', {
chart: {
type: '',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
console.log("reload new data");
// set up the updating of the chart each second
var colors = ["#9acd32", "#800000", "#008080"];
var series = this.series[0];
setInterval(function () {
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
var randomNumber = vals[Math.floor(Math.random() * vals.length)].toFixed(2);
if (randomNumber > 3.55) {
series.options.color = colors[1];
color = colors[1];
}
else if (randomNumber < 3.45) {
series.options.color = colors[1];
color = colors[1];
}
else {
series.options.color = colors[2];
color = colors[2];
}
series.update(series.options);
var xPoint = (new Date()).getTime(), // current time
yPoint = parseFloat(randomNumber);//Math.random();
//series.addPoint([x, y], true, true);
series.addPoint({
marker: { fillColor: color }, x: xPoint, y: yPoint, color: color
}, true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Kondisi Bahan 3'
},
accessibility: {
announceNewData: {
enabled: true,
minAnnounceInterval: 15000,
announcementFormatter: function (allSeries, newSeries, newPoint) {
if (newPoint) {
return 'New point added. Value: ' + newPoint.y;
}
return false;
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
fontSize: '12px',
color: 'black'
}
},
},
yAxis: {
title: {
text: '',
style: {
fontSize: '15px',
color: 'black'
}
},
labels: {
style: {
fontSize: '12px',
color: 'black'
},
formatter: function () {
return this.value + '%';
}
},
plotLines: [{
value: 3.45,
width: 2,
color: '#800000'
},
{
value: 3.55,
width: 2,
color: '#800000'
}
]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
//y: vals[Math.floor(Math.random() * vals.length) * Math.floor(Math.random() * decimal.length)]
y: vals[Math.floor(Math.random() * vals.length)]
});
}
return data;
}()),
lineWidth: 3,
marker: {
radius: 4
}
}]
});
}
function viewChart4() {
Highcharts.chart('container4', {
chart: {
type: '',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
console.log("reload new data");
// set up the updating of the chart each second
var colors = ["#9acd32", "#800000", "#008080"];
var series = this.series[0];
setInterval(function () {
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
var randomNumber = vals[Math.floor(Math.random() * vals.length)].toFixed(2);
if (randomNumber > 3.55) {
series.options.color = colors[1];
color = colors[1];
}
else if (randomNumber < 3.45) {
series.options.color = colors[1];
color = colors[1];
}
else {
series.options.color = colors[2];
color = colors[2];
}
series.update(series.options);
var xPoint = (new Date()).getTime(), // current time
yPoint = parseFloat(randomNumber);//Math.random();
//series.addPoint([x, y], true, true);
series.addPoint({
marker: { fillColor: color }, x: xPoint, y: yPoint, color: color
}, true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Kondisi Bahan 4'
},
accessibility: {
announceNewData: {
enabled: true,
minAnnounceInterval: 15000,
announcementFormatter: function (allSeries, newSeries, newPoint) {
if (newPoint) {
return 'New point added. Value: ' + newPoint.y;
}
return false;
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
fontSize: '12px',
color: 'black'
}
},
},
yAxis: {
title: {
text: '',
style: {
fontSize: '15px',
color: 'black'
}
},
labels: {
style: {
fontSize: '12px',
color: 'black'
},
formatter: function () {
return this.value + '%';
}
},
plotLines: [{
value: 3.45,
width: 2,
color: '#800000'
},
{
value: 3.55,
width: 2,
color: '#800000'
}
]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
var vals = [];
for (a = 3.38; a <= 3.68; a += 0.02) {
vals.push(a);
}
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
//y: vals[Math.floor(Math.random() * vals.length) * Math.floor(Math.random() * decimal.length)]
y: vals[Math.floor(Math.random() * vals.length)]
});
}
return data;
}()),
lineWidth: 3,
marker: {
radius: 4
}
}]
});
}
</script>
Share This :
0 Comments