Изменение размера круговой диаграммы при изменении содержимого

Question

Я использовал круговую диаграмму javascript, и если я устанавливаю фиксированную ширину или высоту, она работает нормально, но если я установил ширину и высоту 100%, она не отображает круговую диаграмму. Мне нужно изменить ширину и высоту при изменении размера контента (100%).

JS:

$(function() { 
      var data = []; 
      data[0] = { label: "word", data: 25}; 
      data[1] = { label: "withdrawn", data: 75 }; 
      data[2] = { label: "in progress", data: 50 }; 

      $.plot($("#graph-1"), data, { 
       series: { 
        pie: { 
         show: true, 
         radius: 1, 
         label: { 
          show: true, 
          radius: 2/3, 
          formatter: function(label, series){ 
        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/></div>'; 
       }, 
          threshold: 0.1 
         }, 
         combine: {color: '#666', threshold: 0.1} 
        } 
       }, 
       legend: {show: false} 
      }); 
}); 

HTML:

<td class="graph-td"> 
       <div id="graph-1" class="graph-1"></div> 
      </td> 

CSS:

/* In this case pie chart working norm */ 
.graph-1 { width:250px; height: 250px; margin: 0 auto;} 

/* In this case pie chart is not displaying */ 
.graph-1 { width:100%; height: 100%; margin: 0 auto;} 

Answer 1

$(window).on('resize', function(){ 


    // get container width & height 
    // destroy your chart 
    // redraw your chart with new dimensions 
    // or refresh your chart view, or change the width/height, depending upon how your plugin works 

});