Wijmo 5

FlexRadar 101

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

Getting Started

Steps for getting started with the FlexRadar 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/angular.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.radar.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.animation.js" type="text/javascript"></script> <script src="scripts/wijmo.angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- this is the FlexRadar directive --> <wj-flex-radar items-source="itemsSource" binding-x="country"> <wj-flex-radar-series name="Sales" binding="sales"></wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> <wj-flex-chart-axis wj-property="axisY" min="0" max="100"></wj-flex-chart-axis> </wj-flex-radar> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // controller provides data app.controller('simpleCtrl', function appCtrl($scope) { var data = [], countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); // populate itemsSource for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.ceil(Math.random() * 80) + 20, sales: Math.ceil(Math.random() * 80) + 20 }); } $scope.itemsSource = data; });

Result (live):

Basic Features

The FlexRadar control has some 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.

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="country" chart-type="{{ chartType }}" total-angle="{{ totalAngle }}" start-angle="{{ startAngle }}" stacking="{{ stacking }}" reversed="{{ reversed }}"> <wj-flex-radar-series name="Sales" binding="sales"><wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Chart Type" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> <wj-menu-item value="'Column'">Column</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Stacking" value="stacking"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Stacked'">Stacked</wj-menu-item> <wj-menu-item value="'Stacked100pc'">Stacked100pc</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <wj-input-number control="inputStartAngle" value="ctx.startAngle" min="0" max="360" step="60"> </wj-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Total Angle</label> <div class="col-md-9"> <wj-input-number control="inputTotalAngle" value="ctx.totalAngle" min="90" max="360" step="90"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="reversed"> Reversed? </label> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="showDataLabel"> Show DataLabel? </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.chart = null; $scope.chartType = 'Line'; $scope.inputStartAngle = null; $scope.inputTotalAngle = null; $scope.startAngle = 0; $scope.totalAngle = 360; $scope.stacking = 'None'; $scope.reversed = false; $scope.showDataLabel = false; $scope.palette = 'standard'; $scope.ctx = { startAngle: 0, totalAngle: 360 }; $scope.$watch('ctx.startAngle', function () { var startAngle = $scope.inputStartAngle, val = $scope.ctx.startAngle; if (startAngle != null) { if (val < startAngle.min || val > startAngle.max) { return; } $scope.startAngle = val; } }); $scope.$watch('ctx.totalAngle', function () { var totalAngle = $scope.inputTotalAngle, val = $scope.ctx.totalAngle; if (totalAngle != null) { if (val < totalAngle.min || val > totalAngle.max) { return; } $scope.totalAngle = val; } }); $scope.$watch('showDataLabel', function () { var showDataLabel = $scope.showDataLabel; $scope.chart.dataLabel.content = showDataLabel ? '{y}' : ''; });

Result (live):

Line LineSymbols Area Scatter Column
None Stacked Stacked100pc

Polar Basic Features

The FlexRadar control can be a polar chart if xValues are number, it has some 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.

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="longitude" chart-type="{{ chartType }}" total-angle="{{ totalAngle }}" start-angle="{{ startAngle }}" stacking="{{ stacking }}" reversed="{{ reversed }}"> <wj-flex-radar-series name="Latitude1" binding="latitude1"><wj-flex-radar-series> <wj-flex-radar-series name="Latitude2" binding="latitude2"></wj-flex-radar-series> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Chart Type" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Stacking" value="stacking"> <wj-menu-item value="'None'">None</wj-menu-item> <wj-menu-item value="'Stacked'">Stacked</wj-menu-item> <wj-menu-item value="'Stacked100pc'">Stacked100pc</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <wj-input-number control="inputStartAngle" value="ctx.startAngle" min="0" max="360" step="60"> </wj-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Total Angle</label> <div class="col-md-9"> <wj-input-number control="inputTotalAngle" value="ctx.totalAngle" min="90" max="360" step="90"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="reversed"> Reversed? </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getPolarData(); $scope.chart = null; $scope.chartType = 'Line'; $scope.inputStartAngle = null; $scope.inputTotalAngle = null; $scope.startAngle = 0; $scope.totalAngle = 360; $scope.stacking = 'None'; $scope.reversed = false; $scope.palette = 'standard'; $scope.ctx = { startAngle: 0, totalAngle: 360 }; $scope.$watch('ctx.startAngle', function () { var startAngle = $scope.inputStartAngle, val = $scope.ctx.startAngle; if (startAngle != null) { if (val < startAngle.min || val > startAngle.max) { return; } $scope.startAngle = val; } }); $scope.$watch('ctx.totalAngle', function () { var totalAngle = $scope.inputTotalAngle, val = $scope.ctx.totalAngle; if (totalAngle != null) { if (val < totalAngle.min || val > totalAngle.max) { return; } $scope.totalAngle = val; } });

Result (live):

Line LineSymbols Area Scatter
None Stacked Stacked100pc

Animation

The FlexRadar control works with ChartAnimation.

You can use different animation modes for FlexRadar control by setting the animationMode property of the ChartAnimation.

<wj-flex-radar control="chart" items-source="itemsSource" binding-x="{{ bindingX }}" chart-type="{{ chartType }}"> <wj-flex-radar-series name="Sales" binding="sales"><wj-flex-radar-series> <wj-flex-radar-series name="Downloads" binding="downloads"></wj-flex-radar-series> <wj-flex-chart-axis wj-property="axisY" min="0" max="100"></wj-flex-chart-axis> <wj-flex-chart-animation animation-mode="{{animationMode}}" easing="{{easing}}" duration="{{duration}}"></wj-flex-chart-animation> </wj-flex-radar> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Chart Type" value="chartType"> <wj-menu-item value="'Line'">Line</wj-menu-item> <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item> <wj-menu-item value="'Area'">Area</wj-menu-item> <wj-menu-item value="'Scatter'">Scatter</wj-menu-item> <wj-menu-item value="'Column'">Column</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Animation Mode" value="animationMode"> <wj-menu-item value="'Point'">Point</wj-menu-item> <wj-menu-item value="'Series'">Series</wj-menu-item> <wj-menu-item value="'All'">All</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <wj-menu header="Easing" value="easing"> <wj-menu-item value="'Linear'">Linear</wj-menu-item> <wj-menu-item value="'Swing'">Swing</wj-menu-item> <wj-menu-item value="'EaseInQuad'">EaseInQuad</wj-menu-item> <wj-menu-item value="'EaseOutQuad'">EaseOutQuad</wj-menu-item> <wj-menu-item value="'EaseInOutQuad'">EaseInOutQuad</wj-menu-item> <wj-menu-item value="'EaseInCubic'">EaseInCubic</wj-menu-item> <wj-menu-item value="'EaseOutCubic'">EaseOutCubic</wj-menu-item> <wj-menu-item value="'EaseInOutCubic'">EaseInOutCubic</wj-menu-item> <wj-menu-item value="'EaseInQuart'">EaseInQuart</wj-menu-item> <wj-menu-item value="'EaseOutQuart'">EaseOutQuart</wj-menu-item> <wj-menu-item value="'EaseInOutQuart'">EaseInOutQuart</wj-menu-item> <wj-menu-item value="'EaseInQuint'">EaseInQuint</wj-menu-item> <wj-menu-item value="'EaseOutQuint'">EaseOutQuint</wj-menu-item> <wj-menu-item value="'EaseInOutQuint'">EaseInOutQuint</wj-menu-item> <wj-menu-item value="'EaseInSine'">EaseInSine</wj-menu-item> <wj-menu-item value="'EaseOutSine'">EaseOutSine</wj-menu-item> <wj-menu-item value="'EaseInOutSine'">EaseInOutSine</wj-menu-item> <wj-menu-item value="'EaseInExpo'">EaseInExpo</wj-menu-item> <wj-menu-item value="'EaseOutExpo'">EaseOutExpo</wj-menu-item> <wj-menu-item value="'EaseInOutExpo'">EaseInOutExpo</wj-menu-item> <wj-menu-item value="'EaseInCirc'">EaseInCirc</wj-menu-item> <wj-menu-item value="'EaseOutCirc'">EaseOutCirc</wj-menu-item> <wj-menu-item value="'EaseInOutCirc'">EaseInOutCirc</wj-menu-item> <wj-menu-item value="'EaseInBack'">EaseInBack</wj-menu-item> <wj-menu-item value="'EaseOutBack'">EaseOutBack</wj-menu-item> <wj-menu-item value="'EaseInOutBack'">EaseInOutBack</wj-menu-item> <wj-menu-item value="'EaseInBounce'">EaseInBounce</wj-menu-item> <wj-menu-item value="'EaseOutBounce'">EaseOutBounce</wj-menu-item> <wj-menu-item value="'EaseInOutBounce'">EaseInOutBounce</wj-menu-item> <wj-menu-item value="'EaseInElastic'">EaseInElastic</wj-menu-item> <wj-menu-item value="'EaseOutElastic'">EaseOutElastic</wj-menu-item> <wj-menu-item value="'EaseInOutElastic'">EaseInOutElastic</wj-menu-item> </wj-menu> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Duration</label> <div class="col-md-9"> <wj-input-number control="inputDuration" value="iptDuration" min="200" max="50000" step="200"> </wj-input-number> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input type="checkbox" ng-model="isPolarChart"> Is Polar Chart? </label> </div> </div> </div> </div>
$scope.itemsSource = dataSvc.getData(); $scope.chart = null; $scope.bindingX = 'country'; $scope.chartType = 'Line'; $scope.animationMode = 'Point'; $scope.easing = 'Swing'; $scope.duration = 400; $scope.iptDuration = 400; $scope.inputDuration = null; $scope.isPolarChart = false; $scope.$watch('iptDuration', function () { var duration = $scope.inputDuration, val = $scope.iptDuration; if (duration != null) { if (val < duration.min || val > duration.max) { return; } $scope.duration = val; $scope.chart.refresh(); } }); $scope.$watch('easing', function () { if ($scope.chart) { $scope.chart.refresh(); } }); $scope.$watch('animationMode', function () { if ($scope.chart) { $scope.chart.refresh(); } }); $scope.$watch('isPolarChart', function () { var isPolar = $scope.isPolarChart, chart = $scope.chart; if (!chart) { return; } chart.beginUpdate(); if (isPolar) { $scope.itemsSource = dataSvc.getPolarData(); $scope.bindingX = 'longitude'; chart.series[0].binding = 'latitude1'; chart.series[0].name = 'Latitude1'; chart.series[1].binding = 'latitude2'; chart.series[1].name = 'Latitude2'; } else { $scope.itemsSource = dataSvc.getData(); $scope.bindingX = 'country'; chart.series[0].binding = 'sales'; chart.series[0].name = 'Sales'; chart.series[1].binding = 'downloads'; chart.series[1].name = 'Downloads'; } chart.endUpdate(); });

Result (live):

Line LineSymbols Area Scatter Column
Point Series All
Linear Swing EaseInQuad EaseOutQuad EaseInOutQuad EaseInCubic EaseOutCubic EaseInOutCubic EaseInQuart EaseOutQuart EaseInOutQuart EaseInQuint EaseOutQuint EaseInOutQuint EaseInSine EaseOutSine EaseInOutSine EaseInExpo EaseOutExpo EaseInOutExpo EaseInCirc EaseOutCirc EaseInOutCirc EaseInBack EaseOutBack EaseInOutBack EaseInBounce EaseOutBounce EaseInOutBounce EaseInElastic EaseOutElastic EaseInOutElastic