1

I am trying to make my chart responsive. I have added this code (as below) to make my chart responsive. But still it is not working. Can somebody help me to figure it out ? Thank you.

<script type="text/javascript"> 

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
   
function drawChart() { 
  var jsonData = $.ajax({ 
      url: "<?php echo base_url() . 'index.php/main/lihat_graph' ?>", 
      dataType: "json", 
      async: false 
      }).responseText; 
       
  var data = new google.visualization.DataTable(jsonData);

  var options = {
    title:    '',
    hAxis:    {title: 'Jumlah Kepakaran'},
    vAxis:    {title: 'Jumlah Kepakaran'},
    bubble:   {textStyle: { fontName: 'arial', fontSize: 12 }},
    colors:   ['beige','pink','#00ADF9', 'maroon', 'red', 'green', 'purple', 'gray', 'orange']
  };

  if(data.getNumberOfRows() == 0){
    $("#chart_div").append("Graf Bidang Kepakaran masih dalam proses 
    pengumpulan data. Graf akan dipaparkan setelah proses pengumpulan data 
    selesai.")
  }else{
   var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
   chart.draw(data, options);        
  }
} 


$(window).resize(function(){
  drawChart();
});
</script>

Graph is the image of my graph.

Community
  • 1
  • 1
Wulan Yaya
  • 23
  • 1
  • 6

1 Answers1

0

your width is always 800. justify it to window size and do the math to make it nest in your box as you want. 

width : window.innerWidth,

see this link and write a better code. the way you wrote has performance issue. JQuery: How to call RESIZE event only once it's FINISHED resizing?

DragonKnight
  • 1,740
  • 2
  • 22
  • 35