Select Box

This sample demonstrates how you can implement multi-point selection on a FlexChart control. Dragging on the chart will clear the currently selected points and select a new set of points that lie within the drag area. clicking on a point will also toggle its selection state, while clicking on an empty portion of the chart will clear the current selection.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@grapecity/wijmo.chart'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let rendered = false, wjSelected = 'wj-state-selected', selections = [], mouseDown = false, start = null, end = null, selector = null, offset = null, mousePt = null, isTouch = false, items = []; // // create the chart let chart = new wjChart.FlexChart('#theChart', { chartType: 'Scatter', axisY: { axisLine: true }, legend: { position: 'None' }, tooltip: { content: '' }, series: [ { name: 'Experiment 1', itemsSource: getData(50, 0, 3), bindingX: 'x', binding: 'y' }, { name: 'Experiment 2', itemsSource: getData(40, 100, 12), bindingX: 'x', binding: 'y' }, { name: 'Experiment 3', itemsSource: getData(30, -100, 24), bindingX: 'x', binding: 'y' } ], rendered: (sender) => { if (!rendered) { sender.hostElement.addEventListener('mousedown', chartMouseDown); sender.hostElement.addEventListener('mousemove', chartMouseMove); sender.hostElement.addEventListener('mouseup', chartMouseUp); sender.hostElement.addEventListener('mouseleave', chartMouseLeave); sender.hostElement.addEventListener('click', chartClick); window.addEventListener('touchstart', () => isTouch = true, false); // // boolean flag - don't re-add event listener after resize rendered = true; // selector = document.querySelector('#plotSelection'); sender.hostElement.appendChild(selector); } else { // *visually* restore selection after redraw (ex. resize browser, change chart type) restoreSelection(); } } }); // // helper for clearing chart selection function clearSelection() { selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wijmo.removeClass(el, wjSelected); } }); // selections.length = 0; } // // helper for adding chart selection function addSelection(obj) { wijmo.addClass(obj.series.getPlotElement(obj.pointIndex), wjSelected); // selections.push({ series: obj.series, pointIndex: obj.pointIndex }); } // // helper for removing chart selection function removeSelection(ht) { let items = selections.filter(item => item.series === ht.series && item.pointIndex === ht.pointIndex), idx = items && items.length > 0 ? selections.indexOf(items[0]) : -1; // if (idx >= 0) { selections.splice(idx, 1); wijmo.removeClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); } } // // finds selected plot elements after rendering and applies CSS to // visually represent selection function restoreSelection() { selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wijmo.addClass(el, wjSelected); } }); } // // helper to hide the selector function hideSelector() { wijmo.setCss(selector, { 'visibility': 'hidden', 'width': 0, 'height': 0, 'left': 0, 'top': 0 }); } // // selects plot elements within drawn rectangle function selectWithinRect(rect) { if (!rect || !chart) { return; } // chart.series.forEach((item) => { let pointCount = item._getLength(); // for (let j = 0; j < pointCount; j++) { let el = item.getPlotElement(j); // if (elementInBounds(el, rect)) { addSelection({ series: item, pointIndex: j }); } } }); } // // helper to determine if plot element is within the bounds // of the drawn rectangle function elementInBounds(el, rect) { let box = el.getBoundingClientRect(); return !(box.left > rect.right || box.right < rect.left || box.top > rect.bottom || box.bottom < rect.top); } // // clear selection for button click function clear() { clearSelection(); // update length for view items.length = 0; } // function chartClick(e) { if (mouseDown && !isTouch) { isTouch = false; return; } // let p = wijmo.mouseToPage(e); if (mousePt.x !== p.x || mousePt.y !== p.y) { return; } // let element = e.target, ht = chart.hitTest(e), selected = false, chartType = chart.chartType; // selected = selections.some(function (item) { return item.series === ht.series && item.pointIndex === ht.pointIndex; }); // if (ht && ht.series && !selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && isTouch) { // remove selection if (wijmo.hasClass(element, wjSelected)) { removeSelection(ht); } // add selection else { addSelection(ht); } } else if (selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && isTouch) { removeSelection(ht); } else { clearSelection(); } // isTouch = false; // update length for view items.length = 0; items.push.apply(items, selections); } // function chartMouseDown(e) { mousePt = wijmo.mouseToPage(e); mouseDown = true; e.preventDefault(); } // function chartMouseUp(e) { if (start != null) { start = null; } // if (end != null) { let host = chart.hostElement; offset = wijmo.getElementRect(host); // let style = host.getAttribute('style'); offset.left = offset.left + parseInt(style ? style['padding-left'].replace('px', '') : 0); offset.top = offset.top + parseInt(style ? style['padding-top'].replace('px', '') : 0); // end = start = null; // clear(); selectWithinRect(selector.getBoundingClientRect()); // // update length for view items.length = 0; items.push.apply(items, selections); // e.preventDefault(); } // hideSelector(); mouseDown = false; } // function chartMouseMove(e) { let p = wijmo.mouseToPage(e); if (!mouseDown || (mousePt.x == p.x && mousePt.y == p.y)) { return; } // let pt = e instanceof MouseEvent ? new wijmo.Point(e.pageX, e.pageY) : new wijmo.Point(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // if (start != null) { end = pt; // // update selector rectangle let w = pt.x - start.x, h = pt.y - start.y; // if (w >= 0) { wijmo.setCss(selector, { 'left': start.x - offset.left, 'width': w }); } else { wijmo.setCss(selector, { 'left': pt.x - offset.left, 'width': -w }); } // if (h >= 0) { wijmo.setCss(selector, { 'top': start.y - offset.top, 'height': h }); } else { wijmo.setCss(selector, { 'top': pt.y - offset.top, 'height': -h }); } } else { wijmo.setCss(selector, { 'visibility': 'visible' }); offset = wijmo.getElementRect(selector); // start = pt; } // e.preventDefault(); } // function chartMouseLeave(e) { if (start) { start = end = null; mouseDown = false; hideSelector(); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Select Box</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="plotSelection"></div> <div id="theChart"></div> </div> </body> </html> export function getData(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // return arr; } .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } #plotSelection { background-color: rgba(85, 85, 85, 0.05); border: 2px dashed #808080; position: absolute; display: block; left: 0; top: 0; pointer-events: none; visibility: hidden; } .wj-flexchart .wj-state-selected { stroke-width: 20px; stroke-dasharray: none; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@grapecity/wijmo.chart'; import * as wjCore from '@grapecity/wijmo'; // import { Component, Inject, enableProdMode, NgModule, 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'; // const wjSelected: string = 'wj-state-selected'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('flexChart') chart: wjChart.FlexChart; series1: any[]; series2: any[]; series3: any[]; private _rendered: boolean = false; private _selections: { series: wjChart.SeriesBase, pointIndex: number; }[] = []; private _mouseDown: boolean = false; private _start: wjCore.Point = null; private _end: wjCore.Point = null; private _selector: HTMLElement = null; private _offset: wjCore.Rect = null; private _mousePt: wjCore.Point = null; private _isTouch: boolean = false; private _items: { series: wjChart.SeriesBase, pointIndex: number; }[] = []; // constructor(@Inject(DataService) private dataService: DataService) { this.series1 = dataService.getData(50, 0, 3); this.series2 = dataService.getData(40, 100, 12); this.series3 = dataService.getData(30, -100, 24); } // renderedEventHandler(flexChart: wjChart.FlexChart) { if (!this._rendered) { flexChart.hostElement.addEventListener('mousedown', this._chartMouseDown.bind(this)); flexChart.hostElement.addEventListener('mousemove', this._chartMouseMove.bind(this)); flexChart.hostElement.addEventListener('mouseup', this._chartMouseUp.bind(this)); flexChart.hostElement.addEventListener('mouseleave', this._chartMouseLeave.bind(this)); flexChart.hostElement.addEventListener('click', this._chartClick.bind(this)); window.addEventListener('touchstart', () => this._isTouch = true, false); // // boolean flag - don't re-add event listener after resize this._rendered = true; // this._selector = document.querySelector('#plotSelection'); flexChart.hostElement.appendChild(this._selector); } else { // *visually* restore selection after redraw (ex. resize browser, change chart type) this._restoreSelection(); } } // // helper for clearing chart selection private _clearSelection() { this._selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.removeClass(el, wjSelected); } }); // this._selections.length = 0; } // // helper for adding chart selection private _addSelection(ht: any) { wjCore.addClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); this._selections.push({ series: ht.series, pointIndex: ht.pointIndex }); } // // helper for removing chart selection private _removeSelection(ht: any) { let items = this._selections.filter(item => item.series === ht.series && item.pointIndex === ht.pointIndex), idx = items && items.length > 0 ? this._selections.indexOf(items[0]) : -1; // if (idx >= 0) { this._selections.splice(idx, 1); wjCore.removeClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); } } // // finds selected plot elements after rendering and applies CSS to visually represent selection private _restoreSelection() { this._selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.addClass(el, wjSelected); } }); } // // helper to hide the selector private _hideSelector() { wjCore.setCss(this._selector, { 'visibility': 'hidden', 'width': 0, 'height': 0, 'left': 0, 'top': 0 }); } // // selects plot elements within drawn rectangle private _selectWithinRect(rect: ClientRect) { if (!rect || !this.chart) { return; } // this.chart.series.forEach((item: wjChart.SeriesBase) => { let pointCount = item._getLength(); // for (let j = 0; j < pointCount; j++) { let el = item.getPlotElement(j); // if (this._elementInBounds(el, rect)) { this._addSelection({ series: item, pointIndex: j }); } } }); } // // helper to determine if plot element is within the bounds of the drawn rectangle private _elementInBounds(el: HTMLElement, rect: ClientRect) { let box = el.getBoundingClientRect(); return !(box.left > rect.right || box.right < rect.left || box.top > rect.bottom || box.bottom < rect.top); } // // clear selection for button click private _clear() { this._clearSelection(); // update length for view this._items.length = 0; } // private _chartClick(e: MouseEvent) { if (this._mouseDown && !this._isTouch) { this._isTouch = false; return; } // let p = wjCore.mouseToPage(e); if (this._mousePt.x !== p.x || this._mousePt.y !== p.y) { return; } // let element = <HTMLElement>e.target, ht = this.chart.hitTest(e), selected = false, chartType = this.chart.chartType; // selected = this._selections.some((item: any) => { return item.series === ht.series && item.pointIndex === ht.pointIndex; }); // if (ht && ht.series && !selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this._isTouch) { // remove selection if (wjCore.hasClass(element, wjSelected)) { this._removeSelection(ht); } else { // add selection this._addSelection(ht); } } else if (selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this._isTouch) { this._removeSelection(ht); } else { this._clearSelection(); } // this._isTouch = false; // update length for view this._items.length = 0; this._items.push.apply(this._items, this._selections); } // private _chartMouseDown(e: MouseEvent) { this._mousePt = wjCore.mouseToPage(e); this._mouseDown = true; e.preventDefault(); } // private _chartMouseUp(e: MouseEvent) { if (this._start != null) { this._start = null } // if (this._end != null) { let host = this.chart.hostElement; this._offset = wjCore.getElementRect(host); let style = host.getAttribute('style'); this._offset.left = this._offset.left + parseInt(style ? style['padding-left'].replace('px', '') : 0); this._offset.top = this._offset.top + parseInt(style ? style['padding-top'].replace('px', '') : 0); // this._end = this._start = null; // this._clear(); this._selectWithinRect(this._selector.getBoundingClientRect()); // // update length for view this._items.length = 0; this._items.push.apply(this._items, this._selections); // e.preventDefault(); } // this._hideSelector(); this._mouseDown = false; } // private _chartMouseMove(e: MouseEvent | TouchEvent) { let p = wjCore.mouseToPage(e); if (!this._mouseDown || (this._mousePt.x == p.x && this._mousePt.y == p.y)) { return; } // let pt = e instanceof MouseEvent ? new wjCore.Point(e.pageX, e.pageY) : new wjCore.Point(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // if (this._start != null) { this._end = pt; // // update selector rectangle let w = pt.x - this._start.x; let h = pt.y - this._start.y; // if (w >= 0) { wjCore.setCss(this._selector, { 'left': this._start.x - this._offset.left, 'width': w }); } else { wjCore.setCss(this._selector, { 'left': pt.x - this._offset.left, 'width': -w }); } // if (h >= 0) { wjCore.setCss(this._selector, { 'top': this._start.y - this._offset.top, 'height': h }); } else { wjCore.setCss(this._selector, { 'top': pt.y - this._offset.top, 'height': -h }); } } else { wjCore.setCss(this._selector, { 'visibility': 'visible' }); this._offset = wjCore.getElementRect(this._selector); // this._start = pt; } // e.preventDefault(); } // private _chartMouseLeave(e: MouseEvent) { if (this._start) { this._start = this._end = null; this._mouseDown = false; this._hideSelector(); } } } // @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 Select Box</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 id="plotSelection"></div> <wj-flex-chart #flexChart [chartType]="'Scatter'" [bindingX]="'x'" (rendered)="renderedEventHandler(flexChart)"> <wj-flex-chart-axis wjProperty="axisY" [axisLine]="true"> </wj-flex-chart-axis> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-series [name]="'Experiment 1'" [itemsSource]="series1" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> <wj-flex-chart-series [name]="'Experiment 2'" [itemsSource]="series2" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> <wj-flex-chart-series [name]="'Experiment 3'" [itemsSource]="series3" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData(cnt: number, a: number, b: number) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // return arr; } } .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } #plotSelection { background-color:rgba(85, 85, 85, 0.05); border:2px dashed #808080; position:absolute; display:block; left:0; top:0; pointer-events:none; visibility: hidden; } .wj-flexchart .wj-state-selected { stroke-width: 20px; stroke-dasharray: none; } <template> <div class="container-fluid"> <div id="plotSelection"></div> <wj-flex-chart chartType="Scatter" bindingX="x" :initialized="chartInitialized" :rendered="chartRendered"> <wj-flex-chart-axis wjProperty="axisY" :axisLine=true> </wj-flex-chart-axis> <wj-flex-chart-legend position="None"> </wj-flex-chart-legend> <wj-flex-chart-series name="Experiment 1" :itemsSource="series1" bindingX="x" binding="y"> </wj-flex-chart-series> <wj-flex-chart-series name="Experiment 2" :itemsSource="series2" bindingX="x" binding="y"> </wj-flex-chart-series> <wj-flex-chart-series name="Experiment 3" :itemsSource="series3" bindingX="x" 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 * as wjCore from '@grapecity/wijmo'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; // const wjSelected = 'wj-state-selected'; // new Vue({ el: '#app', data: { series1: getData(50, 0, 3), series2: getData(40, 100, 12), series3: getData(30, -100, 24) }, methods: { chartInitialized(sender) { this.rendered = false; this.mouseDown = false; this.mousePt = null; this.isTouch = false; this.selector = null; this.selections = []; this.start = null, this.end = null; this.offset = null; this.items = []; this.chart = sender; }, chartRendered(sender) { if (!this.rendered) { sender.hostElement.addEventListener('mousedown', this.$_chartMouseDown.bind(this)); sender.hostElement.addEventListener('mousemove', this.$_chartMouseMove.bind(this)); sender.hostElement.addEventListener('mouseup', this.$_chartMouseUp.bind(this)); sender.hostElement.addEventListener('mouseleave', this.$_chartMouseLeave.bind(this)); sender.hostElement.addEventListener('click', this.$_chartClick.bind(this)); window.addEventListener('touchstart', () => this.isTouch = true, false); // // boolean flag - don't re-add event listener after resize this.rendered = true; // this.selector = document.querySelector('#plotSelection'); sender.hostElement.appendChild(this.selector); } else { // *visually* restore selection after redraw (ex. resize browser, change chart type) this.$_restoreSelection(); } }, // helper for clearing chart selection $_clearSelection() { this.selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.removeClass(el, wjSelected); } }); // this.selections.length = 0; }, // helper for adding chart selection $_addSelection(ht) { wjCore.addClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); this.selections.push({ series: ht.series, pointIndex: ht.pointIndex }); }, // helper for removing chart selection $_removeSelection(ht) { let items = this.selections.filter(item => item.series === ht.series && item.pointIndex === ht.pointIndex), idx = items && items.length > 0 ? this.selections.indexOf(items[0]) : -1; // if (idx >= 0) { this.selections.splice(idx, 1); wjCore.removeClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); } }, // finds selected plot elements after rendering and applies CSS to visually represent selection $_restoreSelection() { this.selections.forEach(item => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.addClass(el, wjSelected); } }); }, // helper to hide the selector $_hideSelector() { wjCore.setCss(this.selector, { 'visibility': 'hidden', 'width': 0, 'height': 0, 'left': 0, 'top': 0 }); }, // selects plot elements within drawn rectangle $_selectWithinRect(rect) { if (!rect || !this.chart) { return; } // this.chart.series.forEach(item => { let pointCount = item._getLength(); // for (let j = 0; j < pointCount; j++) { let el = item.getPlotElement(j); // if (this.$_elementInBounds(el, rect)) { this.$_addSelection({ series: item, pointIndex: j }); } } }); }, // helper to determine if plot element is within the bounds of the drawn rectangle $_elementInBounds(el, rect) { let box = el.getBoundingClientRect(); return !(box.left > rect.right || box.right < rect.left || box.top > rect.bottom || box.bottom < rect.top); }, // clear selection for button click $_clear() { this.$_clearSelection(); // update length for view this.items.length = 0; }, $_chartClick(e) { if (this.mouseDown && !this.isTouch) { this.isTouch = false; return; } // let p = wjCore.mouseToPage(e); if (this.mousePt.x !== p.x || this.mousePt.y !== p.y) { return; } // let element = e.target, ht = this.chart.hitTest(e), selected = false, chartType = this.chart.chartType; // selected = this.selections.some(item => { return item.series === ht.series && item.pointIndex === ht.pointIndex; }); // if (ht && ht.series && !selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this.isTouch) { // remove selection if (wjCore.hasClass(element, wjSelected)) { this.$_removeSelection(ht); } else { // add selection this.$_addSelection(ht); } } else if (selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this.isTouch) { this.$_removeSelection(ht); } else { this.$_clearSelection(); } // this.isTouch = false; // update length for view this.items.length = 0; this.items.push.apply(this.items, this.selections); }, $_chartMouseDown(e) { this.mousePt = wjCore.mouseToPage(e); this.mouseDown = true; e.preventDefault(); }, $_chartMouseUp(e) { if (this.start != null) { this.start = null } // if (this.end != null) { let host = this.chart.hostElement; this.offset = wjCore.getElementRect(host); let style = host.getAttribute('style'); this.offset.left = this.offset.left + parseInt(style ? style['padding-left'].replace('px', '') : 0); this.offset.top = this.offset.top + parseInt(style ? style['padding-top'].replace('px', '') : 0); // this.end = this.start = null; // this.$_clear(); this.$_selectWithinRect(this.selector.getBoundingClientRect()); // // update length for view this.items.length = 0; this.items.push.apply(this.items, this.selections); // e.preventDefault(); } // this.$_hideSelector(); this.mouseDown = false; }, $_chartMouseMove(e) { let p = wjCore.mouseToPage(e); if (!this.mouseDown || (this.mousePt.x == p.x && this.mousePt.y == p.y)) { return; } // let pt = e instanceof MouseEvent ? new wjCore.Point(e.pageX, e.pageY) : new wjCore.Point(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // if (this.start != null) { this.end = pt; // // update selector rectangle let w = pt.x - this.start.x; let h = pt.y - this.start.y; // if (w >= 0) { wjCore.setCss(this.selector, { 'left': this.start.x - this.offset.left, 'width': w }); } else { wjCore.setCss(this.selector, { 'left': pt.x - this.offset.left, 'width': -w }); } // if (h >= 0) { wjCore.setCss(this.selector, { 'top': this.start.y - this.offset.top, 'height': h }); } else { wjCore.setCss(this.selector, { 'top': pt.y - this.offset.top, 'height': -h }); } } else { wjCore.setCss(this.selector, { 'visibility': 'visible' }); this.offset = wjCore.getElementRect(this.selector); // this.start = pt; } // e.preventDefault(); }, $_chartMouseLeave(e) { if (this.start) { this.start = this.end = null; this.mouseDown = false; this.$_hideSelector(); } } } }); </script> <style> .container-fluid .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } #plotSelection { background-color: rgba(85, 85, 85, 0.05); border: 2px dashed #808080; position: absolute; display: block; left: 0; top: 0; pointer-events: none; visibility: hidden; } .container-fluid .wj-flexchart .wj-state-selected { stroke-width: 20px; stroke-dasharray: none; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Select Box</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(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // 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 wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.react.chart'; import { getData } from './data'; // const wjSelected = 'wj-state-selected'; class App extends React.Component { constructor(props) { super(props); this.rendered = false; this.selections = []; this.mouseDown = false; this.start = null; this.end = null; this.selector = null; this.offset = null; this.mousePt = null; this.isTouch = false; this.items = []; this.chartInitialized = (sender) => { this.chart = sender; }; this.chartRendered = (sender) => { if (!this.rendered) { sender.hostElement.addEventListener('mousedown', this.$_chartMouseDown.bind(this)); sender.hostElement.addEventListener('mousemove', this.$_chartMouseMove.bind(this)); sender.hostElement.addEventListener('mouseup', this.$_chartMouseUp.bind(this)); sender.hostElement.addEventListener('mouseleave', this.$_chartMouseLeave.bind(this)); sender.hostElement.addEventListener('click', this.$_chartClick.bind(this)); window.addEventListener('touchstart', () => this.isTouch = true, false); // // boolean flag - don't re-add event listener after resize this.rendered = true; // this.selector = document.querySelector('#plotSelection'); sender.hostElement.appendChild(this.selector); } else { // *visually* restore selection after redraw (ex. resize browser, change chart type) this.$_restoreSelection(); } }; this.state = { series1: getData(50, 0, 3), series2: getData(40, 100, 12), series3: getData(30, -100, 24) }; } render() { return <div className="container-fluid"> <div id="plotSelection"></div> <wjChart.FlexChart chartType="Scatter" bindingX="x" initialized={this.chartInitialized} rendered={this.chartRendered}> <wjChart.FlexChartAxis wjProperty="axisY" axisLine={true}> </wjChart.FlexChartAxis> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries name="Experiment 1" itemsSource={this.state.series1} bindingX="x" binding="y"> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries name="Experiment 2" itemsSource={this.state.series2} bindingX="x" binding="y"> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries name="Experiment 3" itemsSource={this.state.series3} bindingX="x" binding="y"> </wjChart.FlexChartSeries> </wjChart.FlexChart> </div>; } $_clearSelection() { this.selections.forEach((item) => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.removeClass(el, wjSelected); } }); // this.selections.length = 0; } // helper for adding chart selection $_addSelection(ht) { wjCore.addClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); this.selections.push({ series: ht.series, pointIndex: ht.pointIndex }); } // helper for removing chart selection $_removeSelection(ht) { let items = this.selections.filter((item) => item.series === ht.series && item.pointIndex === ht.pointIndex), idx = items && items.length > 0 ? this.selections.indexOf(items[0]) : -1; // if (idx >= 0) { this.selections.splice(idx, 1); wjCore.removeClass(ht.series.getPlotElement(ht.pointIndex), wjSelected); } } // finds selected plot elements after rendering and applies CSS to visually represent selection $_restoreSelection() { this.selections.forEach((item) => { let series = item.series, el = series.getPlotElement(item.pointIndex); // if (el) { wjCore.addClass(el, wjSelected); } }); } // helper to hide the selector $_hideSelector() { wjCore.setCss(this.selector, { 'visibility': 'hidden', 'width': 0, 'height': 0, 'left': 0, 'top': 0 }); } // selects plot elements within drawn rectangle $_selectWithinRect(rect) { if (!rect || !this.chart) { return; } // this.chart.series.forEach((item) => { let pointCount = item._getLength(); // for (let j = 0; j < pointCount; j++) { let el = item.getPlotElement(j); // if (this.$_elementInBounds(el, rect)) { this.$_addSelection({ series: item, pointIndex: j }); } } }); } // helper to determine if plot element is within the bounds of the drawn rectangle $_elementInBounds(el, rect) { let box = el.getBoundingClientRect(); return !(box.left > rect.right || box.right < rect.left || box.top > rect.bottom || box.bottom < rect.top); } // clear selection for button click $_clear() { this.$_clearSelection(); // update length for view this.items.length = 0; } $_chartClick(e) { if (this.mouseDown && !this.isTouch) { this.isTouch = false; return; } // let p = wjCore.mouseToPage(e); if (this.mousePt.x !== p.x || this.mousePt.y !== p.y) { return; } // let element = e.target, ht = this.chart.hitTest(e), selected = false, chartType = this.chart.chartType; // selected = this.selections.some((item) => { return item.series === ht.series && item.pointIndex === ht.pointIndex; }); // if (ht && ht.series && !selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this.isTouch) { // remove selection if (wjCore.hasClass(element, wjSelected)) { this.$_removeSelection(ht); } else { // add selection this.$_addSelection(ht); } } else if (selected && ((ht.distance <= 0 && (chartType == 0 || chartType == 1)) || ht.distance <= 15) && this.isTouch) { this.$_removeSelection(ht); } else { this.$_clearSelection(); } // this.isTouch = false; // update length for view this.items.length = 0; this.items.push.apply(this.items, this.selections); } $_chartMouseDown(e) { this.mousePt = wjCore.mouseToPage(e); this.mouseDown = true; e.preventDefault(); } $_chartMouseUp(e) { if (this.start != null) { this.start = null; } // if (this.end != null) { let host = this.chart.hostElement; this.offset = wjCore.getElementRect(host); let style = host.getAttribute('style'); this.offset.left = this.offset.left + parseInt(style ? style['padding-left'].replace('px', '') : 0); this.offset.top = this.offset.top + parseInt(style ? style['padding-top'].replace('px', '') : 0); // this.end = this.start = null; // this.$_clear(); this.$_selectWithinRect(this.selector.getBoundingClientRect()); // // update length for view this.items.length = 0; this.items.push.apply(this.items, this.selections); // e.preventDefault(); } // this.$_hideSelector(); this.mouseDown = false; } $_chartMouseMove(e) { let p = wjCore.mouseToPage(e); if (!this.mouseDown || (this.mousePt.x == p.x && this.mousePt.y == p.y)) { return; } // let pt = e instanceof MouseEvent ? new wjCore.Point(e.pageX, e.pageY) : new wjCore.Point(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // if (this.start != null) { this.end = pt; // // update selector rectangle let w = pt.x - this.start.x; let h = pt.y - this.start.y; // if (w >= 0) { wjCore.setCss(this.selector, { 'left': this.start.x - this.offset.left, 'width': w }); } else { wjCore.setCss(this.selector, { 'left': pt.x - this.offset.left, 'width': -w }); } // if (h >= 0) { wjCore.setCss(this.selector, { 'top': this.start.y - this.offset.top, 'height': h }); } else { wjCore.setCss(this.selector, { 'top': pt.y - this.offset.top, 'height': -h }); } } else { wjCore.setCss(this.selector, { 'visibility': 'visible' }); this.offset = wjCore.getElementRect(this.selector); // this.start = pt; } // e.preventDefault(); } $_chartMouseLeave(e) { if (this.start) { this.start = this.end = null; this.mouseDown = false; this.$_hideSelector(); } } } 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 Select Box</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: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } #plotSelection { background-color: rgba(85, 85, 85, 0.05); border: 2px dashed #808080; position: absolute; display: block; left: 0; top: 0; pointer-events: none; visibility: hidden; } .wj-flexchart .wj-state-selected { stroke-width: 20px; stroke-dasharray: none; } export function getData(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // return arr; }