ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Membuat Slideshow Kumpulan Highchart Pada Jquery

2/22/2020
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