chart not display inside a bootstrap-modal

bootstrap-modal, javascript, jquery, twitter-bootstrap

Solution

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'
        }
      }
    });              
});

Problem

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&nbsp;%#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

Original source