Google Pie Chart Is Not Responsive

Question

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.

Answer 1

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?