Google pie chrats inside of odal issue

[jamison...@gmail.com]

So I am attempting to put a google pie chart using the google-chart.

I can get the chart to render and populate the data from the passed parameters, however visually it is a mess.

On when the modal initially opens the chart is really small, and the pie chart values are not displayed correctly. When I select a filter, then the chart will grow to the specified size, and shift.

I have attached screen shots, and the code..

        <div class="row spacer">
            <div ng-repeat="x in charts">
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <b>{{x.label | uppercase}}</b>
                            <a data-toggle="modal" data-target="#{{x.label+$index}}modal" onclick="test({{x.label+$index}})"><i class="pull-right fa fa-plus"></i></a>
                        </div>
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <google-chart type='pie'
                                              options='{"fontSize": "12", "is3D":"true", "pieSliceText": "value", "chartArea": {"width": "100%", "height": "100%", "left":"0", "top":"0", "bottom":"0", "right":"0"} }'
                                              cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}, {"label":"", "type":"boolean"}]'
                                              rows='{{x.data | filter : true }}'>
                                </google-chart>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <div class="row">
                                <div ng-repeat="z in x.data" class="col-lg-3">
                                    <div class="checkbox checkbox-primary">
                                        <input type="checkbox" id="{{$index+x.label+$id}}checkbox" ng-model="z[2]">
                                        <label for="{{$index+x.label+$id}}checkbox">
                                            {{z[0]}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Start Modal-->
                <div id="{{x.label+$index}}modal" class="modal fade" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">{{x.label | uppercase}}</h4>
                            </div>
                            <div class="modal-body" style="width: 100%; height: 100%;">
                                <google-chart class="gchart" type='pie'
                                              options='{"fontSize": "12", "is3D":"true", "chartArea": {"width": "100%", "height": "100%", "left":"0", "top":"0", "bottom":"0", "right":"0"}, "pieSliceText": "value"}'
                                              cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}, {"label":"", "type":"boolean"}]'
                                              rows='{{x.data | filter : true }}'>
                                </google-chart>
                            </div>
                            <div class="modal-footer">
                                <div class="row">
                                    <div ng-repeat="z in x.data">
                                        <div class="col-lg-3">
                                            <div class="checkbox checkbox-primary">
                                                <input type="checkbox" id="{{$index+x.label+$id}}checkbox" ng-model="z[2]">
                                                <label for="{{$index+x.label+$id}}checkbox">
                                                    {{z[0]}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- End Modal-->
            </div>
        </div>