Multiple charts with same data not loading in same page: Highcharts

Question

I am trying to display Highchart having same data in custom no. of times, Say I want to display the chart 2 times in same pagedynamically.

What I have done is that I set the chart in for loop in which I can repeat the chart multiple times dynamically.

Here is the Script That I have tried.

    var len = 2 ;

var chartArea = document.getElementById("content");

for(var i=0;i<len;i++)
{
    console.log("I", i);
           chartArea.innerHTML +=

            '<div id="container'+i+'"></div>';
    var categories =  ["1","2","3","4","5","6","7","8","9","10"];

    Highcharts.stockChart('container'+i, {  

    rangeSelector: {
        enabled: false
    },

      xAxis: {
    labels: {
      formatter: function() {

        return categories[this.value];
      }
    }
  },

  navigator: {
    xAxis: {
      labels: {
        formatter: function() {

          return categories[this.value];
        }
      }
    }
  },

    plotOptions: {
        series: {
            animation: {
                duration: 2000
            },
            marker:{
              enabled: false
            }
        }
    },

    series: [{
        data: [3,5,3,6,2,6,4,9,4,6]
    }]
});

But the problem is that only last graph shows the line chart. the other first chart have the x-axis labels bu the line graph is not showing.

Here is the Fiddle That I have tried.

http://jsfiddle.net/abnitchauhan/cenmohbw/

Answer 1

You forgot to append the child to the DOM tree. When you create a new HTML element dynamically, it needs to be attached to an existing node in the DOM tree.

In Javascript you can do:

var existingNode = document.getElementById("content");
var newElement = document.createElement("div");
newElement.id = "someID";
existingNode.appendChild(newElement);

In jQuery, its more easy:

$("#content").append(`<div id="someID"></div>`);

In your case, the change would look like (only for loop changes) as:

for (var i = 0; i < len; i++) {
    console.log("I", i);
    $("#content").append(`<div id="container${i}"></div>`);
    // rest of your code