CODEWITHSUNDEEP
javascripthighcharts
Masha
Masha

Reputation: 857

javascript highcharts builder function

I am trying to make a function which will be building Highcharts charts dynamically based on parameters passed. I do it the following way:

function makeChart(name, title, series)
{
  var options = {
    chart: {
        type: 'areaspline',
        renderTo: name
    },
    credits: { enabled: false },           
    legend: { enabled: true },
    title: {
        text: title
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {             
      gridLineDashStyle: 'dot',             
      title: {               
        text: 'Quantity'
      }
    },
    plotOptions: {
        areaspline: {               
          animation: false,               
          stacking: '',               
          lineWidth: 1,               
          marker: { enabled: false }             
        }
    },
    series: [] //chart does not display except title. It will draw if I paste the data here manually
 };
 this.chart = new Highcharts.Chart(options);
 for (index = 0; index < series.length; ++index) {

 options.series[index] = {'name':series[index][0], 'data':series[index][1], 'color':series[index][2], 'fillOpacity': .3};
  }
}
makeChart('container2', 'second chart', [['thisisname1', [20,21,22,23,24,25,26,27,28], '#d8d8d8']]);//calling function with test parameters

But everything I can see is the charts title. I guess the problem is in adding data to series array. I tried to add it with several ways but it did not work, although I see that the data has been added if I console.log(options.series). Any ideas how to fix that? Thank you.

Upvotes: 1

Views: 96

Answers (1)

George Kagan
George Kagan

Reputation: 6124

Place this.chart = new Highcharts.Chart(options); after the for loop.

You're adding the data after the chart has been initialized, for it to work this way you need to tell HighCharts to redraw itself, easier option is to init after the loop. :)

Upvotes: 1

Related Questions