Plotly JavaScript untuk Visualisasi Grafik yang Dinamis

By | January 5, 2023
Print Friendly, PDF & Email
258 Views

Visualisasi data berbasis grafik tentu sangat berguna untuk mendapatkan gambaran secara menyeluruh arah pergerakan data. Namun membuat grafik yang interaktif membutuhkan skill yang bagus. Banyak postingan yang dibahas disini seperti Matplotlib, Ggplot. Namun semuanya itu tidaklah interaktif.

Interaktif yaitu adanya interaksi antar user dengan objek melalui event seperti klik mouse, drag dan yang lainnya. Namun kalian tidak usah kuatir, kita bisa menggunakan Plotly JavaScript untuk Visualisasi Grafik yang Dinamis berbasis web. Plotly tersedia dibanyak bahasa seperti Python dan R.

Nah kali ini, kita akan mengembangkan aplikasi sebelumnya Function Map pada Java Script untuk Looping Array JSON yang menampilkan data dalam bentuk tabel. Kita akan perluas lagi Plotly JavaScript untuk Visualisasi Grafik yang Dinamis agar nampak pergerakan harga saham tersebut. Berikut beberapa library yang diperlukan

  • jquery untuk mengurusi ajax
  • bootstrap untuk thema
  • bootstrap table untuk table
  • plotly untuk charting

Library JS

Langkah pertama yaitu menambahkan library java script plotly terlebih dahulu pada tag <head> </head>

<!-- plotly -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>

Component Grafik

serta menambahkan grafik pada tag <body> </body>

<h3>Grafik</h3>
<div id="graph" style="height: 700px; fluid-width: 900px;"></div>

 

seperti dibawah ini

<html lang="en">
    <head>
    	<!-- sisipkan jquery -->
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
      <!-- Menyisipkan table
         https://bootstrap-table.com
       -->
      <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
      <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">

      <!-- Menyisipkan Bootstrap -->
      <link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />

      <!-- plotly -->
      <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
      <script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>



   </head>
   <body>
      <h3>Harga Saham</h3>
      <table  id="table1"   data-toggle="table"  data-height="460" data-toolbar=".toolbar" data-sortable="true">							
           <thead>
            <tr>
              <th data-field="date">Date</th>
              <th data-field="stockcode">Stock Code</th>
              <th data-field="open">Open</th>
              <th data-field="high">High</th>
              <th data-field="low">Low</th>
              <th data-field="close">Close</th>
              <th data-field="volume" data-sortable="false" data-align="right">Volume</th>
              <th data-field="value" data-sortable="false" data-align="right">Value</th>
              <th data-field="frequency" data-sortable="false" data-align="right">Frequency</th>
            </tr>
           </thead>
         </table>	
      <h3>Grafik</h3>
      <div id="graph" style="height: 700px; fluid-width: 900px;"></div>
   </body>
</html>

AJAX dan API untuk Stock

Pada pembahasan sebelumnya kita telah memanggil API berbasis AJAX, sekalian kita akan loading data tersebut dalam bentuk plot. Berikut kode yang digunakan dengan memanfaatkan lagi map function untuk memanggil JSON

let trace1 = {
           name: 'Close ',
           x:  data.map(c=>c.ohlcv.date),
           close: data.map(c=>c.ohlcv.close),
           high : data.map(c=>c.ohlcv.high),
           open : data.map(c=>c.ohlcv.open),
           low : data.map(c=>c.ohlcv.low),
           type: 'ohlc',
           line: {
               color: 'rgba(0, 0, 0, 0.7)'									
               }
         };
var layout = {
            title: 'emiten '+data.map(c=>c.ohlcv.stockcode).slice(0,1)[0],
            showlegend: true,
            legend: {
               x: 0.05,										
               y: 1.35
            },
            yaxis: {
               fixedrange: true
            },
              xaxis : {
           			fixedrange: false,
           			rangeslider: {
                      	visible: false

                }
        		}
         };
var config = {
            modeBarButtonsToRemove: ['select2d', 'lasso2d', 
               'hoverCompareCartesian', 'hoverClosestCartesian',
                'autoScale2d', 'sendDataToCloud'],
            displaylogo: false,
            editable: false,
            showTips: true,
            scrollZoom: false,
            autosize: true

           };	
Plotly.newPlot('graph', [trace1], layout,config);

Kode lengkapnya yaitu

<html lang="en">
    <head>
    	<!-- sisipkan jquery -->
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
      <!-- Menyisipkan table
         https://bootstrap-table.com
       -->
      <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
      <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">

      <!-- Menyisipkan Bootstrap -->
      <link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />

      <!-- plotly -->
      <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
      <script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>



   </head>
   <body>
      <h3>Harga Saham</h3>
      <table  id="table1"   data-toggle="table"  data-height="460" data-toolbar=".toolbar" data-sortable="true">							
           <thead>
            <tr>
              <th data-field="date">Date</th>
              <th data-field="stockcode">Stock Code</th>
              <th data-field="open">Open</th>
              <th data-field="high">High</th>
              <th data-field="low">Low</th>
              <th data-field="close">Close</th>
              <th data-field="volume" data-sortable="false" data-align="right">Volume</th>
              <th data-field="value" data-sortable="false" data-align="right">Value</th>
              <th data-field="frequency" data-sortable="false" data-align="right">Frequency</th>
            </tr>
           </thead>
         </table>	
      <h3>Grafik</h3>
      <div id="graph" style="height: 700px; fluid-width: 900px;"></div>
   </body>
   <script>
      function formatDate(date) {
          var d = new Date(date),
              month = '' + (d.getMonth() + 1),
              day = '' + d.getDate(),
              year = d.getFullYear();

          if (month.length < 2) 
              month = '0' + month;
          if (day.length < 2) 
              day = '0' + day;

          return [year, month, day].join('-');
      }
      
      
      $(document).ready(function() {
         let start = '20200101';
         let end = '20231201'
         let url = 'https://softscients.com/stocks/index.php/idx/getStock2/BBRI-'+start+'-'+end;
         $.getJSON(url,function (response) {
            let data = response[0];
             let ohc = data.map(function (a, index, array) {
               let final = {
                  'date': formatDate(a.ohlcv.date),
                  'stockname':a.ohlcv.stockname,									
                  'close':a.ohlcv.close.toLocaleString(2),
                  'open':a.ohlcv.open.toLocaleString(2),
                  'high':a.ohlcv.high.toLocaleString(2),
                  'low':a.ohlcv.low.toLocaleString(2),
                  'volume':a.ohlcv.volume.toLocaleString(2),
                  'value':a.ohlcv.value.toLocaleString(2),
                  'frequency':a.ohlcv.frequency.toLocaleString(2),
                  'stockcode': a.ohlcv.stockcode
                  
               };
               return final;
               
            });
            $('#table1').bootstrapTable("destroy");
            $('#table1').bootstrapTable({
                     data: ohc,
                     sortStable: true,
                     pagination : true,
                     search : true
                     
            });

            
            let trace1 = {
                       name: 'Close ',
                       x:  data.map(c=>c.ohlcv.date),
                       close: data.map(c=>c.ohlcv.close),
                       high : data.map(c=>c.ohlcv.high),
                       open : data.map(c=>c.ohlcv.open),
                       low : data.map(c=>c.ohlcv.low),
                       type: 'ohlc',
                       line: {
                           color: 'rgba(0, 0, 0, 0.7)'									
                           }
                     };
            var layout = {
                        title: 'emiten '+data.map(c=>c.ohlcv.stockcode).slice(0,1)[0],
                        showlegend: true,
                        legend: {
                           x: 0.05,										
                           y: 1.35
                        },
                        yaxis: {
                           fixedrange: true
                        },
                          xaxis : {
                       			fixedrange: false,
                       			rangeslider: {
                                  	visible: false

                            }
                    		}
                     };
            var config = {
                        modeBarButtonsToRemove: ['select2d', 'lasso2d', 
                           'hoverCompareCartesian', 'hoverClosestCartesian',
                            'autoScale2d', 'sendDataToCloud'],
                        displaylogo: false,
                        editable: false,
                        showTips: true,
                        scrollZoom: false,
                        autosize: true

                       };	
            Plotly.newPlot('graph', [trace1], layout,config);

         });
      });
   </script>
</html>

Berikut tampilan grafik menggunakan plotly java script yang sangat interakif berbasis web app.

See also  Mengolah data JSON menggunakan Tidy JavaScript

Plotly JavaScript untuk Visualisasi Grafik yang Dinamis bisa kalian lihat penggunaanya di https://softscients.com/stocks

 

Leave a Reply

Your email address will not be published.




Enter Captcha Here :