Fake emulated DOM to make charts on a backend Node.js server #1415
Replies: 2 comments 4 replies
-
|
What changes did you make to make it work? I didn`t find them in your fork, so maybe you can describe it here? |
Beta Was this translation helpful? Give feedback.
-
|
Looks like I forgot to push some things. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Check my message |
Beta Was this translation helpful? Give feedback.
-
|
I did this without library modifications. import {JSDOM} from 'jsdom';
const dom = new JSDOM('<!DOCTYPE html><div style="height: 600px; width: 600px;" id="firstContainer">Hello world</div>', {pretendToBeVisual: true});
global.window = dom.window;
window.matchMedia = (str) => {
const ddpx = str.split('all and (resolution: ')[1].split('dppx)')[0];
return {
matches: true,
media: 'all and (resolution: '+ ddpx +'dppx)',
addListener: () => {},
};
}
global.document = dom.window.document;
import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById('firstContainer'), {width: 600, height: 600, localization: { locale: 'en-US' }});
const areaSeries = chart.addAreaSeries({
lineColor: '#2962FF', topColor: '#2962FF',
bottomColor: 'rgba(41, 98, 255, 0.28)',
});
areaSeries.setData([
{ time: '2018-12-22', value: 32.51 },
{ time: '2018-12-23', value: 31.11 },
{ time: '2018-12-24', value: 27.02 },
{ time: '2018-12-25', value: 27.32 },
{ time: '2018-12-26', value: 25.17 },
{ time: '2018-12-27', value: 28.89 },
{ time: '2018-12-28', value: 25.46 },
{ time: '2018-12-29', value: 23.92 },
{ time: '2018-12-30', value: 22.68 },
{ time: '2018-12-31', value: 22.67 },
]);
const candlestickSeries = chart.addCandlestickSeries({
upColor: '#26a69a', downColor: '#ef5350', borderVisible: false,
wickUpColor: '#26a69a', wickDownColor: '#ef5350',
});
candlestickSeries.setData([
{ time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);
chart.timeScale().fitContent();
const result = chart.takeScreenshot();
const image = result.toDataURL("image/png");
// Log image as Base64 and I convert it using a Base64 to PNG converter
console.log(image); |
Beta Was this translation helpful? Give feedback.
-
|
Oh awesome. When I tried without library modification I did still run into some issues. matchMedia was one of them as you've solved neatly. Do you not encounter any other errors? Thanks for sharing and nice work though! |
Beta Was this translation helpful? Give feedback.
-
|
there was an error with localization, you need to explicitly specify it in the parameters and install canvas |
Beta Was this translation helpful? Give feedback.
-
TLDR: I found a way to create charts using your package solely on the back-end with Node.js. (no real DOM, document, window).
Hi,
for a new project I have to create charts on a back-end server and then convert them to an image and send them to a bot we have running somewhere else.
We really liked your charts so we wanted to give it a try but I soon found out this package required a document, window and DOM in general. (I took a quick glance so sorry if there is already a workaround for this).
I did some research and figured out that I can work around this issue by providing an emulated DOM using the jsdom library.
It took some fidgeting and tweaking two files in your package:
lightweight-charts.development.cjsanddevice-pixel-ratio.js. but was very easy in the end.I thought I'd share this with you in case there is an interest in this functionality and I'd be happy to open a PR or share my code.
This image was created solely on a Node.js server:
Snippet of our code on our Nodejs server
I hope this is of any value and if you have further questions or ideas please let me know!
Beta Was this translation helpful? Give feedback.
All reactions