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

Question

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 ?

graph is in a separate view file which is stat.php. What i want is to display the graph in dashboard using Jquery and Ajax. — Mohamed Nuzhy
– Mohamed Nuzhy, Commented Jun 7, 2017 at 6:38
i think its not possible(not tested) because chart have many affection related to jquery so thats not good method. you have to call ajax from dashbord.php — Ahmed Ginani
– Ahmed Ginani, Commented Jun 7, 2017 at 6:46

UfguFugullu · Accepted Answer · 2017-06-07 06:34:37Z

3

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

answered Jun 7, 2017 at 6:34

UfguFugullu

2,16715 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohamed Nuzhy Over a year ago

I have a number of graphs to display in dashboard. So, It would be better that all the graphs are in different files. Is there any way to call those files using Jquery and Ajax?

UfguFugullu Over a year ago

I think you should add an AjaxController inside your Codeigniter project so you can add different methods (with different routes) for different charts

Uday Kumar · Accepted Answer · 2017-06-07 12:53:21Z

0

where is your callback URL ?

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

answered Jun 7, 2017 at 12:53

Uday Kumar

1311 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related