Scrolling & Range Selectors (Angular)

Viewing large charts can be difficult in compact user interfaces. Hence, the AxisScrollbar gives you an option of adding scrollbar to the axis of the chart.

This sample allows you to view the chart with the scrollbars on X and Y axis of the chart.

This example uses Angular.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, AfterViewInit, ViewChild } 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'; import { AxisScrollbar } from './AxisScrollbar'; import * as wjChart from '@grapecity/wijmo.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { data: any[]; @ViewChild('theChart') theChart: wjChart.FlexChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { let axisXScrollbar = new AxisScrollbar(this.theChart.axisX, { minScale: 0.02 }); let axisYScrollbar = new AxisScrollbar(this.theChart.axisY, { buttonsVisible: false, minScale: 0.05 }); } } // @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 Scrolling & Range Selectors</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"> <wj-flex-chart #theChart tooltipContent="" [itemsSource]="data" chartType="Line" bindingX="date" plotMargin="NaN NaN NaN 80"> <wj-flex-chart-axis wjProperty="axisX" [axisLine]="false"></wj-flex-chart-axis> <wj-flex-chart-series name="Data" binding="yval"></wj-flex-chart-series> </wj-flex-chart> </div> </div>
import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let dataCount = 3000; let data = []; for (var i = 0; i < dataCount; i++) { var mod = Math.floor(i / 10) % 10; data.push({ date: new Date(2005, 0, i), yval: mod == 0 ? null : Math.random() * 100 }); } return data; } }
.wj-flexchart { margin: 0px; padding: 0px; border-bottom: 0px; touch-action: none; -ms-touch-action: none; padding-bottom: 40px; } body { margin-bottom: 24pt; } /**** Axis Scrollbar Css *****/ .wj-flexchart .wj-axis-scrollbar-container { position: relative; } .wj-flexchart .wj-axis-scrollbar-container .wj-chart-rangeslider { border: 1px solid #EAEAEA; background-color: #EAEAEA; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .wj-flexchart .wj-axis-scrollbar-container .wj-chart-hrangeslider { height: 20px; } .wj-flexchart .wj-axis-scrollbar-container .wj-chart-vrangeslider { width: 20px; }
import * as core from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import * as interaction from '@grapecity/wijmo.chart.interaction'; 'use strict'; /** * The @see:AxisScrollbar control displays a scrollbar that allows the user to * choose the range of Axis. */ export class AxisScrollbar { // fields private _isVisible = true; private _min: number = null; private _max: number = null; private _buttonsVisible: boolean = true; //private _minScale: number = 0.01; private _minScale: number = 0; // host private _chart: chart.FlexChartCore = null; private _axis: chart.Axis = null; private _rangeSlider: interaction._RangeSlider = null; // elements private _slbarContainer: HTMLElement = null; private _isXAxis: boolean = true; private _chartRefreshDelay: any = null; /** * Initializes a new instance of the @see:AxisScrollbar control. * * @param axis The axis that displays scrollbar. * @param options A JavaScript object containing initialization data for the control. */ constructor(axis: chart.Axis, options?: any) { if (!chart) { core.assert(false, 'The Axis cannot be null.'); } this._axis = axis; this._chart = axis._chart; this._isXAxis = this._axis.axisType === chart.AxisType.X; core.copy(this, options); this._createScrollbar(); } /** * Gets or sets the decrease button and increase button is visible or not. */ get buttonsVisible(): boolean { return this._buttonsVisible; } set buttonsVisible(value: boolean) { if (value !== this._buttonsVisible) { this._buttonsVisible = core.asBoolean(value); if (!this._rangeSlider) { return; } this._rangeSlider.buttonsVisible = this._buttonsVisible; } } /** * Gets or sets the visibility of the Axis scrollbar. */ get isVisible(): boolean { return this._isVisible; } set isVisible(value: boolean) { if (value != this._isVisible) { this._isVisible = core.asBoolean(value); if (!this._rangeSlider) { return; } this._rangeSlider.isVisible = value; } } set minPos(value: number) { if (value < 0 && value > 1 && value > this._rangeSlider._maxPos) { return; } this._rangeSlider._minPos = value; this._updateAxisRange(); } set maxPos(value: number) { if (value < 0 && value > 1 && value < this._rangeSlider._minPos) { return; } this._rangeSlider._maxPos = value; this._updateAxisRange(); } /** * Gets or sets the minimum range scale of the Axis scrollbar. * The minimum range scale should be greater than zero. */ get minScale(): number { return this._minScale; } set minScale(value: number) { if (value > 0 && value != this._minScale) { this._minScale = core.asNumber(value); if (!this._rangeSlider) { return; } this._rangeSlider.minScale = value; } } /** * Removes the range selector from the chart. */ remove() { if (this._slbarContainer) { this._chart.hostElement.removeChild(this._slbarContainer); this._switchEvent(false); this._slbarContainer = null; } } private _createScrollbar() { var chart = this._chart, chartHostEle = chart.hostElement; this._slbarContainer = core.createElement('<div class="wj-axis-scrollbar-container"></div>'); this._rangeSlider = new interaction._RangeSlider(this._slbarContainer, true, // has space click function true, // has dec and inc buttons { //options settings buttonsVisible: this._buttonsVisible, isHorizontal: this._isXAxis, isVisible: this._isVisible, minScale: this._minScale, seamless: true }); chartHostEle.appendChild(this._slbarContainer); this._switchEvent(true); } private _switchEvent(isOn: boolean) { var eventListener = isOn ? 'addEventListener' : 'removeEventListener', eventHandler = isOn ? 'addHandler' : 'removeHandler'; if (this._chart.hostElement) { this._chart.rendered[eventHandler](this._refresh, this); this._rangeSlider.rangeChanged[eventHandler](this._updateAxisRange, this); this._rangeSlider.rangeChanging[eventHandler](this._updatingAxisRange, this); } } private _refresh() { var chartHostEle = this._chart.hostElement, rangeSlider = this._rangeSlider, pa, pOffset, plotBox, axisRect = this._axis._axrect, axisEle, axisOffset, isBottom, isLeft, rsWidth, rOffset = core.getElementRect(this._slbarContainer); if (rangeSlider._isSliding) { return; } //init the scrollbar range if (this._min === null) { this._min = core.isDate(this._axis.actualMin) ? this._axis.actualMin.valueOf() : this._axis.actualMin; } if (this._max === null) { this._max = core.isDate(this._axis.actualMax) ? this._axis.actualMax.valueOf() : this._axis.actualMax; } pa = <SVGGElement>chartHostEle.querySelector('.' + chart.FlexChart._CSS_PLOT_AREA); pOffset = core.getElementRect(pa); plotBox = pa.getBBox(); //TODO: get the axis element when has multiple axes axisEle = chartHostEle.querySelector(this._isXAxis ? '.wj-axis-x' : '.wj-axis-y'); axisOffset = core.getElementRect(axisEle); if (axisOffset.height === 0) { return; } if (this._isXAxis) { isBottom = this._axis.position === chart.Position.Bottom; rangeSlider._refresh({ left: plotBox.x, top: isBottom ? axisOffset.top + axisOffset.height - rOffset.top : axisOffset.top - rOffset.top - axisOffset.height, width: plotBox.width }); } else { isLeft = this._axis.position === chart.Position.Left; rsWidth = rangeSlider._handleWidth; rangeSlider._refresh({ left: isLeft ? axisOffset.left - rOffset.left - rsWidth : axisOffset.left - rOffset.left + pOffset.width + this._axis._axrect.width, top: pOffset.top - rOffset.top, height: plotBox.height }); } } private _updateAxisRange() { var chart, axis, range, rangeSlider = this._rangeSlider; chart = this._chart; axis = this._axis; range = this._max - this._min; axis.min = this._min + rangeSlider._minPos * range; axis.max = this._min + rangeSlider._maxPos * range; chart.invalidate(); } private _updatingAxisRange() { var self = this; this._chartRefreshDelay = window.setTimeout(function () { if (self._chartRefreshDelay) { clearTimeout(self._chartRefreshDelay); self._chartRefreshDelay = null; } self._updateAxisRange(); }, 200); } }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', //'reflect-metadata': 'npm:reflect-metadata/Reflect.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', //'rxjs': 'npm:rxjs', //'rxjs/operators': 'npm:rxjs/operators', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', "@grapecity/wijmo.angular2.chart.analytics": "npm:@grapecity/wijmo.angular2.chart.analytics/index.js", "@grapecity/wijmo.angular2.chart.animation": "npm:@grapecity/wijmo.angular2.chart.animation/index.js", "@grapecity/wijmo.angular2.chart.annotation": "npm:@grapecity/wijmo.angular2.chart.annotation/index.js", "@grapecity/wijmo.angular2.chart.finance.analytics": "npm:@grapecity/wijmo.angular2.chart.finance.analytics/index.js", "@grapecity/wijmo.angular2.chart.finance": "npm:@grapecity/wijmo.angular2.chart.finance/index.js", "@grapecity/wijmo.angular2.chart.hierarchical": "npm:@grapecity/wijmo.angular2.chart.hierarchical/index.js", "@grapecity/wijmo.angular2.chart.interaction": "npm:@grapecity/wijmo.angular2.chart.interaction/index.js", "@grapecity/wijmo.angular2.chart.radar": "npm:@grapecity/wijmo.angular2.chart.radar/index.js", "@grapecity/wijmo.angular2.chart": "npm:@grapecity/wijmo.angular2.chart/index.js", "@grapecity/wijmo.angular2.core": "npm:@grapecity/wijmo.angular2.core/index.js", "@grapecity/wijmo.angular2.gauge": "npm:@grapecity/wijmo.angular2.gauge/index.js", "@grapecity/wijmo.angular2.grid.detail": "npm:@grapecity/wijmo.angular2.grid.detail/index.js", "@grapecity/wijmo.angular2.grid.filter": "npm:@grapecity/wijmo.angular2.grid.filter/index.js", "@grapecity/wijmo.angular2.grid.grouppanel": "npm:@grapecity/wijmo.angular2.grid.grouppanel/index.js", "@grapecity/wijmo.angular2.grid.search": "npm:@grapecity/wijmo.angular2.grid.search/index.js", "@grapecity/wijmo.angular2.grid.multirow": "npm:@grapecity/wijmo.angular2.grid.multirow/index.js", "@grapecity/wijmo.angular2.grid.sheet": "npm:@grapecity/wijmo.angular2.grid.sheet/index.js", '@grapecity/wijmo.angular2.grid.transposed': 'npm:@grapecity/wijmo.angular2.grid.transposed/index.js', '@grapecity/wijmo.angular2.grid.transposedmultirow': 'npm:@grapecity/wijmo.angular2.grid.transposedmultirow/index.js', "@grapecity/wijmo.angular2.grid": "npm:@grapecity/wijmo.angular2.grid/index.js", "@grapecity/wijmo.angular2.input": "npm:@grapecity/wijmo.angular2.input/index.js", "@grapecity/wijmo.angular2.olap": "npm:@grapecity/wijmo.angular2.olap/index.js", "@grapecity/wijmo.angular2.viewer": "npm:@grapecity/wijmo.angular2.viewer/index.js", "@grapecity/wijmo.angular2.nav": "npm:@grapecity/wijmo.angular2.nav/index.js", "@grapecity/wijmo.angular2.directivebase": "npm:@grapecity/wijmo.angular2.directivebase/index.js", '@grapecity/wijmo.angular2.barcode.common': 'npm:@grapecity/wijmo.angular2.barcode.common/index.js', '@grapecity/wijmo.angular2.barcode.composite': 'npm:@grapecity/wijmo.angular2.barcode.composite/index.js', '@grapecity/wijmo.angular2.barcode.specialized': 'npm:@grapecity/wijmo.angular2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', //'typescript': 'https://unpkg.com/typescript@3.2.2', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, // 'rxjs': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, //'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/webSocket': {main: 'index.js', defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);