Monday, February 27, 2017

How to filtering chart between start date and end date laravel

i made a report charts using ConsoleTVs/charts packages...

i try making report charts by between start date and end date... but variable not defined. variable obtained from Json response from the controller.

Im using ajax to throwing date to controller.

this my code:

LaporanController.php

public function cari(Request $request, $tgl_awal, $tgl_akhir)
    {
      $data_top_user = DB::table('radacct')
                    ->select(array('username', DB::raw('Round((sum(acctoutputoctets))/1048576,0) as jumlah')))
                    ->whereBetween('acctstarttime', [$tgl_awal, $tgl_akhir])
                    ->orderBy('jumlah','desc')
                    ->limit(10)
                    ->get();

              $chart_laporan = Charts::create('bar', 'highcharts')
                    ->template('teal-material')
                    ->title('10 pengguna pemakai bandwith terbanyak')
                    ->elementLabel('Jumlah')
                    ->responsive(true)
                    ->labels($data_top_user->pluck('username'))
                    ->values($data_top_user->pluck('jumlah'));

                    return response()->json([
    ['chart_laporan' => $chart_laporan]
]);

                    /*return view('laporan.laporan_nas')
                            ->with(['chart_laporan' => $chart_laporan]);*/
    }

and my Route web.php

    Route::post('/laporan_device/cari/{tgl_awal}/{tgl_akhir}','Graph\LaporanController@cari');

and my view

<div class="box-body">
            <div class="table-responsive">
              <form class="form-inline" id="cari">
                <div class="form-group">
                  <label for="exampleInputName2">Tanggal awal</label>
                  <input type="text" class="form-control" id="tgl_awal" >
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail2">Tanggal Akhir</label>
                  <input type="text" class="form-control" id="tgl_akhir">
                </div>
                <button type="submit" class="btn btn-default">Cari</button>
              </form>
            </div>
          </div>

    $("#cari").submit(function(event){

        // Prevent default posting of form - put here to work in case of errors
        event.preventDefault();

        // Abort any pending request
        if (request) {
            request.abort();
        }
        // setup some local variables
        var $form = $(this);

        // Let's select and cache all the fields
        var $inputs = $form.find("input, select, button, textarea");

        // Serialize the data in the form
        var serializedData = $form.serialize();

        // Let's disable the inputs for the duration of the Ajax request.
        // Note: we disable elements AFTER the form data has been serialized.
        // Disabled form elements will not be serialized.


        // Fire off the request to /form.php

          $.ajax({
              type: 'post',
              url: window.location +'/cari/'+$("#tgl_awal").val()+'/'+$("#tgl_akhir").val(),
              data: {
                '_token': $('input[name=_token]').val(),
                'tgl_awal': $("#tgl_awal").val(),
                'tgl_akhir' : $("#tgl_akhir").val(),
              },
            success: function(data) {
              if ((data.errors)) {

              }
              else{
                $('.chart_view').removeClass('hidden');
                $('.box_charts').append('<div class="box-header"><h3 class="box-title">Daftar</h3></div><div class="box-render">  {!! $chart_laporan->render() !!}</div>');
                $.notify({
                  message: 'Data Berhasil Diubah',
                },{
                  element: 'body',
                    position: null,
                    type: "success",
                    offset: 20,
                    spacing: 10,
                    z_index: 1031,
                    delay: 1000,
                    timer: 1000
                });
                    oTable.ajax.reload();
              }

          },
        });
          e.preventDefault()

    });
  </script>

can someone help me? please help me thank you before...




via muzamil indra

Advertisement