CODEWITHSUNDEEP
javascriptjqueryarraysjsonhighcharts
LEKSHMI SURESH
LEKSHMI SURESH

Reputation: 87

Storing Highcharts in array issue

I am plotting a number of highcharts dynamically in a loop and pushing each highchart to an array. So that while clicking on an external button, I can export the charts. But while pushing charts to array, only the last entry is properly set with options.

enter image description here

i had a reference to a fiddle that suggests to clone the options. [https://jsfiddle.net/ndb21y1w/][2]

https://www.highcharts.com/forum/viewtopic.php?t=38574

The fiddle have same series data plotted on all the charts. How to solve this if the data is different for each chart populated. Thanks for any help in advance.

Adding more clarity to question : The data is populated dynamically in loop. My code logic is like:

counter i; 
setInterval(function() {
//logic to populated data...
//It is a multiline chart, so three sets of arrays are populated. 
//filling data1[], data2[] and data3[] .
drawChart(data1, data2, data3);
if(condition true) clearInterval();
i++;
});

drawChart(data1, data2, data3) {
var chart = new Highcharts.Chart({
 title: {
            text: "title",
        },
        xAxis: {
            categories: [1,2,3,4...],
        },
    series: [{
        type: 'line',
        data: data1,
    }, {
        type: 'line',
        data: data2,
    }, {
        type: 'line',
        data: data3,
    },
});
chartArray.push(chart);
}

This chartArray is where I mentioned to get the last entry only properly.

Upvotes: 0

Views: 383

Answers (4)

Asfan Shaikh
Asfan Shaikh

Reputation: 769

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>

Upvotes: 0

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

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);
});

Upvotes: 1

Shantanu Sharma
Shantanu Sharma

Reputation: 692

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

Upvotes: 0

Mahbub Moon
Mahbub Moon

Reputation: 501

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

Upvotes: 0

Related Questions