Wijmo 5

Sunburst 101

This page shows how to get started with Wijmo's Sunburst chart control.

Getting Started

Here are the steps for getting started with the Sunburst chart control in AngularJS applications:

  1. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
  2. Add a component to provide data and logic.
  3. Add a Wijmo Sunburst control to the page and bind it to your data.
  4. (Optional) Add some CSS to customize the 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.chart.hierarchical.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-sunburst [itemsSource]="data" binding="value" [bindingName]="bindingName"> <wj-flex-pie-data-label position="Center" content="{name}"></wj-flex-pie-data-label> </wj-sunburst> </app-cmp> </body> </html>
// Common data service @Injectable() export class DataSvc { getData(): any[] { var data = [], times = [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'June'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']], years = [], year = new Date().getFullYear(), yearLen, i, quarterAdded = false; yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3); for (i = yearLen; i > 0; i--) { years.push(year - i); } // populate itemsSource years.forEach((y, i) => { var addQuarter = Math.random() > 0.5; if (!quarterAdded && i === years.length - 1) { //ensure add at least one quarter. addQuarter = true; } if (addQuarter) { quarterAdded = true; times.forEach((q, idx) => { var addMonth = Math.random() > 0.5, quar = 'Q' + (idx + 1); if (addMonth) { q.forEach(m => { data.push({ year: y.toString(), quarter: quar, month: m, value: Math.round(Math.random() * 100) }); }); } else { data.push({ year: y.toString(), quarter: quar, value: Math.round(Math.random() * 400) }); } }); } else { data.push({ year: y.toString(), value: Math.round(Math.random() * 1200) }); } }); return data; } } ----------------Component--------- // Angular import * as wjcChart from 'wijmo/wijmo.chart'; import * as wjcInput from 'wijmo/wijmo.input'; import { Component, View, EventEmitter, provide, Input, Inject, enableProdMode, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule} from 'wijmo/wijmo.angular2.chart'; import { WjChartHierarchicalModule } from 'wijmo/wijmo.angular2.chart.hierarchical'; 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', templateUrl: 'src/app.html' }) export class AppCmp { protected dataSvc: DataSvc; data: any[]; bindingName = ['year', 'quarter', 'month']; constructor( @Inject(DataSvc) dataSvc: DataSvc) { // populate itemsSource this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); } } @NgModule({ imports: [WjInputModule, WjChartModule, WjChartHierarchicalModule, TabsModule, BrowserModule, FormsModule], declarations: [AppCmp], providers: [DataSvc], bootstrap: [AppCmp] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);

Result (live):

Group Collection

The sample shows how to use the Sunburst chart with Grouped CollectionView.

<wj-sunburst [itemsSource]="groupCVData" binding="value" <wj-flex-pie-data-label position="Center" content="{name}"></wj-flex-pie-data-label> </wj-sunburst>
export class AppCmp { protected dataSvc: DataSvc; groupCVData: any[]; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.dataSvc = dataSvc; this.groupCVData = this.dataSvc.getGroupCVData(); } }

Result (live):

Basic Features

The Sunburst chart control has five basic properties that allow you to customize its layout and appearance:

The example below allows you to see what happens when you change these properties. Also, clicking on a sunburst slice will display a tooltip for the data point.

<wj-sunburst [itemsSource]="hierarchicalData" binding="value" childItemsPath="items" [bindingName]="bindingName" [palette] ="chartPalette" [innerRadius]="innerRadius" [offset]="offset" [startAngle]="startAngle" [reversed]="reversed"> <wj-flex-pie-data-label position="Center" content="{name}"></wj-flex-pie-data-label> </wj-sunburst> <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; hierarchicalData: any[]; //properties of Sunburst 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.hierarchicalData = this.dataSvc.getHierarchicalData(); } 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; }; }

Result (live):

Legend and Titles

The legend properties can be used to customize the appearance of the chart's legend. You can also use header and footer properties to add titles to the Sunburst chart control.

The following example allows you to change the Sunburst's legend.position, header, and footer properties in real-time.

<wj-sunburst [itemsSource]="data" binding="value" [bindingName]="bindingName" [header]="header" [footer]="footer"> <wj-flex-chart-legend [position]="legendPosition"></wj-flex-chart-legend> </wj-sunburst> <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 Sunburst'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 Sunburst'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; data: any[]; //properties of Sunburst header = 'Sales'; footer = 'GrapeCity, inc.'; legendPosition = 'Right'; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); } }

Result (live):

None Left Top Right Bottom

Selection

The Sunburst control allows you to select data points by clicking or touching a sunburst 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 Sunburst to update the selection property when the user clicks on a sunburst slice, and to apply the "wj-state-selected" class to the selected element. Setting the Sunburst's selectionMode property to Series or None will disable selections within the control.

The Sunburst chart offers three additional properties to customize the selection:

<wj-sunburst [itemsSource]="data" binding="value" [bindingName]="bindingName" selectionMode="Point" [selectedItemPosition]="selectedPosition" [selectedItemOffset]="selectedOffset" [isAnimated]="isAnimated"> </wj-sunburst> <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; data: any[]; //properties of FlexPie selectedPosition = 'Top'; selectedOffset = 0; isAnimated = true; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.dataSvc = dataSvc; this.data = this.dataSvc.getData(); } selectedOffsetChanged = (sender: wjcInput.InputNumber) => { if (sender.value < sender.min || sender.value > sender.max) { return; } this.selectedOffset = sender.value; }; }

Result (live):

None Left Top Right Bottom

Theming

The appearance of the Sunburst chart control is largely defined in CSS. In addition to a default theme, we include several professionally designed themes that customize the appearance of all Wijmo controls to achieve a consistent and attractive look.

You can customize the appearance of the Sunburst chart 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-sunburst-chart" CSS class to the control and defined some CSS rules to change the fill, font family, and font weight of the header and fill color of slices.

<wj-sunburst [itemsSource]="themingData" binding="value" bindingName="name" childItemsPath="items" header="Bullseye(target)" tooltipContent="" class="custom-sunburst-chart"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> </wj-sunburst>
.custom-sunburst-chart.wj-sunburst .wj-header .wj-title { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; } .custom-sunburst-chart.wj-sunburst ellipse, .custom-sunburst-chart.wj-sunburst path { stroke-width: 0; } .custom-sunburst-chart.wj-sunburst ellipse { fill: yellow; } .custom-sunburst-chart.wj-sunburst .slice-level2 > path { fill: red; } .custom-sunburst-chart.wj-sunburst .slice-level3 > path { fill: blue; } .custom-sunburst-chart.wj-sunburst .slice-level4 > path { fill: black; } .custom-sunburst-chart.wj-sunburst .slice-level5 > path { fill: white; stroke-width: 2; stroke: black; }

Result (live):