Scrolling & Range Selectors

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.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@grapecity/wijmo.chart'; import { getData } from './data'; import { AxisScrollbar } from './AxisScrollbar'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new chart.FlexChart('#theChart', { plotMargin: 'NaN NaN NaN 80', bindingX: 'date', chartType: 'Line', itemsSource: getData(), tooltip: { content: '' }, axisX: { axisLine: false }, series: [ { name: 'Data', binding: 'yval' } ], }); // create Scrollbar let axisXScrollbar = new AxisScrollbar(theChart.axes[0], { minScale: 0.02 }); let axisYScrollbar = new AxisScrollbar(theChart.axes[1], { buttonsVisible: false, minScale: 0.05 }); } <!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"> <!-- 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> // generate some random data export function 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 '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; } <template> <div class="container-fluid"> <div class="form-group"> <wj-flex-chart tooltipContent="" :itemsSource="data" chartType="Line" bindingX="date" plotMargin="NaN NaN NaN 80" :initialized="initializeChart"> <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> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; import { AxisScrollbar } from './AxisScrollbar'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData() } }, methods: { initializeChart: function(flex) { let axisXScrollbar = new AxisScrollbar(flex.axisX, { minScale: 0.02 }); let axisYScrollbar = new AxisScrollbar(flex.axisY, { buttonsVisible: false, minScale: 0.05 }); } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } .form-group .wj-flexchart { margin: 0px; padding: 0px; border-bottom: 0px; touch-action: none; -ms-touch-action: none; padding-bottom: 40px; } /**** Axis Scrollbar Css *****/ .form-group .wj-flexchart .wj-axis-scrollbar-container { position: relative; } .form-group .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; } .form-group .wj-flexchart .wj-axis-scrollbar-container .wj-chart-hrangeslider { height: 20px; } .form-group .wj-flexchart .wj-axis-scrollbar-container .wj-chart-vrangeslider { width: 20px; } </style> <!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"> <!-- 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> export function 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; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.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"; import { AxisScrollbar } from "./AxisScrollbar"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <div className="form-group"> <wjChart.FlexChart tooltipContent="" itemsSource={this.state.data} chartType="Line" bindingX="date" plotMargin={[NaN, NaN, NaN, 80]} initialized={this.initializeChart.bind(this)}> <wjChart.FlexChartAxis wjProperty="axisX" axisLine={false}></wjChart.FlexChartAxis> <wjChart.FlexChartSeries name="Data" binding="yval"></wjChart.FlexChartSeries> </wjChart.FlexChart> </div> </div>; } initializeChart(flex) { let axisXScrollbar = new AxisScrollbar(flex.axisX, { minScale: 0.02 }); let axisYScrollbar = new AxisScrollbar(flex.axisY, { buttonsVisible: false, minScale: 0.05 }); } } 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 OLAP Pivot Chart Overview</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> body { margin-bottom: 24px; } label { margin-right: 3px; } .form-group .wj-flexchart { margin: 0px; padding: 0px; border-bottom: 0px; touch-action: none; -ms-touch-action: none; padding-bottom: 40px; } /**** Axis Scrollbar Css *****/ .form-group .wj-flexchart .wj-axis-scrollbar-container { position: relative; } .form-group .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; } .form-group .wj-flexchart .wj-axis-scrollbar-container .wj-chart-hrangeslider { height: 20px; } .form-group .wj-flexchart .wj-axis-scrollbar-container .wj-chart-vrangeslider { width: 20px; } export function 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; }