Categories

Sunday, September 26, 2021
therichposts@gmail.com
ChartjsLaravel

Laravel – Chartjs with Dynamic Data Working Example

Laravel - Chartjs with Dynamic Data Working Example

Hello to all, welcome to therichpost.com. In this post, I will do, Laravel – Chartjs with Dynamic Data Working Example.

In this post, I will show laravel controller data to laravel blade template file with the help of laravel web routes.

 

Laravel - Chartjs with Dynamic Data Working Example

 

Here is the working code steps, you need to follow:

 

1. Very first, here is the code for laravel controller file HomeController.php with custom data:

public function Chartjs(){
  $month = array('Jan', 'Feb', 'Mar', 'Apr', 'May');
  $data  = array(1, 2, 3, 4, 5);
  return view('chartjs',['Months' => $month, 'Data' => $data]);
}

2. Here is the code for laravel routes/web.php file:

Route::get("/chartjs", "HomeController@Chartjs");

3. Finally, here is the code for laravel blade template file chartjs.blade.php:

I made laravel controller array data into json format for chartjs data:

<!doctype html>
<html>

  <head>
  <title>Bar Chart</title>
  <script src="http://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
  <script src="http://www.chartjs.org/samples/latest/utils.js"></script>
  <style>
  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  </style>
  </head>

  <body>
    <div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
    </div>
    <script>

    var chartdata = {
    type: 'bar',
    data: {
    labels: <?php echo json_encode($Months); ?>,
    // labels: month,
    datasets: [
    {
    label: 'this year',
    backgroundColor: '#26B99A',
    borderWidth: 1,
    data: <?php echo json_encode($Data); ?>
    }
    ]
    },
    options: {
    scales: {
    yAxes: [{
    ticks: {
    beginAtZero:true
    }
    }]
    }
    }
    }


    var ctx = document.getElementById('canvas').getContext('2d');
    new Chart(ctx, chartdata);
    </script>
  </body>

</html>

In the end run the laravel project:

http://localhost/laravelproject/public/chartjs

This is code. If you have any query related to this post, then do comment below or ask question. This will also work in laravel 8. Laravel 8 Chartjs with Dynamic Data Working Example

Thank you,

devil,

TheRichPost

 

Laravel Chartjs

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

7 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.