Create Candelstick charts with node js save as image

JavaScript
1

I want to create a candelstick charts with node.js and save it as a picture, i am using the following code:

const { JSDOM } = require('jsdom');
const { document } = new JSDOM('').window;
global.document = document;

const Chart = require('chart.js');

async function ChartSpeichern() {
  // Erstellen eines neuen Chart-Objekts
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const candlestickData = [
    { open: 100, high: 120, low: 80, close: 110 },
    { open: 110, high: 130, low: 90, close: 120 },
    { open: 120, high: 140, low: 100, close: 130 },
    // Weitere Candlesticks hinzufügen...
  ];

  const chart = new Chart(ctx, {
    type: 'candlestick',
    data: {
      datasets: [{
        label: 'Candlestick Chart',
        data: candlestickData.map((candle) => ({
          t: new Date(), // Hier können Sie ein genaues Datum setzen
          o: candle.open,
          h: candle.high,
          l: candle.low,
          c: candle.close,
        })),
      }],
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day',
          },
        },
      },
    },
  });

  // Zeichnen des Charts
  chart.draw();

  // Hier können Sie das Bild als Datei speichern (z.B., als PNG)
  const fs = require('fs');
  const dataUrl = canvas.toDataURL();
  const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');

  fs.writeFileSync('candlestick_chart.png', base64Data, 'base64');
}

// Rufen Sie die Funktion auf
ChartSpeichern();

i get then the error

throw new Error(‘This method is not implemented: Check that a complete date adapter is provided.’);
^

Error: This method is not implemented: Check that a complete date adapter is provided.

Then i install this here: npm install chartjs-adapter-date-fns

and i use this code:

const { JSDOM } = require('jsdom');
const { document } = new JSDOM('').window;
global.document = document;

// Hier fügen wir den import für den Datumsadapter hinzu
const Chart = require('chart.js');
const { ChartDate, registerables } = require('chartjs-adapter-date-fns');
Chart.register(...registerables);

async function ChartSpeichern() {
  // Erstellen eines neuen Chart-Objekts
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const candlestickData = [
    { open: 100, high: 120, low: 80, close: 110 },
    { open: 110, high: 130, low: 90, close: 120 },
    { open: 120, high: 140, low: 100, close: 130 },
    // Weitere Candlesticks hinzufügen...
  ];

  const chart = new Chart(ctx, {
    type: 'candlestick',
    data: {
      datasets: [{
        label: 'Candlestick Chart',
        data: candlestickData.map((candle) => ({
          t: new Date(), // Hier können Sie ein genaues Datum setzen
          o: candle.open,
          h: candle.high,
          l: candle.low,
          c: candle.close,
        })),
      }],
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day',
          },
        },
      },
    },
  });

  // Zeichnen des Charts
  chart.draw();

  // Hier können Sie das Bild als Datei speichern (z.B., als PNG)
  const fs = require('fs');
  const dataUrl = canvas.toDataURL();
  const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');

  fs.writeFileSync('candlestick_chart.png', base64Data, 'base64');
}

// Rufen Sie die Funktion auf
ChartSpeichern();

but then i get this error

const { ChartDate, registerables } = require(‘chartjs-adapter-date-fns’);
^

Error [ERR_REQUIRE_ESM]: require() of ES Module

so since few hours i try this with help of ChatGPT but we dont come to a result, just because of this time adapter or so, the normal graphs are working but when i want to create a candelstick chart with node js i just get error, would be cool if somebody know a solution that he can share.

2

Google tells me the problem is this uses import, not require, because the reference is an ES6 module.

3

This could be an issue. chartjs-adapter-date-fns only seems to be available as an ES6 module import.

jsdom comes in a commonJS flavour and needs to be required

chartjs-adapter-date-fns does have a CDN, so maybe using a static file might be a solution.

I did also find this article on how to use both.

https://tvk.dev/article/node-js-how-to-use-import-and-require-in-the-same-file/

From the nodejs official documents
https://nodejs.org/api/module.html#modulecreaterequirefilename

4

Thank you for your tips, i will try it

5

i think his candelsticks is just not supported for node js sdk, the following code create me nice a barchart

const { JSDOM } = require('jsdom');
const { document } = new JSDOM('').window;
global.document = document;

const Chart = require('chart.js/auto');

async function BarChartSpeichern() {

 // Beispiel-Daten für das Bar Chart
const barChartData = {
  labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
  datasets: [{
    label: 'Bar Chart Example',
    backgroundColor: 'rgba(75, 192, 192, 0.2)',
    borderColor: 'rgba(75, 192, 192, 1)',
    borderWidth: 1,
    data: [10, 20, 30, 40],
  }],
};

// Erstellen eines neuen Bar Chart
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const barChart = new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
});

// Hier können Sie das Bild als Datei speichern (z.B., als PNG)
const fs = require('fs');
const dataUrl = canvas.toDataURL();
const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');

fs.writeFileSync('bar_chart.png', base64Data, 'base64');
}
BarChartSpeichern();

but when i try the code before to create candelstick chart it just donr wort, if somebody can make a working example for create also with this sdk a candelstick chart in node ja i think will be useful for many people