Dynamic Line Chart

The FlexChart receives notifications when the data changes and updates the chart automatically. The sample shows dynamic line chart that updates automatically

The chart below is bound to an itemsSource that receives new items at a given interval. When new items are added to the data source, old items are removed to keep the total item count constant. The result is a dynamic scrolling chart.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { header: 'CPU Utilization', chartType: wjChart.ChartType.Line, bindingX: 'x', series: [{ binding: 'y' }], axisX: { position: wjChart.Position.None }, axisY: { min: 0, max: 100, title: 'Utilization(%)' }, itemsSource: getData(200) }); // // start changing the data function addPoints() { // append new points, remove old points let arr = theChart.collectionView.sourceCollection, pt = arr[arr.length - 1], y = Math.random() * 100; // arr.push({ x: pt.x + 1, y: y }); arr.splice(0, 1); // // update chart theChart.collectionView.refresh(); // // and keep updating setTimeout(function () { addPoints(); }, 1000); } // addPoints(); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Dynamic Line Chart</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 id="theChart"></div> </div> </body> </html> // get some random data export function getData(cnt) { let arr = [], y = 0; // for (let i = 0; i < cnt; i++) { arr.push({ x: i, y: y }); y = Math.random() * 100; } // return arr; } .wj-flexchart { height: 250px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@grapecity/wijmo.chart'; import { Component, Inject, enableProdMode, NgModule, ViewChild, AfterViewInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { @ViewChild('chart') chart: wjChart.FlexChart; data: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(200); } // ngAfterViewInit() { this._addPoints(); } // private _addPoints() { // append new points, remove old points let arr = this.chart.collectionView.sourceCollection, pt = arr[arr.length - 1], y = Math.random() * 100; // arr.push({ x: pt.x + 1, y: y }); arr.splice(0, 1); // // update chart this.chart.collectionView.refresh(); // // and keep updating setTimeout(() => this._addPoints(), 1000) } } //\\ @NgModule({ imports: [WjChartModule, 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 Dynamic Line Chart</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"> <wj-flex-chart #chart [itemsSource]="data" [header]="'CPU Utilization'" [bindingX]="'x'" [chartType]="'Line'"> <wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend> <wj-flex-chart-axis [wjProperty]="'axisX'" [position]="'None'"></wj-flex-chart-axis> <wj-flex-chart-axis [wjProperty]="'axisY'" [title]="'Utilization(%)'" [min]="0" [max]="100"> </wj-flex-chart-axis> <wj-flex-chart-series [binding]="'y'"></wj-flex-chart-series> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData(cnt: number) { let arr = [], y = 0; // for (let i = 0; i < cnt; i++) { arr.push({ x: i, y: y }); y = Math.random() * 100; } // return arr; } } .wj-flexchart { height: 250px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-flex-chart :itemsSource="data" header="CPU Utilization" bindingX="x" chartType="Line" :initialized="onChartInitialized"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" position="None"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" title="Utilization(%)" :min=0 :max=100> </wj-flex-chart-axis> <wj-flex-chart-series binding="y"></wj-flex-chart-series> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData(200) }, methods: { onChartInitialized(sender) { this.chart = sender; }, $_addPoints() { // append new points, remove old points let arr = this.chart.collectionView.sourceCollection, pt = arr[arr.length - 1], y = Math.random() * 100; // arr.push({ x: pt.x + 1, y: y }); arr.splice(0, 1); // // update chart this.chart.collectionView.refresh(); // // and keep updating setTimeout(() => this.$_addPoints(), 1000) } }, mounted() { this.$_addPoints(); } }); </script> <style> .container-fluid .wj-flexchart { height: 250px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Dynamic Line Chart</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> // get some random data export function getData(cnt) { let arr = [], y = 0; // for (let i = 0; i < cnt; i++) { arr.push({ x: i, y: y }); y = Math.random() * 100; } // return arr; } 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.react.chart'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.onChartInitialized = (sender) => { this.chart = sender; }; this.$_addPoints = () => { // append new points, remove old points let arr = this.chart.collectionView.sourceCollection, pt = arr[arr.length - 1], y = Math.random() * 100; // arr.push({ x: pt.x + 1, y: y }); arr.splice(0, 1); // // update chart this.chart.collectionView.refresh(); // // and keep updating setTimeout(() => this.$_addPoints(), 1000); }; this.state = { data: getData(200) }; } render() { return <div className="container-fluid"> <wjChart.FlexChart itemsSource={this.state.data} header="CPU Utilization" bindingX="x" chartType="Line" initialized={this.onChartInitialized}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartAxis wjProperty="axisX" position="None"></wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisY" title="Utilization(%)" min={0} max={100}> </wjChart.FlexChartAxis> <wjChart.FlexChartSeries binding="y"></wjChart.FlexChartSeries> </wjChart.FlexChart> </div>; } componentDidMount() { this.$_addPoints(); } } 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 FlexGrid Dynamic Line Chart</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-flexchart { height: 250px; } body { margin-bottom: 24pt; } export function getData(cnt) { let arr = [], y = 0; // for (let i = 0; i < cnt; i++) { arr.push({ x: i, y: y }); y = Math.random() * 100; } // return arr; }