Line with Gaps

The FlexChart control allows you to display lines with gaps if there is no data to be displayed. This is done by setting FlexChart's interpolateNulls property.

Learn about FlexChart | Interpolate Nulls Documentation] | FlexChart API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import { isArray } from '@mescius/wijmo'; import { ChartType, FlexChart, Palettes, Position } from '@mescius/wijmo.chart'; import { ChartAnimation, AnimationMode } from '@mescius/wijmo.chart.animation'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let lineChart = new FlexChart('#chart', { header: '24 Hours CPU Utilization and Temperature', legend: { position: Position.None }, chartType: ChartType.Line, bindingX: 'time', interpolateNulls: false, series: [ { binding: 'utilization', name: 'Utilization(%)' }, { binding: 'temperature', name: 'Temperature(°C)' } ], itemsSource: getData(), palette: getRandomPalette() }); let ani = new ChartAnimation(lineChart); ani.animationMode = AnimationMode.Point; // let chkbox = document.querySelector('#interpolateNulls'); chkbox.addEventListener('change', () => { lineChart.interpolateNulls = chkbox.checked; }); } // function getRandomPalette() { let palettes = Object.keys(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Line with Gaps</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 class="form-check"> <label for="interpolateNulls" class="form-check-label">interpolateNulls:</label> <input id="interpolateNulls" type="checkbox" class="form-check-input"> </div> <div id="chart"></div> </div> </body> </html>
// The Utilization and Temperature of CPU. export function getData() { return [ { time: '1:00', utilization: 26, temperature: 55 }, { time: '2:00', utilization: 36, temperature: 57 }, { time: '3:00', utilization: 74, temperature: 60 }, { time: '4:00', utilization: 23, temperature: 46 }, { time: '5:00', utilization: 13, temperature: 44 }, { time: '6:00', utilization: 64, temperature: 56 }, { time: '7:00', utilization: 34, temperature: 50 }, { time: '8:00', utilization: 67, temperature: 55 }, { time: '9:00', utilization: 72, temperature: 60 }, { time: '10:00', utilization: 23, temperature: 54 }, { time: '11:00', utilization: 100, temperature: 78 }, { time: '12:00', utilization: 100, temperature: 87 }, { time: '13:00', utilization: 100, temperature: 94 }, { time: '14:00', utilization: null, temperature: null }, { time: '15:00', utilization: 95, temperature: 87 }, { time: '16:00', utilization: 80, temperature: 84 }, { time: '17:00', utilization: 53, temperature: 76 }, { time: '18:00', utilization: 26, temperature: 58 }, { time: '19:00', utilization: 42, temperature: 53 }, { time: '20:00', utilization: 36, temperature: 62 }, { time: '21:00', utilization: 34, temperature: 53 }, { time: '22:00', utilization: 63, temperature: 61 }, { time: '23:00', utilization: 53, temperature: 57 }, { time: '24:00', utilization: 54, temperature: 47 } ]; }
label { margin-right: 3px; } body { margin-bottom: 24px; }
(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);