title: Passing data from a controller to ChartJS - Laravel
body: <p>I would like to pass data from my laravel controller to chartjs javascript file.  But at the moment, I can only get the data to home.blade and not the javascript file.
  below is my controller:</p>
  
  <pre><code> public function index()
  {
  
  
      $visits = Visitdetail::all();
      $countVisit = $visits-&gt;count();
  
  
      $totalSchools = School::all()-&gt;count();
      $totalProjects = Project::all()-&gt;count();
  
      $recentVisits = Visitdetail::all()-&gt;sortByDesc('created_at')-&gt;take(5);
  
  
      $visitsYear = Visit::where('created_at','&gt;=', Carbon::now()-&gt;startOfYear())-&gt;take(5)-&gt;get();
  
  
  
  
  
      return view('home',['countVisit'=&gt;$countVisit,'recentVisits'=&gt;$recentVisits, 'totalSchools'=&gt;$totalSchools,'totalProjects'=&gt;$totalProjects,
          'yearVisits'=&gt;$visitsYear]);
  }
  </code></pre>
  
  <p>On home.blade, I just have a canvas and the below is the code:</p>
  
  <pre><code>&lt;div class="box-body"&gt;                    
    &lt;div class="chart"&gt;
       &lt;canvas id="barChart" style="height:227px"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On the chartJS file, I have the following code (Filename: dashboard.js), located in the public/js/dashboard.js directory: </p>
  
  <pre><code>// Get context with jQuery - using jQuery's .get() method.
      var barChartCanvas = $('#barChart').get(0).getContext('2d');
      // This will get the first returned node in the jQuery collection.
      var barChart            = new Chart(barChartCanvas);
  
      var barChartData = {
        labels  : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [
          {
            label               : 'Electronics',
            fillColor           : 'rgba(38,198,218,1)',
            strokeColor         : 'rgba(38,198,218,0)',
            pointColor          : '#26c6da',
            pointStrokeColor    : 'rgba(38,198,218,0)',
            pointHighlightFill  : '#fff',
            pointHighlightStroke: 'rgba(38,198,218,1)',
            data                : [5, 4, 3, 7, 5, 10, 3]
          },
          {
            label               : 'Digital Goods',
            fillColor           : 'rgba(30,136,229,1)',
            strokeColor         : 'rgba(30,136,229,0)',
            pointColor          : 'rgba(30,136,229,0)',
            pointStrokeColor    : '#1e88e5',
            pointHighlightFill  : '#fff',
            pointHighlightStroke: 'rgba(30,136,229,1)',
            data                : [3, 2, 9, 5, 4, 6, 4]
          }
        ]
      };
  </code></pre>
  
  <p>I tried to set the values of the  the dataset with dynamic blade variable, where on data, I had:</p>
  
  <pre><code>data                : [{{$countVisits}}, {{recentVisits}}]
  </code></pre>
  
  <p>However, this didn't work. Any assistance that could point me to the right direction will be appreciated.</p>