I want to show a chart in a bootstrap modal. Codes here: but it doesn't work, chart not display. How to fix that?
<div id="myModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="chart1" style="height:300px; width:600px;"></div>
</div><!-- /.modal -->
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84];
var plot1 = $.jqplot('chart1', [line1], {
title:'Data Point Highlighting',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
});
$('#myModal').bind('shown',function() {
plot1.replot();
});
});
</script>
#button type="button" class="btn btn-primary btn-lg active" data-toggle="modal" data-target="#myModel">Draw
you must show char after showing compelete modal box
In bootstrap 3 :
$('#myModal').on('shown.bs.modal', function (e) {
var plot1 = $.jqplot('chart1', [line1], {
title:'Data Point Highlighting',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
});
});
try draw chart after modal like this:
$('#myModal').modal();
// and then
$('#myModal').on('shown.bs.modal', function (e) {
plot1.replot();
//...
I know this is a very dated question, however I ran into a similar issue recently using react, react-bootstrap and chartjs - never had an issue until attempting to render a chart within a modal. If you're having a similar issue and are using react with bootstrap and the react-bootstrap library, there is an onEntered
event one can use. For my scenario, conditionally rendering the chart, using state that is updated when the callback for isEntered
is invoked, solved the problem nicely.
If a code snippet would help anyone, please lmk.
Docs for react-bootstrap component library modal: https://react-bootstrap.github.io/components/modal/#api
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.