带有父级宽度的Google饼图

Question

I'm using bootstrap3 , looked at this documentation assuming I have something like below:

<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
    <div class="well">
         <header>Genel İstatistik</header>
         <content id="general"></content>
         <footer>Footer</footer>
    </div>
</div>

I want my chart to have width of my div and auto resize height by width, in this case, width is defined by col-*-4 rule. How to make width 100% to parent at options ?

Here is fiddle .

Answer 1

Okay, so it seems there is no built-in way to define width of Google Pie Chart responsively. However, I figured a way out, so there it is. According to the documentation on Google, passing an example options variable to .draw() function will define the size, the options as below:

var options = {'title':'How Much Pizza I Ate Last Night',
               'width':400,
               'height':300};

So, all I have to do is get the width of document and do some simple maths, like:

var width = $(document).width();

var options = {'title':'How Much Pizza I Ate Last Night',
               'width':width/3,
               'height':300};

width/3 is fine for me, but you might want to take the parent's width then apply. In this case, you might want to look at this answer .