Ytukyg

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>