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.

Learn about FlexChart | FlexChart API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@mescius/wijmo.chart'; import * as wijmo from '@mescius/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' }, 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>MESCIUS Wijmo FlexChart Select Box</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);