Getting Started
Steps for getting started with the FlexPie control in AngularJS applications:
- Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
-
Add a component to provide data and logic.
- Add a Wijmo FlexPie control to the page and bind it to your data.
- (Optional) Add some CSS to customize the input control's appearance.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/wijmo.css" />
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<!-- Angular 2 --/>
<!-- Supporting libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script src="scripts/wijmo.js" type="text/javascript"/></script/>
<script src="scripts/wijmo.input.js" type="text/javascript"/></script/>
<script src="scripts/wijmo.chart.js" type="text/javascript"/></script/>
<script src="scripts/wijmo.angular2.js" type="text/javascript"/></script/>
<script>
System.import('./src/app');
</script>
</head>
<body>
<!-- Add root application component -->
<app-cmp>
<wj-flex-pie [itemsSource]="itemsSource"
[binding]="'value'"
[bindingName]="'name'">
</wj-flex-pie>
</app-cmp>
</body>
</html>
// Common data service
@Injectable()
export class DataSvc {
// data used to generate random items
getData(): any[] {
var names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples'],
data = [];
for (var i = 0; i < names.length; i++) {
data.push({
name: names[i],
value: Math.round(Math.random() * 100)
});
}
return data;
}
}
----------------Component---------
// Angular
import * as wjcChart from 'wijmo/wijmo.chart';
import * as wjcInput from 'wijmo/wijmo.input';
import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
import { WjInputModule } from 'wijmo/wijmo.angular2.input';
import { TabsModule } from './components/AppTab';
import { DataSvc } from './services/DataSvc';
// The Explorer application root component.
@Component({
selector: 'app-cmp'
})
export class AppCmp {
protected dataSvc: DataSvc;
itemsSource: { name: string, value: number }[];
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
// populate itemsSource
this.dataSvc = dataSvc;
this.itemsSource = this.dataSvc.getData();
}
}
@NgModule({
imports: [WjInputModule, WjChartModule, BrowserModule, FormsModule, TabsModule],
declarations: [AppCmp],
providers: [DataSvc],
bootstrap: [AppCmp]
})
export class AppModule {
}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
Result (live):
Basic Features
The FlexPie control has five basic properties that allow you to customize its layout and appearance:
-
innerRadius: Specifies the control's inner radius to support donut charts.
-
offset: Specifies the offset of the pie slices from the center of the control.
-
startAngle: Starting at the nine o'clock position, specifies the angle to start drawing pie slices.
-
palette: Specifies an array of default colors to be used when rendering pie slices.
-
reversed: Determines whether the control should draw pie slices clockwise (false) or counterclockwise (true).
The example below allows you to see what happens when you change these properties. Also, clicking on a pie slice will
display a tooltip for the data point.
<wj-flex-pie #basicPie
[itemsSource]="itemsSource"
[binding]="'value'"
[bindingName]="'name'"
[palette] ="chartPalette"
[innerRadius]="innerRadius"
[offset]="offset"
[startAngle]="startAngle"
[reversed]="reversed">
</wj-flex-pie>
<div class="form-group">
<label class="col-md-3 control-label">Inner Radius</label>
<div class="col-md-9">
<wj-input-number #inputInnerRadius (valueChanged)="innerRadiusChanged(inputInnerRadius)"
[min]="0"
[max]="1"
[step]=".1"
[format]="'n'">
</wj-input-number>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Offset</label>
<div class="col-md-9">
<wj-input-number #inputOffset (valueChanged)="offsetChanged(inputOffset)"
[min]="0"
[max]="1"
[step]=".1"
[format]="n">
</wj-input-number>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Start Angle</label>
<div class="col-md-9">
<wj-input-number #inputStartAngle (valueChanged)="startAngleChanged(inputStartAngle)"
[min]="-360"
[max]="360"
[step]="45">
</wj-input-number>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<wj-menu #palMenu
[header]="'Palette: <b>' + (palette) + '</b>'"
[itemsSource]="palettes"
(itemClicked)="paletteChanged(palMenu)">
</wj-menu>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="reversed"> Reversed?
</label>
</div>
</div>
</div>
export class AppCmp {
protected dataSvc: DataSvc;
itemsSource: { name: string, value: number }[];
//properties of FlexPie
innerRadius = 0;
offset = 0;
startAngle = 0;
reversed = false;
palette = 'standard';
palettes = ['standard', 'cocoa', 'coral', 'dark', 'highcontrast', 'light', 'midnight', 'minimal', 'modern', 'organic', 'slate'];
chartPalette: wjcChart.Palettes;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.itemsSource = this.dataSvc.getData();
}
paletteChanged = (sender: wjcInput.Menu) => {
var p = this.palettes[sender.selectedIndex];
this.palette = p;
this.chartPalette = wjcChart.Palettes[p];
};
innerRadiusChanged = (sender: wjcInput.InputNumber) => {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
this.innerRadius = sender.value;
};
offsetChanged = (sender: wjcInput.InputNumber) => {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
this.offset = sender.value;
};
startAngleChanged = (sender: wjcInput.InputNumber) => {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
this.startAngle = sender.value;
};
}
Legend and Titles
The legend properties can be used to customize the appearance of the chart's legend. The
header and footer properties can be used to add titles to the FlexPie control as well.
The following example allows you to change the FlexPie's legend.position, header, and
footer properties in real-time.
<wj-flex-pie [itemsSource]="itemsSource"
[binding]="'value'"
[bindingName]="'name'"
[header]="header"
[footer]="footer">
<wj-flex-chart-legend [position]="legendPosition"></wj-flex-chart-legend>
</wj-flex-pie>
<div class="form-group">
<label class="col-md-3 control-label">Header</label>
<div class="col-md-9">
<input type="text" class="form-control" [(ngModel)]="header" placeholder="Specify the FlexPie's header" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Footer</label>
<div class="col-md-9">
<input type="text" class="form-control" [(ngModel)]="footer" placeholder="Specify the FlexPie's footer" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<wj-menu [header]="'Legend Position'" [(value)]="legendPosition">
<wj-menu-item [value]="'None'">None</wj-menu-item>
<wj-menu-item [value]="'Left'">Left</wj-menu-item>
<wj-menu-item [value]="'Top'">Top</wj-menu-item>
<wj-menu-item [value]="'Right'">Right</wj-menu-item>
<wj-menu-item [value]="'Bottom'">Bottom</wj-menu-item>
</wj-menu>
</div>
</div>
export class AppCmp {
protected dataSvc: DataSvc;
itemsSource: { name: string, value: number }[];
//properties of FlexPie
header = 'Fruit By Value';
footer = '2014 GrapeCity, inc.';
legendPosition = 'Right';
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.itemsSource = this.dataSvc.getData();
}
}
Selection
The FlexPie control allows you to select data points by clicking or touching a pie slice. Use the selectionMode
property to specify whether you want to allow selection by data point or no selection at all (default).
Setting the selctionMode property to Point causes the FlexPie to update the selection property when
the user clicks on a pie slice, and to apply the "wj-state-selected" class to the selected element. Setting the FlexPie's
selectionMode property to Series or None will disable selections within the control.
The FlexPie offers three additional properties to customize the selection:
-
selectedItemOffset: Specifies the offset of the selected pie slice from the center of the control.
-
selectedItemPosition: Specifies the position of the selected pie slice. The available options are Top, Bottom,
Left, Right, and None (default).
-
isAnimated: Determines whether or not to animate the selection.
<wj-flex-pie [itemsSource]="itemsSource"
[binding]="'value'"
[bindingName]="'name'"
[selectionMode]="'Point'"
[selectedItemPosition]="selectedPosition"
[selectedItemOffset]="selectedOffset"
[isAnimated]="isAnimated">
</wj-flex-pie>
<div class="form-group">
<label class="col-md-3 control-label">Selected Item Offset</label>
<div class="col-md-9">
<wj-input-number #inputSelectedOffset (valueChanged)="selectedOffsetChanged(inputSelectedOffset)"
[min]="0"
[max]=".5"
[step]=".1"
[format]="'n'">
</wj-input-number>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<wj-menu [header]="'Selected Item Position'" [(value)]="selectedPosition">
<wj-menu-item [value]="'None'">None</wj-menu-item>
<wj-menu-item [value]="'Left'">Left</wj-menu-item>
<wj-menu-item [value]="'Top'">Top</wj-menu-item>
<wj-menu-item [value]="'Right'">Right</wj-menu-item>
<wj-menu-item [value]="'Bottom'">Bottom</wj-menu-item>
</wj-menu>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="isAnimated"> Is Animated?
</label>
</div>
</div>
</div>
export class AppCmp {
protected dataSvc: DataSvc;
itemsSource: { name: string, value: number }[];
//properties of FlexPie
selectedPosition = 'Top';
selectedOffset = 0;
isAnimated = true;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.itemsSource = this.dataSvc.getData();
}
selectedOffsetChanged = (sender: wjcInput.InputNumber) => {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
this.selectedOffset = sender.value;
};
}
Theming
The appearance of the FlexPie control is largely defined in CSS. In addition to the default theme, we
include several professionally designed themes that customize the appearance of all Wijmo controls to
achieve a consistent, attractive look.
You can customize the appearance of the FlexPie control using CSS. To do this, copy the CSS rules from the
default theme to a new CSS file and modify the properties as needed.
In this example, we added the "custom-pie-chart" CSS class to the control and defined some CSS rules to
change the fill, font family, and font weight of the header, footer, and legend.
<wj-flex-pie [itemsSource]="itemsSource"
[binding]="'value'"
[bindingName]="'name'"
[header]="'Header'"
[footer]="'Footer'"
class="custom-pie-chart">
</wj-flex-pie>
.custom-pie-chart.wj-flexchart .wj-header .wj-title,
.custom-pie-chart.wj-flexchart .wj-footer .wj-title,
.custom-pie-chart.wj-flexchart .wj-legend > .wj-label {
fill: #666;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
Result (live):
