Wijmo 5

FlexPie 101

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

Getting Started

Steps for getting started with the FlexPie control in JavaScript applications:

  1. Add references to Wijmo.
  2. Add markup to serve as the Wijmo control's host.
  3. Initialize the Wijmo control(s) via JavaScript.
  4. (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 href="css/app.css" rel="stylesheet" type="text/css" /> <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> </head> <body> <!-- FlexPie --> <div id="introChart"></div> </body> </html>
// create controls var data = [], chart = new wijmo.chart.FlexPie('#introChart'), names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples']; // populate itemsSource for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: Math.round(Math.random() * 100) }); } // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = data; chart.endUpdate();

Result (live):

Basic Features

The FlexPie 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 pie slice will display a tooltip for the data point.

<div id="basicChart"></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 id="basicInnerRadius" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <input id="basicOffset" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <input id="basicStartAngle" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div id="basicPalette"></div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="basicReversed" type="checkbox" /> Reversed? </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#basicChart'), innerRadius = new wijmo.input.InputNumber('#basicInnerRadius'), offset = new wijmo.input.InputNumber('#basicOffset'), startAngle = new wijmo.input.InputNumber('#basicStartAngle'), palettes = new wijmo.input.Menu('#basicPalette'), reversed = document.getElementById('basicReversed'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.endUpdate(); // innerRadius - initialize InputNumber's properties innerRadius.min = 0; innerRadius.max = 1; innerRadius.step = 0.1; innerRadius.format = 'n'; innerRadius.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.innerRadius = sender.value; }); // offset - initialize InputNumber's properties offset.min = 0; offset.max = 1; offset.step = 0.1; offset.format = 'n'; offset.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.offset = sender.value; }); // startAngle - initialize InputNumber's properties startAngle.min = -360; startAngle.max = 360; startAngle.step = 45; startAngle.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.startAngle = sender.value; }); // palettes - initialize Menu's properties palettes.itemsSource = app.palettes; palettes.selectedValue = 'standard'; palettes.textChanged.addHandler(function (sender) { if (!sender.selectedValue) return; chart.palette = wijmo.chart.Palettes[app.palettes[sender.selectedIndex]]; app.updateMenuHeader(sender, '<b>Palette</b>: ', sender.text); }); app.updateMenuHeader(palettes, '<b>Palette</b>: ', palettes.text); // change event for reversed checkbox reversed.addEventListener('change', function() { chart.reversed = this.checked; });

Result (live):

Legend & 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.

<div id="ltChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Header</label> <div class="col-md-9"> <input id="ltHeader" type="text" class="form-control" 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 id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="ltLegPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#ltChart'), menu = new wijmo.input.Menu('#ltLegPos'), header = document.getElementById('ltHeader'), footer = document.getElementById('ltFooter'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Fruit By Value'; chart.footer = '2014 GrapeCity, inc.'; chart.endUpdate(); // header input header.value = chart.header; header.addEventListener('input', function () { chart.header = this.value; }); // footer input footer.value = chart.footer; footer.addEventListener('input', function () { chart.footer = this.value; }); // legend.position - initialize Menu's properties menu.selectedIndexChanged.addHandler(function (sender, args) { if (!sender.selectedValue) return; chart.legend.position = sender.selectedValue; app.updateMenuHeader(sender, '<b>Legend Position</b>: ', sender.text); }); menu.selectedValue = 'Right';

Result (live):

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:

<div id="selChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Selected Item Offset</label> <div class="col-md-9"> <input id="selItemOffset" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="selItemPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="selAnimated" type="checkbox"> Is Animated? </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#selChart'), inputNumber = new wijmo.input.InputNumber('#selItemOffset'), menu = new wijmo.input.Menu('#selItemPos'), check = document.getElementById('selAnimated'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.isAnimated = true; chart.selectionMode = 'Point'; chart.selectedItemPosition = 'Top'; chart.endUpdate(); // selectedItemOffset - initialize InputNumber's properties inputNumber.min = 0; inputNumber.max = 0.5; inputNumber.step = 0.1; inputNumber.format = 'n'; inputNumber.valueChanged.addHandler(function(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } chart.selectedItemOffset = sender.value; }); // selectedItemPosition - initialize Menu's properties menu.selectedIndexChanged.addHandler(function(sender) { if (!sender.selectedValue) return; chart.selectedItemPosition = sender.selectedValue; app.updateMenuHeader(sender, '<b>Selected Item Position</b>: ', sender.text); }); menu.selectedValue = 'Top'; // isAnimated - initialize checkbox properties check.checked = true; check.addEventListener('change', function() { chart.isAnimated = this.checked; });

Result (live):

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.

<div id="themeChart" class="custom-pie-chart"></div>
// create controls var chart = new wijmo.chart.FlexPie('#themeChart'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Header'; chart.footer = 'Footer'; chart.endUpdate();
.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):