<div data-bind="wjFlexPie: {
control: chart,
itemsSource: itemsSource,
binding: 'value',
bindingName: 'name',
innerRadius: innerRadius,
offset: offset,
startAngle: startAngle,
reversed: reversed}">
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Inner Radius</label>
<div class="col-md-9">
<input data-bind="wjInputNumber: { value: innerRadius, min: 0, max: 1, step: .1, format: 'n' }" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Offset</label>
<div class="col-md-9">
<input data-bind="wjInputNumber: { value: offset, min: 0, max: 1, step: .1, format: 'n' }" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Start Angle</label>
<div class="col-md-9">
<input data-bind="wjInputNumber: { value: startAngle, min: -360, max: 360, step: 45 }"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div data-bind="wjMenu: { value: palette, header: 'Palette', itemClicked: paletteChanged }">
<span data-bind="wjMenuItem: { value: 'standard' }">Standard</span>
<span data-bind="wjMenuItem: { value: 'cocoa' }">Cocoa</span>
<span data-bind="wjMenuItem: { value: 'coral' }">Coral</span>
<span data-bind="wjMenuItem: { value: 'dark' }">Dark</span>
<span data-bind="wjMenuItem: { value: 'highcontrast' }">High Contrast</span>
<span data-bind="wjMenuItem: { value: 'light' }">Light</span>
<span data-bind="wjMenuItem: { value: 'midnight' }">Midnight</span>
<span data-bind="wjMenuItem: { value: 'minimal' }">Minimal</span>
<span data-bind="wjMenuItem: { value: 'modern' }">Modern</span>
<span data-bind="wjMenuItem: { value: 'organic' }">Organic</span>
<span data-bind="wjMenuItem: { value: 'slate' }">Slate</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked: reversed"> Reversed?
</label>
</div>
</div>
</div>
</div>
var self = this;
// get a reference to the FlexPie control
this.chart = ko.observable(undefined);
this.itemsSource = data;
this.innerRadius = ko.observable(0);
this.offset = ko.observable(0);
this.startAngle = ko.observable(0);
this.reversed = ko.observable(false);
this.palette = ko.observable('standard');
this.paletteChanged = function (data, sender, args) {
// update FlexPie control's palette
self.chart().palette = wijmo.chart.Palettes[sender.selectedValue];
}
