Monday, April 22, 2019

Cara Membuat Google Chart/Grafik Responsive



Pada postingan kali ini kita akan membahas lanjutan dari google chart/grafik yang sudah saya posting sebelumnya. Kalau kalian belum lihat bagaimana cara membuat google chartnya, bisa kalian lihat pada postingan saya sebelumnya disini.


Dipostingan sebelumnya, saya menulis tentang membuat chart/grafik tanpa menggunakan package tambahan untuk laravelya. Namun dalam hal tersebut memiliki masalah tentang responsive nya. Grafik yang disediakan oleh google belum responsive, untuk itu kita perlu menambahkan fungsi tambahan agar grafik yang kita sediakan responsive sesuai dengan device yang kita gunakan saat ini.

Contoh grafik yang tidak responsive.

Full page

Setelah dikecilkan

Lalu bagaimana kita akan melakukannya ?

Kita harus menambahkan function windows nya agar javascript yang dijalankan berdasarkan besar nya layar yang tampil. Cara nya mudah sekali, tinggal masukkan function berikut ini :


 $(window).resize(function(){
      drawVisualization(); //Function chart
      });

Tulis function tersebut sebelum </script>.

Fungsi chart drawVisualization() disana merupakan function chart pada code google chart ini,


Alhasil, grafik akan menjadi responsive.

2 comments: