How to pass data in Laravel with Chart.js

Question

I want to display total of men and woman from learnings table in chart using Chartjs in Laravel.

My controller

public function index()
{
    $men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
    $women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
    $learning = $men_learning + $women_learning  ;
    return view('home', compact('learning'));
}

My script in blade view.

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['total'],
            datasets: [{
                label: '# of Votes',
                data: [12],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',

                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

How can I propagate loaded statistic from my script to the chart?

As I can see there is the problem with data propagation from his php script to the view. The question was changed to make more focus. — MartenCatcher
– MartenCatcher, Commented Feb 9, 2020 at 12:39

Md Abdul Awal · Accepted Answer · 2020-02-09 11:08:12Z

    public function index()
    {
        $men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
        $women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
        return view('home', compact('men_learning', 'women_learning'));
    }


   <script type="text/javascript">
  $(function(){
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Men', 'Women'],
        datasets: [{
          label: 'Men',
          data: [{!!$men_learning!!}],
          borderWidth: 2,
          backgroundColor: 'rgba(40,167,69,1)',
          borderWidth: 0,
          borderColor: 'transparent',
          pointBorderWidth: 0 ,
          pointRadius: 3.5,
          pointBackgroundColor: 'transparent',
          pointHoverBackgroundColor: 'rgba(254,86,83,.8)',
        },
        {
          label: 'Women',
          data: [{!!$women_learning!!}],
          borderWidth: 2,
          backgroundColor: 'rgba(220,53,69,.8)',
          borderWidth: 0,
          borderColor: 'transparent',
          pointBorderWidth: 0,
          pointRadius: 3.5,
          pointBackgroundColor: 'transparent',
          pointHoverBackgroundColor: 'rgba(63,82,227,.8)',
        }]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            gridLines: {
              display: true,
              drawBorder: false,
              color: '#f2f2f2',
            },
            ticks: {
              beginAtZero: true,
              stepSize: 100,
              callback: function(value, index, values) {
                return value;
              }
            }
          }],
          xAxes: [{
            gridLines: {
              display: false,
              tickMarkLength: 15,
            }
          }]
        },
      }
    });
});
</script>

Collectives™ on Stack Overflow

How to pass data in Laravel with Chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related