Categories
PHP

Bagaimana membuat Google Charts Responsive ?

google chart responsive

Google Charts responsive – Google Charts adalah pustaka charting murni berbasis JavaScript yang dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan charting interaktif. Google Charts menyediakan berbagai macam grafik. Misalnya, bagan garis, bagan spline, bagan area, bagan batang, bagan pie, dan sebagainya.

Singkatnya , Google Charts memungkinkan Visualisasi Data (Grafik / Grafik) untuk ditampilkan di situs web. Grafik ini dapat diberdayakan dengan data statis atau dapat diumpankan data dari database.

Google telah membuat menggunakan API ini proses termudah di dunia. Yang Anda butuhkan untuk memulai adalah editor teks, file HTML, dan koneksi internet. Setelah Anda memiliki ini, Anda cukup menelepon API mereka di dalam tag <head> file HTML Anda. 

https://www.gstatic.com/charts/loader.js

Perlu Anda ketahui bahwa secara default Google charts tidak responsive ketika Anda menggunakannya, sehingga kami perlu menambahkan sentuhan code javascript yang yang bisa membuat Google chart Anda menjadi responsive. Berdasarkan masalah default di atas kami akan share bagaimana membuatresponsive.

Baca Juga :

Membuat Google Chart responsive

Untuk membuat Google Charts anda menjadi responsive anda hanya menambahkan code berikut dibawah code Google Charts yang ada pada system yang dibuat.

//css 
    options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };
    
        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
  drawChart(data);
});
//end

Dengan code diatas semua jenis bentuk chart yang ada pada Google Charts menjadi responsive. Kami ingin memberikan contoh bagaimana mengimplementasikan code di atas pada form yang telah dibuat, sehingga memperjelas bagaimana code di atas di tempatkan.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
        ]);

      var options = {
        title: 'My Daily Activities'
      };

        //css 
        options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };

        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

      //redraw graph when window resize is completed  
      $(window).on('resizeEnd', function() {
      drawChart(data);
      });
    //end

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}
</script>
</head>
<body>
  <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Semoga apa yang kami share bermanfaat bagi Anda, kami berharap Anda berhasil membuat Google Charts pada system yang di buat.

Leave a Reply

Your email address will not be published. Required fields are marked *