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.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@grapecity/wijmo.chart'; import * as input from '@grapecity/wijmo.input'; import * as animation from '@grapecity/wijmo.chart.animation'; import { getData, getRandomData, getRandomValue } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { var flexChartPoints = 10; // create a chart // 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; flexChart.series.push(series); } flexChart.palette = getRandomPalette(); 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(function (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(function (sender) { if (!sender.selectedValue) return; chartAnimation.animationMode = animation.AnimationMode[sender.selectedValue]; 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(function (sender) { if (!sender.selectedValue) return; chartAnimation.easing = animation.Easing[sender.selectedValue]; 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(function (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", function () { if (flexChart) { flexChart.itemsSource = getData(flexChartPoints); } }); //Chart Adds chartAddMenu.itemClicked.addHandler(function (sender) { if (!sender.selectedValue) return; chartChange[sender.selectedValue](); }); updateMenuHeader(chartAddMenu, 'Add', ''); //Chart Removes chartRemoveMenu.itemClicked.addHandler(function (sender) { if (!sender.selectedValue) return; chartChange[sender.selectedValue](); }); updateMenuHeader(chartRemoveMenu, 'Remove', ''); var chartChange = { addSeries: function () { var len = flexChart.series.length; if (len >= 5) { return; } var series = new chart.Series(); series.binding = 'y' + len; flexChart.series.push(series); }, addFirstPoint: function () { flexChart.itemsSource.insert(0, getRandomData('added' + getRandomValue(1000))); }, addLastPoint: function () { flexChart.itemsSource.push(getRandomData('added' + getRandomValue(1000))); }, removeSeries: function () { if (flexChart.series.length <= 0) { return; } flexChart.series.pop(); }, removeFirstPoint: function () { if (flexChart.itemsSource.length) { flexChart.itemsSource.removeAt(0); } }, removeLastPoint: function () { if (flexChart.itemsSource.length) { flexChart.itemsSource.pop(); } } }; } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; } // 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>GrapeCity Wijmo FlexChart Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></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 '@grapecity/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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjChartAnimation from '@grapecity/wijmo.chart.animation'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; flexChartPoints: number; duration: number; chartType: string; easing: string; animationMode: string; // references control in the view @ViewChild('flexChart') flexChart: wjChart.FlexChart; @ViewChild('animation') animation: wjChartAnimation.ChartAnimation; // constructor(@Inject(DataService) private dataService: DataService) { this.flexChartPoints = 10; this._setDataSource(); this.duration = 400; this.chartType = 'Line'; this.easing = 'Swing'; this.animationMode = 'All'; } // _setDataSource() { this.data = this.dataService.getData(this.flexChartPoints); } // resetChartData() { this._setDataSource(); } // itemAdd(args: wjInput.Menu) { var idx = args.selectedIndex; if (idx > -1) { this.func('add', idx); } } itemRemove(args: wjInput.Menu) { var idx = args.selectedIndex; if (idx > -1) { this.func('remove', idx); } } func(oper: string, idx: number) { var str = '', funcName; if (idx === 1) { str = 'FirstPoint'; } else if (idx === 2) { str = 'LastPoint'; } funcName = oper + 'ChartSeries' + str; this[funcName](); } addChartSeriesFirstPoint = function () { this.data.insert(0, this.dataService.getRandomData('added' + this.dataService.getRandomValue(1000))); }; addChartSeriesLastPoint = function () { this.data.push(this.dataService.getRandomData('added' + this.dataService.getRandomValue(1000))); }; removeChartSeriesFirstPoint = function () { if (this.data.length) { this.data.removeAt(0); } }; removeChartSeriesLastPoint = function () { if (this.data.length) { this.data.pop(); } }; valueChanged = (sender: wjInput.InputNumber) => { if (sender.value < sender.min || sender.value > sender.max) { return; } this.duration = sender.value; }; addChartSeries = function () { var chart = this.flexChart, len = chart.series.length; if (len >= 5) { return; } var series = new wjChart.Series(); series.binding = len ? 'y' + len : 'y'; series.name = 'Y' + (chart.series.length + 1); chart.series.push(series); }; removeChartSeries = function () { var chart = this.flexChart; if (chart.series.length <= 0) { return; } chart.series.pop(); }; animationModeChanged() { this.animation.animationMode = <any>this.animationMode; this.flexChart.refresh(true); } } // @NgModule({ imports: [FormsModule, WjInputModule, WjChartModule, WjChartAnimationModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="form-group"> <div class="container-fluid well"> <div class="row"> <div class="col-sm-12 col-xs-12"> <wj-menu [(value)]="chartType" header="Chart type"> <wj-menu-item value="Bar">Bar</wj-menu-item> <wj-menu-item value="Column">Column</wj-menu-item> <wj-menu-item value="Area">Area</wj-menu-item> <wj-menu-item value="Line">Line</wj-menu-item> <wj-menu-item value="LineSymbols">LineSymbols</wj-menu-item> <wj-menu-item value="Spline">Spline</wj-menu-item> <wj-menu-item value="SplineSymbols">SplineSymbols</wj-menu-item> <wj-menu-item value="SplineArea">SplineArea</wj-menu-item> <wj-menu-item value="Scatter">Scatter</wj-menu-item> </wj-menu> <wj-menu [(value)]="animationMode" header="Animation mode" (itemClicked)="animationModeChanged()"> <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> <wj-menu [(value)]="easing" header="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> <label>Duration</label> <wj-input-number #inputDuration (valueChanged)="valueChanged(inputDuration)" [value]="400" [min]="200" [max]="5000" [step]="200" format="n0"> </wj-input-number> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12 flexchart"> <button id="chartResetData" type="button" class="btn btn-default" (click)="resetChartData()">reset data</button> <wj-menu #add header="Add" (itemClicked)="itemAdd(add)"> <wj-menu-item>Add Series</wj-menu-item> <wj-menu-item>Add First Point</wj-menu-item> <wj-menu-item>Add Last Point</wj-menu-item> </wj-menu> <wj-menu #remove header="Remove" (itemClicked)="itemRemove(remove)"> <wj-menu-item>Remove Series</wj-menu-item> <wj-menu-item>Remove First Point</wj-menu-item> <wj-menu-item>Remove Last Point</wj-menu-item> </wj-menu> </div> </div> </div> <wj-flex-chart #flexChart [itemsSource]="data" [legendToggle]="true" [chartType]="chartType" bindingX="x"> <wj-flex-chart-series binding="y0" name="Y1"></wj-flex-chart-series> <wj-flex-chart-series binding="y1" name="Y2"></wj-flex-chart-series> <wj-flex-chart-series binding="y2" name="Y3"></wj-flex-chart-series> <wj-flex-chart-animation #animation [easing]="easing" [duration]="duration"></wj-flex-chart-animation> </wj-flex-chart> </div> </div> <div id="theChart"></div> import { Injectable } from '@angular/core'; import * as core from '@grapecity/wijmo'; // @Injectable() export class DataService { getData(numCount: number) { var data = new core.ObservableArray(); // for (var i = 0; i < numCount; i++) { data.push(this.getRandomData('random' + this.getRandomValue(1000))); } return data; } // getRandomData(idx: number | string) { return { //x: getRandomValue(100), x: idx, y0: this.getRandomValue(200), y1: this.getRandomValue(400), y2: this.getRandomValue(600), y3: this.getRandomValue(800), y4: this.getRandomValue(1000) } } // getRandomValue(max: number) { return Math.round(Math.random() * max); } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <div class="container-fluid well"> <div class="row"> <div class="col-sm-12 col-xs-12"> <wj-menu :value="chartType" :header="'Chart type'" :itemClicked="selectedTypeChanged"> <wj-menu-item value="Bar">Bar</wj-menu-item> <wj-menu-item value="Column">Column</wj-menu-item> <wj-menu-item value="Area">Area</wj-menu-item> <wj-menu-item value="Line">Line</wj-menu-item> <wj-menu-item value="LineSymbols">LineSymbols</wj-menu-item> <wj-menu-item value="Spline">Spline</wj-menu-item> <wj-menu-item value="SplineSymbols">SplineSymbols</wj-menu-item> <wj-menu-item value="SplineArea">SplineArea</wj-menu-item> <wj-menu-item value="Scatter">Scatter</wj-menu-item> </wj-menu> <wj-menu :value="animationMode" :header="'Animation mode'" :itemClicked="animationModeChanged"> <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> <wj-menu :value="easing" :header="'Easing'" :itemClicked="selectedEasingChanged"> <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> <label>Duration</label> <wj-input-number :valueChanged="valueChanged" :value=400 :min=200 :max=5000 :step=200 format="n0"> </wj-input-number> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12 flexchart"> <button id="chartResetData" type="button" class="btn btn-default" v-on:click="resetChartData">reset data</button> <wj-menu header="Add" :itemClicked="itemAdd"> <wj-menu-item>Add Series</wj-menu-item> <wj-menu-item>Add First Point</wj-menu-item> <wj-menu-item>Add Last Point</wj-menu-item> </wj-menu> <wj-menu header="Remove" :itemClicked="itemRemove"> <wj-menu-item>Remove Series</wj-menu-item> <wj-menu-item>Remove First Point</wj-menu-item> <wj-menu-item>Remove Last Point</wj-menu-item> </wj-menu> </div> </div> </div> <wj-flex-chart :itemsSource="data" :legendToggle="true" :chartType="chartType" bindingX="x" :initialized="initializeChart"> <wj-flex-chart-series binding="y0" name="Y1"></wj-flex-chart-series> <wj-flex-chart-series binding="y1" name="Y2"></wj-flex-chart-series> <wj-flex-chart-series binding="y2" name="Y3"></wj-flex-chart-series> <wj-flex-chart-animation :initialized="initializeAnimation" :easing="easing" :duration="duration"></wj-flex-chart-animation> </wj-flex-chart> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.animation'; import { getData, getRandomData, getRandomValue } from './data'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjChartAnimation from '@grapecity/wijmo.chart.animation'; var chartAnimation= null; new Vue({ el: "#app", data: { data: null, flexChartPoints: 10, duration: 400, chartType: 'Line', easing: 'Swing', animationMode: 'All' }, methods:{ initializeChart(chart){ this.flexChart = chart; this._setDataSource(); }, initializeAnimation(animation){ chartAnimation = animation; }, _setDataSource() { this.data = getData(this.flexChartPoints); }, resetChartData() { this._setDataSource(); }, selectedTypeChanged(e){ if (e.selectedValue) { this.chartType = e.selectedValue; } }, selectedEasingChanged(e){ if (e.selectedValue) { this.easing = e.selectedValue; } }, itemAdd(args) { var idx = args.selectedIndex; if (idx > -1) { this.func('add', idx); } }, itemRemove(args) { var idx = args.selectedIndex; if (idx > -1) { this.func('remove', idx); } }, func(oper, idx) { var str = '', funcName; if (idx === 1) { str = 'FirstPoint'; } else if (idx === 2) { str = 'LastPoint'; } funcName = oper + 'ChartSeries' + str; this[funcName](); }, addChartSeriesFirstPoint: function () { this.data.insert(0, getRandomData('added' + getRandomValue(1000))); }, addChartSeriesLastPoint: function () { this.data.push(getRandomData('added' + getRandomValue(1000))); }, removeChartSeriesFirstPoint: function () { if (this.data.length) { this.data.removeAt(0); } }, removeChartSeriesLastPoint: function () { if (this.data.length) { this.data.pop(); } }, valueChanged: (sender) => { if (sender.value < sender.min || sender.value > sender.max) { return; } //this.duration = sender.value; chartAnimation.duration = sender.value; }, addChartSeries: function () { var chart = this.flexChart, len = chart.series.length; if (len >= 5) { return; } var series = new wjChart.Series(); series.binding = len ? 'y' + len : 'y'; series.name = 'Y' + (chart.series.length + 1); chart.series.push(series); }, removeChartSeries: function () { var chart = this.flexChart; if (chart.series.length <= 0) { return; } chart.series.pop(); }, animationModeChanged(e) { this.animationMode = e.selectedValue; chartAnimation.animationMode = this.animationMode; this.flexChart.refresh(true); } } }); </script> <style> .wj-flexchart { height: 300px; } .wj-data-label { font-size: 75%; opacity: .9; } label { width: 150px; text-align: right; } .wj-control { margin-bottom: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import * as core from '@grapecity/wijmo'; 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); } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from '@grapecity/wijmo.chart'; import * as Input from '@grapecity/wijmo.react.input'; import * as Chart from '@grapecity/wijmo.react.chart'; import * as ChartAnimation from '@grapecity/wijmo.react.chart.animation'; import { getData, getRandomData, getRandomValue } from './data'; // class App extends React.Component { constructor(props) { super(props); this.state = { flexChartPoints: 10, duration: 400, chartType: "Line", easing: 'Swing', animationMode: "All" }; } render() { return <div className="container"> <div className="form-group"> <div className="container-fluid well"> <div className="row"> <Input.Menu value={this.state.chartType} header="Chart type" itemClicked={this.selectedTypeChanged.bind(this)}> <Input.MenuItem value="Bar">Bar</Input.MenuItem> <Input.MenuItem value="Column">Column</Input.MenuItem> <Input.MenuItem value="Area">Area</Input.MenuItem> <Input.MenuItem value="Line">Line</Input.MenuItem> <Input.MenuItem value="LineSymbols">LineSymbols</Input.MenuItem> <Input.MenuItem value="Spline">Spline</Input.MenuItem> <Input.MenuItem value="SplineSymbols">SplineSymbols</Input.MenuItem> <Input.MenuItem value="SplineArea">SplineArea</Input.MenuItem> <Input.MenuItem value="Scatter">Scatter</Input.MenuItem> </Input.Menu> <Input.Menu value={this.state.animationMode} header="Animation mode" itemClicked={this.selectedanimationModeChanged.bind(this)}> <Input.MenuItem value="Point">Point</Input.MenuItem> <Input.MenuItem value="Series">Series</Input.MenuItem> <Input.MenuItem value="All">All</Input.MenuItem> </Input.Menu> <Input.Menu value={this.state.easing} header="Easing" itemClicked={this.selectedEasingChanged.bind(this)}> <Input.MenuItem value="Linear">Linear</Input.MenuItem> <Input.MenuItem value="Swing">Swing</Input.MenuItem> <Input.MenuItem value="EaseInQuad">EaseInQuad</Input.MenuItem> <Input.MenuItem value="EaseOutQuad">EaseOutQuad</Input.MenuItem> <Input.MenuItem value="EaseInOutQuad">EaseInOutQuad</Input.MenuItem> <Input.MenuItem value="EaseInCubic">EaseInCubic</Input.MenuItem> <Input.MenuItem value="EaseOutCubic">EaseOutCubic</Input.MenuItem> <Input.MenuItem value="EaseInOutCubic">EaseInOutCubic</Input.MenuItem> <Input.MenuItem value="EaseInQuart">EaseInQuart</Input.MenuItem> <Input.MenuItem value="EaseOutQuart">EaseOutQuart</Input.MenuItem> <Input.MenuItem value="EaseInOutQuart">EaseInOutQuart</Input.MenuItem> <Input.MenuItem value="EaseInQuint">EaseInQuint</Input.MenuItem> <Input.MenuItem value="EaseOutQuint">EaseOutQuint</Input.MenuItem> <Input.MenuItem value="EaseInOutQuint">EaseInOutQuint</Input.MenuItem> <Input.MenuItem value="EaseInSine">EaseInSine</Input.MenuItem> <Input.MenuItem value="EaseOutSine">EaseOutSine</Input.MenuItem> <Input.MenuItem value="EaseInOutSine">EaseInOutSine</Input.MenuItem> <Input.MenuItem value="EaseInExpo">EaseInExpo</Input.MenuItem> <Input.MenuItem value="EaseOutExpo">EaseOutExpo</Input.MenuItem> <Input.MenuItem value="EaseInOutExpo">EaseInOutExpo</Input.MenuItem> <Input.MenuItem value="EaseInCirc">EaseInCirc</Input.MenuItem> <Input.MenuItem value="EaseOutCirc">EaseOutCirc</Input.MenuItem> <Input.MenuItem value="EaseInOutCirc">EaseInOutCirc</Input.MenuItem> <Input.MenuItem value="EaseInBack">EaseInBack</Input.MenuItem> <Input.MenuItem value="EaseOutBack">EaseOutBack</Input.MenuItem> <Input.MenuItem value="EaseInOutBack">EaseInOutBack</Input.MenuItem> <Input.MenuItem value="EaseInBounce">EaseInBounce</Input.MenuItem> <Input.MenuItem value="EaseOutBounce">EaseOutBounce</Input.MenuItem> <Input.MenuItem value="EaseInOutBounce">EaseInOutBounce</Input.MenuItem> <Input.MenuItem value="EaseInElastic">EaseInElastic</Input.MenuItem> <Input.MenuItem value="EaseOutElastic">EaseOutElastic</Input.MenuItem> <Input.MenuItem value="EaseInOutElastic">EaseInOutElastic</Input.MenuItem> </Input.Menu> <span> Duration </span> <Input.InputNumber valueChanged={this.valueChanged.bind(this)} value={this.state.duration} min={200} max={5000} step={200} format="n0"> </Input.InputNumber> </div> <div className="row"> <button id="chartResetData" onClick={this.resetChartData.bind(this)} type="button" className="btn btn-default"> reset data </button> <Input.Menu header="Add" itemClicked={this.itemAdd.bind(this)}> <Input.MenuItem>Add Series</Input.MenuItem> <Input.MenuItem>Add First Point</Input.MenuItem> <Input.MenuItem>Add Last Point</Input.MenuItem> </Input.Menu> <Input.Menu header="Remove" itemClicked={this.itemRemove.bind(this)}> <Input.MenuItem>Remove Series</Input.MenuItem> <Input.MenuItem>Remove First Point</Input.MenuItem> <Input.MenuItem>Remove Last Point</Input.MenuItem> </Input.Menu> </div> </div> </div> <Chart.FlexChart itemsSource={this.state.data} legendToggle={true} chartType={this.state.chartType} bindingX="x" initialized={this.initializeChart.bind(this)}> <Chart.FlexChartSeries binding="y0" name="Y1"></Chart.FlexChartSeries> <Chart.FlexChartSeries binding="y1" name="Y2"></Chart.FlexChartSeries> <Chart.FlexChartSeries binding="y2" name="Y3"></Chart.FlexChartSeries> <ChartAnimation.FlexChartAnimation initialized={this.initializeAnimation.bind(this)} easing={this.state.easing} duration={this.state.duration}> </ChartAnimation.FlexChartAnimation> </Chart.FlexChart> </div>; } initializeChart(chart) { this.flexChart = chart; this._setDataSource(); } initializeAnimation(animation) { this.chartAnimation = animation; } _setDataSource() { this.setState({ data: getData(this.state.flexChartPoints) }); } resetChartData() { this._setDataSource(); } selectedTypeChanged(e) { console.log("selectedTypeIndexChanged " + e.selectedValue); if (e.selectedValue) { this.setState({ chartType: e.selectedValue }); } } selectedanimationModeChanged(e) { if (e.selectedValue) { this.setState({ animationMode: e.selectedValue }); } } selectedEasingChanged(e) { if (e.selectedValue) { this.setState({ easing: e.selectedValue }); } } itemAdd(args) { var idx = args.selectedIndex; if (idx > -1) { this.func('add', idx); } } itemRemove(args) { var idx = args.selectedIndex; if (idx > -1) { this.func('remove', idx); } } func(oper, idx) { var str = '', funcName; if (idx === 1) { str = 'FirstPoint'; } else if (idx === 2) { str = 'LastPoint'; } funcName = oper + 'ChartSeries' + str; this[funcName](); } addChartSeriesFirstPoint() { this.state.data.insert(0, getRandomData('added' + getRandomValue(1000))); } addChartSeriesLastPoint() { var data = this.state.data; data.push(getRandomData('added' + getRandomValue(1000))); this.setState({ data: data }); } removeChartSeriesFirstPoint() { if (this.state.data.length) { var data = this.state.data; data.removeAt(0); this.setState({ data: data }); } } removeChartSeriesLastPoint() { if (this.state.data.length) { var data = this.state.data; data.pop(); this.setState({ data: data }); } } valueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } //this.duration = sender.value; if (this.chartAnimation) { this.chartAnimation.duration = sender.value; this.setState({ duration: sender.value }); } } addChartSeries() { var chart = this.flexChart, len = chart.series.length; if (len >= 5) { return; } var series = new wjChart.Series(); series.binding = len ? 'y' + len : 'y'; series.name = 'Y' + (chart.series.length + 1); chart.series.push(series); } removeChartSeries() { var chart = this.flexChart; if (chart.series.length <= 0) { return; } chart.series.pop(); } animationModeChanged() { if (this.chartAnimation) { this.chartAnimation.animationMode = this.state.animationMode; this.flexChart.refresh(true); } } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .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; } import * as core from '@grapecity/wijmo'; 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); }