Not able to display div inside bootstrap Modal

Question

I have bootstrap 4 modal and inside the Modal body, trying to display a containing a bar chart. Below is the code

<!-- Modal body -->
    <div class="modal-body">
   Modal body..
   <!--Markup to display graph-->
   <div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>              
   </div

when I am keeping "chart1" outside of Modal body, I can see chart displayed whereas same is not happening when its inside body of Modal. Modal is displayed on click of a below button

<button type="submit" class="btn btn-primary mb-2" style=" margin-left:30px;  margin-top:20px; display:none" id="analyzeAndPredict" data-toggle="modal" data-target="#graphicalModal" onclick="BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd'])">Analyze & Predict</button>

What's wrong with above code?

Tried to add code in fiddle http://jsfiddle.net/r2sd5b0y/

Answer 1

I have removed onClick from a button and call BarChartAjax on shown.bs.modal in js

$('#graphicalModal').on('shown.bs.modal', function () {
   BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd']);
})

Here chart displayed when modal open but I think there is some issue with an array you passed to BarChartAjax function so that chart is not displaying correctly so check your values you passed to function

function DisplayBarChart(data) {
    //debugger;
    var array = data.split("-");
    var s1 = array[0].split(',').map(function (el) { return +el; });
    var ticks = array[1].split(',');
    $.jqplot.config.enablePlugins = true;
    console.log(s1);
    plot1 = $.jqplot('chart1', [s1], {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: { show: false }
    });

    $('#chart1').bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
            $('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
        }
    );
}

function BarChartAjax(xdata, ydata) {
    var dataToSend = JSON.stringify({ 'GraphData': xdata + "-" + ydata });
    DisplayBarChart(dataToSend);
}

$('#graphicalModal').on('shown.bs.modal', function () {
  BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd']);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  
  <button type="submit" class="btn btn-primary mb-2" style=" margin-left:30px;  margin-top:20px;" id="analyzeAndPredict" data-toggle="modal" data-target="#graphicalModal" >Analyze & Predict</button> 
 
 
 <div class="modal fade" id="graphicalModal">
                  <div class="modal-dialog">
                  <div class="modal-content">
      
                   <!-- Modal Header -->
                  <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4>
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>      
                 <!-- Modal body -->
                 <div class="modal-body" id="graphicalModalBody">
                 Modal body..
                    <div id="chart1" style=" margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>    
                 </div>
        
                <!-- Modal footer -->
                 <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                 </div>
                      </div>
    </div>
  </div>