Cara membuat Google Chart Menjadi Responsive

Selamat siang kali ini kami akan share tutorial singkat yaitu bagaimana cara membuat google chart menjadi responsive pada aplikasi dan website anda. sebenarnya responsive dalam suatu aplikasi atau website adalah suatu kebutuhan yang mendasar, dan bertujuan untuk membuat google chart yang anda gunakan bisa dilihat secara jelas di mobile anda.



Anda tinggal memasukkan css dibawah ini tepat dibawah judul google chart anda.

   //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 css di atas semua jenis google chart yang anda gunakan akan menjadi responsive di web atau mobile anda.

Kami yakin masih ada yang bertanya bagaimana cara pemasangan secara lengkapnya, disini kami akan memberikan caranya ketika sudah digabungkan dengan google chart, berikut kodingannya ketika sudah digabungkan.

 <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> 

Sekian tutorial singkat kali ini semoga apa yang kami share di atas bermanfaat bagi anda, jika anda masih bingun dengan tutorial di atas silahkan tinggalkan koment dibawah dan mulai berdiskusi dengan kami.