Alarm Zones

You can use the FlexChart's rendering and rendered events to add arbitrary elements behind or above the regular chart elements.

For example,the chart below has 'buy' and 'sell' zones created in the chart's rendering event handler:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let linechart = new chart.FlexChart('#chart', { header: 'Device Temperature Monitor', legend: { position: chart.Position.None }, chartType: chart.ChartType.Line, bindingX: 'x', series: [{ binding: 'y', name: 'Temperature' }], axisY: { min: 0, max: 100, majorGrid: false, title: 'Temperature(°C)' }, rendering: function (s, e) { var xMin = s.axisX.actualMin.valueOf(), xMax = s.axisX.actualMax.valueOf(), yMin = s.axisY.actualMin, yMax = s.axisY.actualMax; if (isNaN(xMin) && isNaN(xMax)) { return; } drawAlarmZone(s, e.engine, xMin, 80, xMax, yMax, 'alarm-zone'); drawAlarmZone(s, e.engine, xMin, 50, xMax, 80, 'warning-zone'); drawAlarmZone(s, e.engine, xMin, yMin, xMax, 50, 'safe-zone'); } }); // setInterval(() => { let data = getData(); linechart.itemsSource = data; }, 1000); } // draw an alarm zone into the chart function drawAlarmZone(chart, engine, xMin, yMin, xMax, yMax, className) { var pt1 = chart.dataToPoint(xMin, yMin); var pt2 = chart.dataToPoint(xMax, yMax); engine.drawRect(Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y), Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y), className); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Alarm Zones</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="chart"></div> </div> </body> </html>
// get temperature(random data) of device. let data = []; export function getData() { let date = new Date(); if (data.length === 0) { date.setSeconds(date.getSeconds() - 99); for (let i = 1; i < 100; i++) { data.push({ x: new Date(date.valueOf()), y: getRandomTemp() }); date.setSeconds(date.getSeconds() + 1); } } if (data.length === 100) { data.splice(0, 1); } data.push({ x: date, y: getRandomTemp() }); return data.slice(); } function getRandomTemp() { let seed = Math.random(); if (seed > 0.9) { return (Math.round(Math.random() * 800) / 10) + 20; } else if (seed > 0.6) { return (Math.round(Math.random() * 600) / 10) + 20; } else { return (Math.round(Math.random() * 300) / 10) + 20; } }
body { margin-bottom: 24px; } label { margin-right: 3px; } .alarm-zone { fill: red; opacity: .15; stroke-width: 0; } .warning-zone { fill: orange; opacity: .15; stroke-width: 0; } .safe-zone { fill: green; opacity: .15; stroke-width: 0; }
(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', '@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.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.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.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', '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);