Animation

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

The ChartAnimation class has a duration property that allows you to set the length of animation in milliseconds.

In this sample, maximum number of series is set to 5.

Learn about FlexChart | Animation Documentation | FlexChart API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@mescius/wijmo.chart'; import * as input from '@mescius/wijmo.input'; import * as animation from '@mescius/wijmo.chart.animation'; import { getData, getRandomData, getRandomValue } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { var flexChartPoints = 10; // create FlexChart, InputNumbers and Menus var flexChart = new chart.FlexChart('#theChart'), chartType = new input.Menu('#chartType'), chartAnimationMode = new input.Menu('#chartAnimationMode'), chartEasing = new input.Menu('#chartEasing'), chartDuration = new input.InputNumber('#chartDuration'), chartAddMenu = new input.Menu('#chartAddMenu'), chartRemoveMenu = new input.Menu('#chartRemoveMenu'); // flex chart flexChart.beginUpdate(); flexChart.chartType = chart.ChartType.Line; flexChart.itemsSource = getData(flexChartPoints); flexChart.bindingX = 'x'; // create data series for (var i = 0; i < 3; i++) { var series = new chart.Series(); series.binding = 'y' + i; series.name = 'Y' + (i + 1); flexChart.series.push(series); } flexChart.endUpdate(); var chartAnimation = new animation.ChartAnimation(flexChart, { animationMode: animation.AnimationMode.All, easing: animation.Easing.Swing, duration: 400 }); // Chart Type chartType.selectedValue = 'Line'; chartType.textChanged.addHandler((sender) => { if (!sender.selectedValue) return; flexChart.chartType = chart.ChartType[sender.selectedValue]; updateMenuHeader(chartType, '<b>ChartType</b>: ', sender.text); }); updateMenuHeader(chartType, '<b>ChartType</b>: ', chartType.text); // Chart Animation Mode chartAnimationMode.selectedValue = 'All'; chartAnimationMode.textChanged.addHandler((sender) => { if (!sender.selectedValue) return; const mode = animation.AnimationMode[sender.selectedValue]; if (chartAnimation.animationMode !== mode) { chartAnimation.animationMode = mode; chartAnimation.animate(); updateMenuHeader(chartAnimationMode, '<b>Animation Mode</b>: ', sender.text); } }); updateMenuHeader(chartAnimationMode, '<b>Animation Mode</b>: ', chartAnimationMode.text); // Chart Easing chartEasing.selectedValue = 'Swing'; chartEasing.textChanged.addHandler((sender) => { if (!sender.selectedValue) return; const easing = animation.Easing[sender.selectedValue]; if (chartAnimation.easing !== easing) { chartAnimation.easing = easing; chartAnimation.animate(); updateMenuHeader(chartEasing, '<b>Easing</b>: ', sender.text); } }); updateMenuHeader(chartEasing, '<b>Easing</b>: ', chartEasing.text); // Chart Duration chartDuration.value = 400; chartDuration.min = 200; chartDuration.max = 5000; chartDuration.step = 200; chartDuration.format = 'n0'; chartDuration.valueChanged.addHandler((sender) => { if (sender.value < sender.min || sender.value > sender.max) { return; } chartAnimation.duration = sender.value; chartAnimation.animate(); }); // Chart Reset Data document.getElementById('chartResetData').addEventListener('click', () => { if (flexChart) { flexChart.itemsSource = getData(flexChartPoints); } }); // Chart Adds chartAddMenu.itemClicked.addHandler((sender) => { if (!sender.selectedValue) return; chartChange[sender.selectedValue](); }); updateMenuHeader(chartAddMenu, 'Add', ''); // Chart Removes chartRemoveMenu.itemClicked.addHandler((sender) => { if (!sender.selectedValue) return; chartChange[sender.selectedValue](); }); updateMenuHeader(chartRemoveMenu, 'Remove', ''); var chartChange = { addSeries: () => { var len = flexChart.series.length; if (len >= 5) { return; } var series = new chart.Series(); series.binding = 'y' + len; series.name = 'Y' + (len + 1); flexChart.series.push(series); }, addFirstPoint: () => { flexChart.itemsSource.insert(0, getRandomData('added' + getRandomValue(1000))); }, addLastPoint: () => { flexChart.itemsSource.push(getRandomData('added' + getRandomValue(1000))); }, removeSeries: () => { if (flexChart.series.length <= 0) { return; } flexChart.series.pop(); }, removeFirstPoint: () => { if (flexChart.itemsSource.length) { flexChart.itemsSource.removeAt(0); } }, removeLastPoint: () => { if (flexChart.itemsSource.length) { flexChart.itemsSource.pop(); } } }; } function updateMenuHeader(menu, prefix, text) { menu.header = prefix + text; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="container-fluid well"> <div class="row"> <div class="col-sm-12 col-xs-12"> <select id="chartType"> <option value="Bar">Bar</option> <option value="Column">Column</option> <option value="Area">Area</option> <option value="Line">Line</option> <option value="LineSymbols">LineSymbols</option> <option value="Spline">Spline</option> <option value="SplineSymbols">SplineSymbols</option> <option value="SplineArea">SplineArea</option> <option value="Scatter">Scatter</option> </select> <select id="chartAnimationMode"> <option value="Point">Point</option> <option value="Series">Series</option> <option value="All">All</option> </select> <select id="chartEasing"> <option value="Linear">Linear</option> <option value="Swing">Swing</option> <option value="EaseInQuad">EaseInQuad</option> <option value="EaseOutQuad">EaseOutQuad</option> <option value="EaseInOutQuad">EaseInOutQuad</option> <option value="EaseInCubic">EaseInCubic</option> <option value="EaseOutCubic">EaseOutCubic</option> <option value="EaseInOutCubic">EaseInOutCubic</option> <option value="EaseInQuart">EaseInQuart</option> <option value="EaseOutQuart">EaseOutQuart</option> <option value="EaseInOutQuart">EaseInOutQuart</option> <option value="EaseInQuint">EaseInQuint</option> <option value="EaseOutQuint">EaseOutQuint</option> <option value="EaseInOutQuint">EaseInOutQuint</option> <option value="EaseInSine">EaseInSine</option> <option value="EaseOutSine">EaseOutSine</option> <option value="EaseInOutSine">EaseInOutSine</option> <option value="EaseInExpo">EaseInExpo</option> <option value="EaseOutExpo">EaseOutExpo</option> <option value="EaseInOutExpo">EaseInOutExpo</option> <option value="EaseInCirc">EaseInCirc</option> <option value="EaseOutCirc">EaseOutCirc</option> <option value="EaseInOutCirc">EaseInOutCirc</option> <option value="EaseInBack">EaseInBack</option> <option value="EaseOutBack">EaseOutBack</option> <option value="EaseInOutBack">EaseInOutBack</option> <option value="EaseInBounce">EaseInBounce</option> <option value="EaseOutBounce">EaseOutBounce</option> <option value="EaseInOutBounce">EaseInOutBounce</option> <option value="EaseInElastic">EaseInElastic</option> <option value="EaseOutElastic">EaseOutElastic</option> <option value="EaseInOutElastic">EaseInOutElastic</option> </select> <label id="chartLabelDuration" for="chartDuration">Duration:</label> <input id="chartDuration" /> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12 flexchart"> <button id="chartResetData" type="button" class="btn btn-default">reset data</button> <select id="chartAddMenu"> <option value="addSeries">Add Series</option> <option value="addFirstPoint">Add First Point</option> <option value="addLastPoint">Add Last Point</option> </select> <select id="chartRemoveMenu"> <option value="removeSeries">Remove Series</option> <option value="removeFirstPoint">Remove First Point</option> <option value="removeLastPoint">Remove Last Point</option> </select> </div> </div> </div> <div id="theChart"></div> </div> </body> </html>
import * as core from '@mescius/wijmo'; // generate some random data export function getData(numCount) { var data = new core.ObservableArray(); // for (var i = 0; i < numCount; i++) { data.push(getRandomData('random' + getRandomValue(1000))); } return data; } // export function getRandomData(idx) { return { //x: getRandomValue(100), x: idx, y0: getRandomValue(200), y1: getRandomValue(400), y2: getRandomValue(600), y3: getRandomValue(800), y4: getRandomValue(1000) }; } // export function getRandomValue(max) { return Math.round(Math.random() * max); }
.wj-flexgrid { height: 150px; margin-top:10px; } .wj-flexchart { height: 300px; } .wj-data-label { font-size: 75%; opacity: .9; } label { width: 150px; text-align: right; } .wj-control { margin-bottom: 3px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);