use ajax response data in another javascript

Question

I want to use ajax response data in another javascript.

AJAX In view (sell_report.php)

    <script src="<?php echo base_url(); ?>public/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
                  $('.select_year_product').on('change',function () {
                         var select_year_product = $('.select_year_product').val();

                         $.ajax({

                            method : "POST",
                            url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
                            data: { select_year_product:select_year_product },
                                success : function (data){
                                        alert(data);            
                                }

                         });                           
                    });
    </script>

Above is the ajax call here in i have to select product yearwise from database it's working fine. i got response in alert(data) in ajax response. Below is the my controller Code from here i got result.

Sell_report.php (Controller)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Sell_report extends CI_Controller {
    public function select_data_yearwise()
    {
        $select_year_product = $this->input->post('select_year_product');
        $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
        $row_yearwise = $res_yearwise->result();
        print_r($row_yearwise);         
        exit();
    }
}

Now,

I want to use this reponse in another javascript which is in the same view where i write the ajax script.

The script in which i want the ajax response is explained below. This script is for dynamic graph i have to pass the values which i got in array of ajax response through for each loop.

<script type="text/javascript">
    var Script = function () {
    //morris chart

    $(function () {
      // data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type


      Morris.Bar({
        element: 'hero-bar',
        data: [
          {device: 'iPhone', geekbench: 136},
          {device: 'iPhone 3G', geekbench: 137},
          {device: 'iPhone 3GS', geekbench: 275},
          {device: 'iPhone 4', geekbench: 380},
          {device: 'iPhone 4S', geekbench: 655},
          {device: 'iPhone 5', geekbench: 1571}
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        barColors: ['#6883a3']
      });



      $('.code-example').each(function (index, el) {
        eval($(el).text());
      });
    });
}();
</script>

EDIT with AJAX Response:

Array
(
    [0] => stdClass Object
        (
            [id] => 25
            [name] => Product 1 
            [handle] => Handle1
            [description] => <p>This is for Testing..!</p>
            [total_order_income] => 1420
            [type_id] => 19
            [brand_id] => 5
            [supplier_id] => 5
            [final_price] => 147
            [user_id] => 2
            [supplier_code] => 123456
            [sales_account_code] => 123456
            [purchase_account_code] => 123456
            [supply_price] => 100
            [markup] => 5
            [retail_price] => 105
            [tax_amount] => 42
            [quantity] => 50
            [status] => 1
            [dt_added] => 1472551929
            [dt_updated] => 1472551929
        )

    [1] => stdClass Object
        (
            [id] => 29
            [name] => Samsung 4G
            [handle] => Samsung 4G
            [description] => <p>It is very good phone</p>
            [total_order_income] => 1420
            [type_id] => 18
            [brand_id] => 6
            [supplier_id] => 1
            [final_price] => 121
            [user_id] => 2
            [supplier_code] => 100
            [sales_account_code] => 200
            [purchase_account_code] => 300
            [supply_price] => 100
            [markup] => 10
            [retail_price] => 110
            [tax_amount] => 11
            [quantity] => 0
            [status] => 1
            [dt_added] => 1472627773
            [dt_updated] => 1472627773
        )

    [2] => stdClass Object
        (
            [id] => 30
            [name] => Product 12
            [handle] => Handle
            [description] => Description
            [total_order_income] => 1420
            [type_id] => 0
            [brand_id] => 0
            [supplier_id] => 0
            [final_price] => 150
            [user_id] => 2
            [supplier_code] => Description
            [sales_account_code] => 123
            [purchase_account_code] => Description
            [supply_price] => 
            [markup] => 
            [retail_price] => 
            [tax_amount] => 
            [quantity] => 20
            [status] => 1
            [dt_added] => 1472628990
            [dt_updated] => 1472628990
        )

)

Here is x-axis i want product names and in y-axis i want total_order_income.

Answer 1

1. Create the bar chart. Morris.Bar(options) returns the bar chart object for future use so make sure to save a reference to it. (to update the data)
2. Hook up the year change event so that you do your AJAX request. If you do this after you create the bar chart and within the same scope, you can use the chart without creating a global variable for it. (yay for closures)
3. In the AJAX success callback, process the data to convert it into the correct format.

4. Still in the AJAX callback, call chart.setData(data) to update the chart.

   /* Step 1 */
   var bar_chart = Morris.Bar({
     element: 'hero-bar',
     data: [],
     xkey: 'device',
     ykeys: ['geekbench'],
     labels: ['Geekbench'],
     barRatio: 0.4,
     xLabelAngle: 35,
     hideHover: 'auto',
     barColors: ['#6883a3']
   });
   
   /* Step 2 */
   $('.select_year_product').on('change',function () {
     var select_year_product = $('.select_year_product').val();
     $.ajax({
       method : "POST",
       url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
       data: { select_year_product:select_year_product },
       success : function (data){
         /* Step 3: format data here */
         /* Step 4 */
         bar_chart.setData(data);
       }
     });                           
   });
   

If you needed help with step 3 then I'll happily give some pointers but it would be helpful to provide some sample responses from the AJAX request.

Edit: JSON encoding the data before sending it makes more sense than parsing the print_r output:

public function select_data_yearwise()
{
    $select_year_product = $this->input->post('select_year_product');
    $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
    $row_yearwise = $res_yearwise->result();
    echo json_encode($row_yearwise);         
    exit();
}

Client side:

success : function (data){
  JSON.parse(data).map(d => /* extract the details you want here */ )
  /* Step 4 */
  bar_chart.setData(data);
}