How to show Database Records in a Graph chart using Laravel

We can make any graph chart in laravel using Canvas.js. The canvas.js provides API for making graph charts .CanvasJS supports 30 different types of Charts and renders across devices including iPhone, iPad, Android, Mac & PCs.

Laravel is a PHP Framework for website development. We can make a good website using laravel.

Our Project will look like this

You can download code from here :  Laravel Graph

Make a controller ( ChartController.php ) and write this code.

// Code Starts here 


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

use Illuminate\Routing\Controller as BaseController;

class ChartController extends BaseController
   public function viewChart()
       $post = DB::table('chart_data')->paginate(5);

       return view("chart");
       //return view("blog", compact("posts"));
   public function createStudentData(Request $request)
        return view('addChart');

   public function storeStudentData(Request $request)
        $data = array(
          'student_name'=> $request->post('name'),
          'student_subject' =>$request->post('subject'),
          'student_marks'=> $request->post('marks')

        $post = DB::table('chart_data')->insert($data);
        Alert::success('Success', 'Data Berhasil Ditambahkan');
        return redirect('chart'); //->with('success', 'The Data Inserted');

   public function deleteStudentData(Request $request)
        $deleteID = $request->post('deleteID');
        $post = DB::table('chart_data')->where('id', '=', $deleteID)->delete();
            return redirect('chart')->with('success', 'The Data Delete');
            return redirect('chart')->with('error', 'Cant not Delete');

   public function showStatics()
      $post = DB::table('chart_data')->get('*')->toArray();
      foreach($post as $row)
          $data[] = array
      return view('statics',['data' => $data]);

// Code neds here

Now we will see the view file

// Code starts here 


<section class="content" style="margin-left:20px;margin-right:20px">
   <div class="product-index" align="right">
      <div align="right">
        <h4 class="float-right"><a href="{{url('/chartView/create')}}" class="btn btn-primary">Add Data</a></h4>
        <h2 class="text-center">Student Details</h2>
         <div class="box box-success">
            <div class="alert alert-success">
                {{ session()->get('success') }}
            <div class="box box-solid table-responsive">
               <div class="box-body">
                  <div id="p0" data-pjax-container="" data-pjax-push-state="" data-pjax-timeout="1000">
                     <div id="w4" class="grid-view">
                        <table class="table table-striped table-bordered">
                                 <th>Student Name</th>
                                 <th>Student Subject</th>
                                 <th>Student Marks</th>
                                 <th class="action-column">Action Take</th>
                           <tbody id="table_data">
                             {{$i = 1}}
                            @foreach($post as $row) 
                                 <td>{{ $i++}}</td>
                                 <td>{{ $row->student_name }}</td>
                                 <td>{{ $row->student_subject }}</td>
                                 <td>{{ $row->student_marks }}</td>
                                    <form action="{{ route('student-delete', $row->id) }}" method="GET">
                                     <input type="hidden" name="deleteID" id="branch" value="{{ $row->id }}">
                                      <button type="submit" class="btn btn-danger">Delete</button>
                                      <button type="submit" class="btn btn-primary">Edit</button>
           <div class="alert alert-danger">
             {{ session()->get('error') }}
   {{ $post->links() }}   {{--Pagination code  --}}


// Code ends here

I have only uploaded View and controller you can use my project for a big project.

Leave a Reply

Your email address will not be published. Required fields are marked *