how to pass data into bar Highchart using ajax in codeigniter?

i already passed data into bar highchart using php and it's work. but when i load the page it takes around 5 sec(That's long enough). and after i did some research i found many forums recommended using ajax for Highchart. so i'm just guessing maybe using ajax can make page load faster(correct me if im wrong).

But the problem is, i don't know how to use ajax for Bar highchart . could anyone help me and give me some clue how to start use ajax for passing data from Controller to ajax?

here is my current code:

MODEL :

 public function isiChart()
 {
$query = $this->db->query('select KODE_BRG,NAMA_BRG,COUNT(case when total=3 then 1 else null end) OOS,
                            COUNT(case when total >=1 and total <= 3 then 1 else null end) kurang_4,
                            COUNT(case when total>3 then 1 else null end)  OSA from 
                            (select  b.KODE_BRG,d.NAMA_BRG,b.JUM_KARTON,b.JUM_SATUAN,b.JUM_KARTON*d.FRACT+b.JUM_SATUAN  total
                            from assrkmd a 
                            left join assrkmdstok b on b.TGL_RKM=a.TGL_RKM and b.KODE_MDS=a.KODE_MDS and b.KODE_CUS=a.KODE_CUS
                            left join asscus c on c.KODE_CUS=a.KODE_CUS
                            inner join asstok d on d.KODE_BRG=b.KODE_BRG
                            left join asssup e on e.KODE_SPL=d.KODE_SPL
                            left join asssgrup f on f.KODE_SGRUP=c.KODE_SGRUP
                            left join assgrup g on g.KODE_GRUP=f.KODE_GRUP
                            inner join assmds h on h.KODE_MDS=a.KODE_MDS
                            left join asssgrupbrg i on i.KODE_SGRUP=d.KODE_SGRUP
                            left join assgrupbrg j on j.KODE_GRUP=i.KODE_GRUP 
                            inner join assgrupmds k on k.KODE_GROUP=h.KODE_GROUP
                            where h.TIPE_MDS =0 and a.CHECK_OUT is not null ) g 
                            group by KODE_BRG,NAMA_BRG order by NAMA_BRG');
                            return $query;

CONTROLLER :

public function index()
{

    $data['db1'] = $this->m_mds->isiChart();

    $data['content'] = 'tempelates/MDS/content';
    $data['chart'] = 'tempelates/MDS/chart';
    $this->load->view('tempelate',$data);
}

VIEW :

 <div class="col-md-12 col-sm-12">
 <div class="x_panel">                  
 <div class="x_title">
  <h2>Bar graph <small>Sessions</small></h2>
  <ul class="nav navbar-right panel_toolbox">
    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>
<div class="x_content">
<div id="container" style="overflow-x: auto;"></div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="<?php echo base_url()?>assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<?php foreach ($db1->result_array() as $key) { <---! Here i foreach data comes from Controller--->
  $data[]= $key['NAMA_BRG'];
  $data0[]=$key['OOS'];
  $data1[]= $key['kurang_4'];
  $data2[]=$key['OSA'];
}?>
<script>
 Highcharts.chart('container', {
 chart: {type: 'bar',options3d: { enabled: true, }},
 title: {text: 'All Product vs Call'},
 xAxis: {
   categories: [<?php echo '"'.join('","',$data).'"';?> ],
   title: {text: null},
   min: 0,max: 8,
   scrollbar: {enabled: true},
   tickLength: 0},
   yAxis: {title: {text: ''}},
   legend: {reversed: true},
   plotOptions: {series: {stacking: 'normal'}},
   credits: {enabled: true},
   exporting: { enabled: true },
   dataSorting: { enabled: true},
   series: [{
   name: 'OOS',
   data: [<?php echo join(',',$data0);?>],
   color: 'rgba(54, 162, 235, 0.2)',
   borderColor: 'rgba(54, 162, 235, 1)',
   dataLabels: {enabled: true,
    color: '#FFFFFF',
    align: 'center',
    format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
    y: 1, // 10 pixels down from the top
   style: {
     fontSize: '10px',
     fontFamily: 'Verdana, sans-serif'
    }
   }
  },{
   name: '<4',
   data: [<?php echo join(',',$data1);?>],
 color: 'rgba(255, 99, 132, 0.3)',
 borderColor: 'rgba(255, 99, 132, 1)',
 dataLabels: {
   enabled: true,color: '#FFFFFF',align: 'center',
   format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
   y: 1, // 10 pixels down from the top
   style: { fontSize: '10px',fontFamily: 'Verdana, sans-serif'}
 }
 },{
  name: 'OSA',
  data: [<?php echo join(',',$data2);?>],
  color: 'rgb(51, 255, 153, 0.6)',
  borderColor: 'rgb(51, 255, 153)',
   dataLabels:{
    enabled: true,
    color: '#FFFFFF',
    align: 'center',
    format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
    // format: '{point.y:.1f}', // one decimal
    y: 1, // 10 pixels down from the top
    style: {fontSize: '10px',fontFamily: 'Verdana, sans-serif'}
  }
 }]
 });
 </script>