Drawing multiple chart.js charts (nodejs)

Question

I'm implementing a backend application that creates multiple charts using the chart.js library and then stores them in a PNG format. I'm struggling around one problem with creating multiple charts in a for loop. Inside the for loop, the application first creates a new chart, then set its properties and then calls the createChart() function to draw the chart. After the process is finished, I'm calling chartNode.destroy() to clean up any references for a new chart.

I was expecting 12 different charts to be drawn, but 12 same charts are drawn instead. Application only draws a chart that is at the last index of textData.charts array.

Any advice would be appreciated.

function createCharts() {
  let i = 0;
  textData.charts.forEach(graf => {
    const chartNode = new ChartjsNode(600, 600);
    setChartProperties(graf, dataResult[i]);
    createChart(graf, chartNode).then(() => {
        chartNode.destroy();
    });
    i++;
  })
}

function createChart(graf, chartNode) {
    return chartNode.drawChart(graph).then(() => {
      return chartNode.getImageBuffer('image/png');
    }).then(buffer => {
      Array.isArray(buffer)
      return chartNode.getImageStream('image/png');
    }).then(streamResult => {
      streamResult.stream
      streamResult.length
      return chartNode.writeImageToFile('image/png', './results/' + graf.filename);
    });
}

 function setChartProperties(graf, data) { graph.data.datasets[0].data = data; graph.options.title.text = graf.name; graph.data.labels = graf.labels; graph.data.datasets[1].data = graf.limits; graph.data.datasets[2].data = graf.limits; graph.data.datasets[1].backgroundColor = graf.color1; graph.data.datasets[2].backgroundColor = graf.color2; graph.data.datasets[1].borderColor = graf.color1; graph.data.datasets[2].borderColor = graf.color2; graph.data.datasets[1].label = graf.label1; graph.data.datasets[2].label = graf.label2; } 

Answer 1

You can try with a shallow copy of graph for each of your chart constructions. If that doesn't work, just tell me, we'll try something else.

I added parameters called graph so that there is less things to change as possible.

function createCharts() {
  let i = 0;
  textData.charts.forEach(graf => {
    const chartNode = new ChartjsNode(600, 600);
    const chartGraph = Object.assign({}, graph);
    setChartProperties(chartGraph, graf, dataResult[i]);
    createChart(chartGraph, graf, chartNode).then(() => {
        chartNode.destroy();
    });
    i++;
  })
}

function createChart(graph, graf, chartNode) {
    return chartNode.drawChart(graph).then(() => {
      return chartNode.getImageBuffer('image/png');
    }).then(buffer => {
      Array.isArray(buffer)
      return chartNode.getImageStream('image/png');
    }).then(streamResult => {
      streamResult.stream
      streamResult.length
      return chartNode.writeImageToFile('image/png', './results/' + graf.filename);
    });
}

function setChartProperties(graph, graf, data) {
  graph.data.datasets[0].data = data;
  graph.options.title.text = graf.name;
  graph.data.labels = graf.labels;
  graph.data.datasets[1].data = graf.limits;
  graph.data.datasets[2].data = graf.limits;
  graph.data.datasets[1].backgroundColor = graf.color1;
  graph.data.datasets[2].backgroundColor = graf.color2;
  graph.data.datasets[1].borderColor = graf.color1;
  graph.data.datasets[2].borderColor = graf.color2;
  graph.data.datasets[1].label = graf.label1;
  graph.data.datasets[2].label = graf.label2;
}