0

I have several charts that are added ids according to array data then they are rendered to the a particular chart according to its id. The ids are being added but the new chart data is not being updated. What is wrong with my code?

My_jsfiddle

 $('.bars').each(function(){    
    bars = new Highcharts.Chart({
           chart: {type:'bar',renderTo:this,backgroundColor:'#222',plotBorderWidth:0,plotBackgroundColor:{linearGradient:{ x1:0, y1:0, x2:0, y2:1 },stops: [[0.40, "#383838"],[1, "#000"],[0.50, "#383838"]]},plotBorderColor:'#a6a0a0',height:70},
            title: {align:'left',margin:5,style: {color:'#FFFFFF',fontSize:'10px',"text-transform":"uppercase"}},legend: {enabled:false},credits: {enabled:false},tooltip:{enabled:false},
            loading:{labelStyle:{fontWeight:'bold',color:'#FF0000',top:'10%'},style:{backgroundColor:'#222'},hideDuration:1000},
            xAxis: {labels: {enabled:false},tickWidth:0,tickInterval:0,gridLineWidth:0},
            yAxis: {labels: {enabled:false},title: {text:null},min:0,max:100,tickWidth:0,gridLineWidth:0},
            series: [{data:[5]}] 
     });

});

function test(){
    while(bars.series.length){
        bars.series[0].remove();
    }
var idS = [50,60,40,80],
    horiz = document.getElementById('horizBarGauage'),
    idSL = 4,
    j;
for (j=idSL;j--;){
    console.log('Logging', idS[j]);
        horiz.children[j].id = idS[j];
        console.log('Logging', horiz.children[j].id);
        var idData = idS[j];
        bars.renderTo = idData;
        bars.addSeries({data:[idData]});
        bars.redraw();            
   }        
}

test();
Claude
  • 417
  • 1
  • 8
  • 15

1 Answers1

1

Each time you create a chart, bars is being reset to that new chart. So in test() when you reference bars, it is using the most recently created chart.

In test() you need to find the actual chart that you what to edit:

var chart = $("#" + idS[j]).highcharts();
chart.addSeries({data: [idData] });
Adam J.
  • 1,219
  • 1
  • 8
  • 6