|
1 | | -/* |
2 | | - * LightningChartJS example that showcases real-time OHLC-packing using a variant of OHLC-series. |
3 | | - */ |
4 | | -// Import LightningChartJS |
5 | | -const lcjs = require('@arction/lcjs') |
6 | | - |
7 | | -// Extract required parts from LightningChartJS. |
8 | | -const { |
9 | | - lightningChart, |
10 | | - AxisTickStrategies, |
11 | | - AxisScrollStrategies, |
12 | | - OHLCSeriesTypes, |
13 | | - emptyLine, |
14 | | - Themes |
15 | | -} = lcjs |
16 | | - |
17 | | -// Import data-generator from 'xydata'-library. |
18 | | -const { |
19 | | - createProgressiveTraceGenerator |
20 | | -} = require('@arction/xydata') |
21 | | - |
22 | | -// Decide on an origin for DateTime axis ( cur time - 5 minutes ). |
23 | | -const fiveMinutesInMs = 5 * 60 * 1000 |
24 | | -const dateOrigin = new Date(new Date().getTime() - fiveMinutesInMs) |
25 | | - |
26 | | -// Create a XY Chart. |
27 | | -const chart = lightningChart().ChartXY({ |
28 | | - // theme: Themes.darkGold |
29 | | -}) |
30 | | -// Use DateTime X-axis using previously defined origin. |
31 | | -chart |
32 | | - .getDefaultAxisX() |
33 | | - .setTickStrategy( |
34 | | - AxisTickStrategies.DateTime, |
35 | | - (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin) |
36 | | - ) |
37 | | - |
38 | | -// Set chart title and modify the padding of the chart. |
39 | | -chart |
40 | | - .setTitle('Realtime OHLC and line') |
41 | | - .setPadding({ |
42 | | - right: 42 |
43 | | - }) |
44 | | -// Modify AutoCursor to only show TickMarker and Gridline over X Axis. |
45 | | -chart.setAutoCursor(cursor => { |
46 | | - cursor.disposeTickMarkerY() |
47 | | - cursor.setGridStrokeYStyle(emptyLine) |
48 | | -}) |
49 | | - |
50 | | -// Configure X-axis to be progressive. |
51 | | -chart.getDefaultAxisX() |
52 | | - .setScrollStrategy(AxisScrollStrategies.progressive) |
53 | | - // View fits 5 minutes. |
54 | | - .setInterval(0, fiveMinutesInMs) |
55 | | - |
56 | | -// Show title 'USD' on Y axis. |
57 | | -chart.getDefaultAxisY() |
58 | | - .setTitle('USD') |
59 | | - |
60 | | -// Add underlying line series. |
61 | | -const lineSeries = chart.addLineSeries() |
62 | | - .setCursorEnabled(false) |
63 | | - .setStrokeStyle((strokeStyle) => strokeStyle |
64 | | - .setFillStyle(fill => fill.setA(70)) |
65 | | - .setThickness(1) |
66 | | - ) |
67 | | - |
68 | | -// Add OHLC series with automatic packing (so we can feed it XY-points just like for the line series). |
69 | | -const ohlcSeriesAutoPacking = chart.addOHLCSeries( |
70 | | - // Specify type of OHLC-series for adding points |
71 | | - { seriesConstructor: OHLCSeriesTypes.AutomaticPacking } |
72 | | -) |
73 | | - // Set packing resolution to 100 ms so we can zoom to full resolution. |
74 | | - .setPackingResolution(100) |
75 | | - |
76 | | -const add = (points) => { |
77 | | - lineSeries.add(points) |
78 | | - // With automatic packing, the add method accepts data points that use the {x, y} format (for example, {x: time, y: measurement}). |
79 | | - // OHLC Series can automatically pack these raw measurements into OHLC data. |
80 | | - ohlcSeriesAutoPacking.add(points) |
81 | | -} |
82 | | - |
83 | | -// Generate data using 'xydata'-library. |
84 | | -createProgressiveTraceGenerator() |
85 | | - .setNumberOfPoints(10000) |
86 | | - .generate() |
87 | | - .toPromise() |
88 | | - .then((data) => data.map((p) => ({ |
89 | | - // Resolution = 100 ms. |
90 | | - x: p.x * 100, y: p.y |
91 | | - }))) |
92 | | - .then((data) => { |
93 | | - // Add 5 minutes worth of points immediately ( to simulate previous data ). |
94 | | - add(data.splice(0, Math.round(5 * 60 * 10))) |
95 | | - // Then stream some more |
96 | | - setInterval(() => { |
97 | | - add(data.splice(0, 1)) |
98 | | - }, 50) |
99 | | - }) |
| 1 | +/* |
| 2 | + * LightningChartJS example that showcases real-time OHLC-packing using a variant of OHLC-series. |
| 3 | + */ |
| 4 | +// Import LightningChartJS |
| 5 | +const lcjs = require('@arction/lcjs') |
| 6 | + |
| 7 | +// Extract required parts from LightningChartJS. |
| 8 | +const { |
| 9 | + lightningChart, |
| 10 | + AxisTickStrategies, |
| 11 | + AxisScrollStrategies, |
| 12 | + OHLCSeriesTypes, |
| 13 | + emptyLine, |
| 14 | + Themes |
| 15 | +} = lcjs |
| 16 | + |
| 17 | +// Import data-generator from 'xydata'-library. |
| 18 | +const { |
| 19 | + createProgressiveTraceGenerator |
| 20 | +} = require('@arction/xydata') |
| 21 | + |
| 22 | +// Decide on an origin for DateTime axis ( cur time - 5 minutes ). |
| 23 | +const fiveMinutesInMs = 5 * 60 * 1000 |
| 24 | +const dateOrigin = new Date(new Date().getTime() - fiveMinutesInMs) |
| 25 | + |
| 26 | +// Create a XY Chart. |
| 27 | +const chart = lightningChart().ChartXY({ |
| 28 | + // theme: Themes.darkGold |
| 29 | +}) |
| 30 | +// Use DateTime X-axis using previously defined origin. |
| 31 | +chart |
| 32 | + .getDefaultAxisX() |
| 33 | + .setTickStrategy( |
| 34 | + AxisTickStrategies.DateTime, |
| 35 | + (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin) |
| 36 | + ) |
| 37 | + |
| 38 | +// Set chart title and modify the padding of the chart. |
| 39 | +chart |
| 40 | + .setTitle('Realtime OHLC and line') |
| 41 | + .setPadding({ |
| 42 | + right: 42 |
| 43 | + }) |
| 44 | +// Modify AutoCursor to only show TickMarker and Gridline over X Axis. |
| 45 | +chart.setAutoCursor(cursor => { |
| 46 | + cursor.disposeTickMarkerY() |
| 47 | + cursor.setGridStrokeYStyle(emptyLine) |
| 48 | +}) |
| 49 | + |
| 50 | +// Configure X-axis to be progressive. |
| 51 | +chart.getDefaultAxisX() |
| 52 | + .setScrollStrategy(AxisScrollStrategies.progressive) |
| 53 | + // View fits 5 minutes. |
| 54 | + .setInterval(0, fiveMinutesInMs) |
| 55 | + |
| 56 | +// Show title 'USD' on Y axis. |
| 57 | +chart.getDefaultAxisY() |
| 58 | + .setTitle('USD') |
| 59 | + |
| 60 | +// Add underlying line series. |
| 61 | +const lineSeries = chart.addLineSeries() |
| 62 | + .setCursorEnabled(false) |
| 63 | + .setStrokeStyle((strokeStyle) => strokeStyle |
| 64 | + .setFillStyle(fill => fill.setA(70)) |
| 65 | + .setThickness(1) |
| 66 | + ) |
| 67 | + |
| 68 | +// Add OHLC series with automatic packing (so we can feed it XY-points just like for the line series). |
| 69 | +const ohlcSeriesAutoPacking = chart.addOHLCSeries( |
| 70 | + // Specify type of OHLC-series for adding points |
| 71 | + { seriesConstructor: OHLCSeriesTypes.AutomaticPacking } |
| 72 | +) |
| 73 | + // Set packing resolution to 100 ms so we can zoom to full resolution. |
| 74 | + .setPackingResolution(100) |
| 75 | + |
| 76 | +const add = (points) => { |
| 77 | + lineSeries.add(points) |
| 78 | + // With automatic packing, the add method accepts data points that use the {x, y} format (for example, {x: time, y: measurement}). |
| 79 | + // OHLC Series can automatically pack these raw measurements into OHLC data. |
| 80 | + ohlcSeriesAutoPacking.add(points) |
| 81 | +} |
| 82 | + |
| 83 | +// Generate data using 'xydata'-library. |
| 84 | +createProgressiveTraceGenerator() |
| 85 | + .setNumberOfPoints(10000) |
| 86 | + .generate() |
| 87 | + .toPromise() |
| 88 | + .then((data) => data.map((p) => ({ |
| 89 | + // Resolution = 100 ms. |
| 90 | + x: p.x * 100, y: p.y |
| 91 | + }))) |
| 92 | + .then((data) => { |
| 93 | + // Add 5 minutes worth of points immediately ( to simulate previous data ). |
| 94 | + add(data.splice(0, Math.round(5 * 60 * 10))) |
| 95 | + // Then stream some more |
| 96 | + setInterval(() => { |
| 97 | + add(data.splice(0, 1)) |
| 98 | + }, 50) |
| 99 | + }) |
0 commit comments