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">×</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>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/3ff585e8-c17a-4b61-a8c9-b3aa903262c7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
