title: Laravel 5.4 ChartJs - Use Collections/Arrays as Labels and Data
body: <p>I wanted the chart's labels and data to be dynamic. </p>
  
  <p>To get things started, I have a function called <code>search</code> in my <code>Controller</code> and it has a query like this:</p>
  
  <pre><code>$total_cost = DB::raw('SUM(qty * cost) as total_cost');
  $total_grossrev = DB::raw('(SUM(price * qty)) as total_grossrev');
  $total_profit = DB::raw('(SUM(price * qty)) - (SUM(qty * cost)) as total_profit');
  
  $period = DB::raw('date(created_at) as period');
  $format = 'j F Y h:i A';
  
  $salesanalysis = DB::table('orders')
      -&gt;whereDate('created_at','&gt;=', $request-&gt;datefrom)
      -&gt;whereDate('created_at', '&lt;=', $request-&gt;dateto)
      -&gt;where('status', 'served')
      -&gt;select($total_cost, $total_grossrev, $total_profit, $period, 'created_at')
      -&gt;groupBy('period')
      -&gt;get();
  </code></pre>
  
  <p>And in my script to have the chart, this is my structure:</p>
  
  <pre><code>&lt;script src="{{ asset('js/Chart.min.js') }}"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      let salesAnalysisChart = document.getElementById('salesAnalysisChart').getContext('2d');
  
      let barChart = new Chart(salesAnalysisChart, {
          responsive: true,
          type:'bar',
          data:{
              labels:[ //period of salesanalysis ],
              datasets:[{
                  label:'Sales',
                  data:[
                      // total_profit of salesanalysis
                  ],
                  backgroundColor: 'rgba(73, 187, 235, 0.7)',
                  hoverBorderWidth: 1,
                  hoverBorderColor: '#000'
              }]
          },
          options:{
              maintainAspectRatio: false,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero: true,
                      }
                  }]
              },
  
              legend:{
                  position:'bottom',
                  display:false,
              },
  
              layout:{
                  padding: 0,
              }
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Also, the <code>period</code> of salesanalysis is gonna be parsed by <code>Carbon</code> with the use of <code>$format</code>. So I thought of using this syntax:</p>
  
  <pre><code>{{\Carbon\Carbon::parse($collection-&gt;period)-&gt;format($format)}}
  </code></pre>
  
  <p>The bottomline is, how am I gonna use the <code>collection</code> for the <code>label</code> and <code>data</code> of ChartJs.</p>