score:1

Accepted answer

To create a chart you have to pass an HTML element that will be a chart container. In your code that what's missing. Check the demo I have prepared to reproduce this issue: https://jsfiddle.net/BlackLabel/c60y1t2v/

Code:

var chartArray = [],
  counter = 1,
  dataArr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  containers = document.getElementById('containers');

function drawChart(data) {
  var cnt = document.createElement('div'),
    cntId = 'container' + counter++,
    chart;

  cnt.setAttribute('id', cntId);
  containers.appendChild(cnt);

  chart = new Highcharts.Chart(cntId, {
    title: {
      text: "title",
    },
    xAxis: {
      categories: [1, 2, 3, 4],
    },
    series: [{
      type: 'line',
      data: data,
    }]
  });

  return chart;
}

dataArr.forEach(function(data) {
  var chart = drawChart(data);

  chartArray.push(chart);
});

score:0

You need to define options each time you use a new chart. Reinitialize the OriginalOptions every time you create a new chart.

const options = [...Array(5)].map(() => {
  const originalOptions = {
    series: [{
      data: [], // some random data
      type: 'column'
    }]
  }
  return Object.assign(originalOptions)
})

Fiddle

Updated:

For dynamically repopulating the chart, you have to initialize an empty chart and then add new series + redraw whenever your data is populated.

Your redraw function will look something like this:

var i = 0;
var data = [];

var chart = new Highcharts.Chart('container',{
    series: []
});

var interval = setInterval(function() {
i++;
data[i] = [i*10 + 1, i*10+2, i*10+3];
drawChart(data[i]);
if(i > 2) clearInterval(interval);

},1000);

function drawChart(data) {
var series = {
type: 'line',
data: data
}
chart.addSeries(series, false);
chart.redraw();
}

See Updated Fiddle

score:0

Store chart options in Array then map over to Initialize Highchart for each options.

var chartArray = [];

function drawChart(data1, data2, data3, i) {
// Create container for charts
const el = document.createElement('div');
document.body.appendChild(el).setAttribute("id", "container"+i);

// Create charts
var chart = new Highcharts.chart(el, {
  series: [{
    type: 'line',
    data: data1,
  }, {
    type: 'line',
    data: data2,
  }, {
    type: 'line',
    data: data3,
  }]
});
chartArray.push(chart);
console.log(chartArray);
}

var counter = 0;
var delayTime = 2000;
var timer = setInterval(function(){
  var data1 = [30, 70, 50];
  var data2 = [40, 70, 60];
  var data3 = [10, 90, 20];
  drawChart(data1, data2, data3, counter);
  if(counter == 2){
    clearInterval(timer);
  }
  counter++;
},delayTime);
<script src="https://code.highcharts.com/highcharts.js"></script>

score:0

To Print HTML as PDF you can use this software "wkhtmltopdf"

in Linux you need to use this command : 

sudo apt-get install wkhtmltopdf

There are many library based on "wkhtmltopdf" in many languages so you can use it.

Library for PHP : https://github.com/mikehaertl/phpwkhtmltopdf


Related Query

More Query from same tag