I'm actually working in page which contains some stats and I got an issue with highcharts. It's been 2 hours that I'm searching solution on internet and don't find any.
First problem, I use bootstrap 3, so my container is col-xs-6 wide. In my documents, this is about 350px wide. The chart keeps rendering at 600px wide.
I found the method reflow() of course, and it works when I execute it manually into the console of FF but I tried to execute it like that and doesn't work.
function getContents(courses, user) {
$.ajax({
url: BeginUrl + 'analyse/get/content',
type: "post",
data: {courses: courses, user_id: user},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content'))
},
error: function (data) {
swal("Oops", data.error.message, "error");
},
success: function (data) {
if (data.success) {
//update bar about content
$('#hero-bar').html('');
$('#hero-bar').highcharts({
chart: {
renderTo: 'hero-bar',
type: 'column',
events:{
load: function() {
this.reflow();
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: data.contents.categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
pointFormat: '<tr>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
series: data.contents.series
});
}
},
complete: function() {
$('#loader-content-box').fadeOut(400, function(){
$('#content-box').fadeIn(400);
});
}
});
}
I tried in events params when I'm building my chart and i tried manually in "complete" from the ajax with : $('#hero-bar').highcharts().reflow();
Both didn't worked of course.... When manually in the console, it works. I guess this is something related to the loading and render of the chart but even in the events load which seems to be executed after the chart rendering doesn't work either. Of course, I could make a fixed value to width but I need it to be responsive.
Second problem which is certainly binded to the first, When I'm resizing my window, 2 of my chart simply disappear like I called destroy method... no more <rect> or anything in my container. It does that with the previous example and the following one :
function getDeployement(courses, user) {
$.ajax({
url: BeginUrl + 'analyse/get/deployement',
type: "post",
data: {courses: courses, user_id: user},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content'))
},
error: function (data) {
swal("Oops", data.error.message, "error");
},
success: function (data) {
if (data.success) {
//update bar line
$('#hero-graph').html('');
$('#hero-graph').highcharts({
credits: {
enabled: false
},
chart: {
renderTo: 'hero-graph',
height: 320,
width: 710
},
title: {
text: null,
},
legend: {
enabled: false
},
xAxis: {
categories: data.deployement.categories
},
yAxis: {
title: {
text: 'No. Participants'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: data.deployement.series
});
}
},
complete: function() {
$('#loader-deployement-box').fadeOut(400, function(){
$('#deployement-box').fadeIn(400);
});
getFacilitators(courses, user);
}
});
}
I searched for a long time and didn't find anything that can fix it.
Anyone has an idea or already got that problem?
