I am looking to incorporate a Highcharts web chart onto a specific part of a Bootstrap modal, while ensuring the size remains dynamic along with the modal itself.
Here's what I have attempted so far:
Sample HTML code:
<td><a href="#">${ studentInfo.name }</a></td>
Modal setup:
<div class="container">
<div id="studentProfile" class="modal container hide fade in" tabindex="-1">
...
<div class="modal-body">
<div class="row-fluid">
<div class="span6">...</div>
<div class="span6">
// chart
<div class="span6">
<div class="span6">
<div id="chart-web" class="span6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript implementation:
$( function() {
var $modal = $('#studentProfile');
$('.profiler').on( 'click', function() {
$.post('../admin/student_stats.do',
{ name : $(this).text() }, function( data ) {
console.log( data );
console.log( data['studentBean'].myName );
$modal.modal();
},'json')
.fail( function () {
bootbox.alert('Internal Error, please try again.');
});
});
});
The customization of the chart:
$(function () {
$('#chart-web').highcharts({
...
});
});
Current Issue: Initially, everything looks fine. However,
resizing the browser causes issues with the chart. Even after maximizing it again, the same problem persists as shown in the image below. Is there a solution to this?
If further clarification is required, feel free to comment and I will address it accordingly.
Update: Here's a fiddle link