Reputation: 417
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?
$('.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();
Upvotes: 0
Views: 901
Reputation: 1229
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] });
Upvotes: 1