CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Mohamed Nuzhy
Mohamed Nuzhy

Reputation: 105

Using Jquery/Ajax to display a result of codeigniter function in view

I'm currently working on a project by using codeigniter. Where I have a view page called dashboard.php. In dashboard, my task is to display a graph. From dashbord.php I'm calling the controller function which is stat(). I have created the graph using Morris.js and which is located in stat.php.

controller function stat() 

  public function stat()
  {
    $this->load->view('template/admin_header', $data);
    $this->load->view('merchant/stat', $data);
    $this->load->view('template/footer', $data);
  }

view page stat.php

<script>
$(function() {
     Morris.Area({
        element: 'morris-area-chart-scan-payment',
        data: [
        {
            period: 'Mon',
            spoint: 2666,
            mpayment: null,
        }, 
        {
            period: 'Tue',
            spoint: 2778,
            mpayment: 1350,
        }, 
        {
            period: 'Wed',
            spoint: 4912,
            mpayment: 1969,
        } 
      ], 

      xkey: 'period',
     ykeys: ['spoint', 'mpayment'],
     labels: ['Scan Point', 'Payment'],
     parseTime: false,
     pointSize: 2,
     hideHover: 'auto',
     resize: true
     });
  });
 </script>

 <div id="morris-area-chart-scan-payment"></div>

dashboard.php the view page

<div id="div1"></div>

I have created a div tag in the view page dashboard.php. How can I display the graph in stat.php in dashboard.php using JQuery/Ajax ?

Upvotes: 2

Views: 878

Answers (2)

Uday Kumar
Uday Kumar

Reputation: 131

where is your callback URL ?

you must set a callback url where you want to sent the data and receive the value .

Upvotes: 0

UfguFugullu
UfguFugullu

Reputation: 2147

Codeigniter should return the array of morris data as json on the url which will be requested in the ajax below

$(function() {
  var morris_area = Morris.Area({
    element: 'morris-area-chart-scan-payment',
    data: [
      {
        period: 'Mon',
        spoint: 2666,
        mpayment: null,
      }, 
      {
        period: 'Tue',
        spoint: 2778,
        mpayment: 1350,
      }, 
      {
        period: 'Wed',
        spoint: 4912,
        mpayment: 1969,
      } 
    ], 
    xkey: 'period',
    ykeys: ['spoint', 'mpayment'],
    labels: ['Scan Point', 'Payment'],
    parseTime: false,
    pointSize: 2,
    hideHover: 'auto',
    resize: true
  });

  $('.some-button').on('click', function loadMorrisData() {
    $.ajax({
      url: "http://your-test-url.something",
      success: function(data) {
        morris_area.setData(data);
      }
    });
  });
});

Upvotes: 3

Related Questions