Custom series

This sample shows a FlexChart control with customized series. Each series has its own unique tooltipContent and itemFormatter (which customizes how the data point is drawn).

Learn about FlexChart | FlexChart API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import { getData } from './data'; import { Point } from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let theChart = new chart.FlexChart('#chart', { chartType: 'LineSymbols', itemsSource: getData(), bindingX: 'hour', legend: { position: 'Bottom' }, series: [ { binding: 't', name: 'temperature', tooltipContent: '{y} °C' }, { chartType: "Scatter", binding: 'wspeed', name: 'wind speed', tooltipContent: '{wdir}<br/>{y} km/h', style: { strokeWidth: 1 }, symbolSize: 3, itemFormatter: (engine, ht, render) => { render(); var dir = ht.item.wdir; drawArrow(engine, ht.point, dir); } }, ], axisX: { title: 'hour' }, axisY: { title: '°C', majorGrid: false, min: 0, max: 20 }, }); // var p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'amounts'; p.height = '*'; p.style = { stroke: 'lightgray' }; theChart.plotAreas.push(p); // create a spacer plot area p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'spacer'; p.height = 25; theChart.plotAreas.push(p); // create a plot area for quantities p = new chart.PlotArea(); p.row = theChart.plotAreas.length; p.name = 'quantities'; p.height = '*'; p.style = { stroke: 'lightgray' }; var axy2 = new chart.Axis(chart.Position.Left); axy2.labels = true; axy2.title = 'km/h'; axy2.min = 0; axy2.max = 20; axy2.plotArea = p; theChart.series[1].axisY = axy2; theChart.plotAreas.push(p); } function drawArrow(engine, pt, dir) { let a = directioToAngle(dir); a *= Math.PI / 180; let sz = 12; let szar = 8; let x = sz * Math.cos(a); let y = sz * Math.sin(a); engine.strokeWidth = 1; engine.drawLine(pt.x - x, pt.y - y, pt.x + x, pt.y + y); let edge = new Point(pt.x + x, pt.y + y); let x1 = szar * Math.cos(a - 100); let y1 = szar * Math.sin(a - 100); let x2 = szar * Math.cos(a + 100); let y2 = szar * Math.sin(a + 100); engine.drawLine(edge.x, edge.y, edge.x - x1, edge.y - y1); engine.drawLine(edge.x, edge.y, edge.x - x2, edge.y - y2); } function directioToAngle(dir) { switch (dir) { case 'E': return 0; case 'ESE': return 22.5; case 'SE': return 45; case 'SSE': return 67.5; case 'S': return 90; case 'SSW': return 112.5; case 'SW': return 135; case 'WSW': return 157.5; case "W": return 180; case "WNW": return 202.5; case "NW": return 225; case "NNW": return 247.5; case "N": return 270; case "NNE": return 292.5; case "NE": return 315; case "ENE": return 337.5; } return 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Custom Series</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>
export function getData() { return [ { "hour": 0, "condition": "Cloudy", "t": 8, "tfeel": 6, "precip": 5, "humidity": 85, "wdir": "ENE", "wspeed": 11 }, { "hour": 1, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 87, "wdir": "ENE", "wspeed": 10 }, { "hour": 2, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 88, "wdir": "ENE", "wspeed": 11 }, { "hour": 3, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 5, "humidity": 88, "wdir": "ENE", "wspeed": 11 }, { "hour": 4, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 10, "humidity": 91, "wdir": "ENE", "wspeed": 11 }, { "hour": 5, "condition": "Cloudy", "t": 6, "tfeel": 4, "precip": 15, "humidity": 92, "wdir": "ENE", "wspeed": 11 }, { "hour": 6, "condition": "Cloudy", "t": 6, "tfeel": 4, "precip": 15, "humidity": 92, "wdir": "ENE", "wspeed": 11 }, { "hour": 7, "condition": "Cloudy", "t": 7, "tfeel": 4, "precip": 15, "humidity": 93, "wdir": "ENE", "wspeed": 12 }, { "hour": 8, "condition": "Cloudy", "t": 7, "tfeel": 4, "precip": 20, "humidity": 93, "wdir": "ENE", "wspeed": 13 }, { "hour": 9, "condition": "Cloudy", "t": 7, "tfeel": 5, "precip": 25, "humidity": 93, "wdir": "ENE", "wspeed": 13 }, { "hour": 10, "condition": "Cloudy", "t": 8, "tfeel": 5, "precip": 20, "humidity": 93, "wdir": "ENE", "wspeed": 14 }, { "hour": 11, "condition": "Cloudy", "t": 8, "tfeel": 6, "precip": 20, "humidity": 90, "wdir": "ENE", "wspeed": 15 }, { "hour": 12, "condition": "Cloudy", "t": 9, "tfeel": 7, "precip": 10, "humidity": 88, "wdir": "ENE", "wspeed": 16 }, { "hour": 13, "condition": "Cloudy", "t": 10, "tfeel": 8, "precip": 5, "humidity": 84, "wdir": "ENE", "wspeed": 16 }, { "hour": 14, "condition": "Cloudy", "t": 12, "tfeel": 10, "precip": 15, "humidity": 79, "wdir": "ENE", "wspeed": 15 }, { "hour": 15, "condition": "Cloudy", "t": 13, "tfeel": 11, "precip": 10, "humidity": 76, "wdir": "ENE", "wspeed": 15 }, { "hour": 16, "condition": "Cloudy", "t": 14, "tfeel": 13, "precip": 10, "humidity": 74, "wdir": "ENE", "wspeed": 12 }, { "hour": 17, "condition": "Cloudy", "t": 14, "tfeel": 14, "precip": 5, "humidity": 72, "wdir": "ENE", "wspeed": 10 }, { "hour": 18, "condition": "Mostly Cloudy", "t": 14, "tfeel": 14, "precip": 5, "humidity": 73, "wdir": "ENE", "wspeed": 8 }, { "hour": 19, "condition": "Mostly Cloudy", "t": 13, "tfeel": 13, "precip": 5, "humidity": 79, "wdir": "NE", "wspeed": 8 }, { "hour": 20, "condition": "Partly Cloudy", "t": 12, "tfeel": 11, "precip": 5, "humidity": 84, "wdir": "NNE", "wspeed": 9 }, { "hour": 21, "condition": "Partly Cloudy", "t": 11, "tfeel": 10, "precip": 10, "humidity": 90, "wdir": "NNE", "wspeed": 10 }, { "hour": 22, "condition": "Partly Cloudy", "t": 11, "tfeel": 9, "precip": 15, "humidity": 91, "wdir": "NE", "wspeed": 10 }, { "hour": 23, "condition": "Mostly Cloudy", "t": 10, "tfeel": 9, "precip": 25, "humidity": 93, "wdir": "NE", "wspeed": 11 } ]; }
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', '@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.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/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.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/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.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/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', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/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);