Laravel: how to show data to create chart in JavaScript file? - php

Question

I want to show on the chart the number of new students registered and the number of online students per month. I got the data but I don't know how to transfer data into js file to draw that chart.
Here is js file.
var chart = document.getElementById('products-sales');
let newStudent = $("#monthNewStudent").val();
let onlStudent = $("#monthOnline").val();
var newStudentArr = newStudent.split(",");
var onlStudentArr = onlStudent.split(",");
let arrNew = JSON.parse(newStudentArr);
let arrOnl = JSON.parse(onlStudentArr);
arrData = [];
for (var i in arrNew) {
arrData.push({
month:i,
newStudent: arrNew[i],
onlStudent: arrOnl[i]
});
}
var months = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
Morris.Area({
element: 'products-sales',
data: [{
month: '2017-01',
newstudent: 0,
online: 0,
}],
xkey: 'month',
ykeys: ['newstudent', 'online'],
labels: ['Học viên mới', 'Học viên online'],
xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
var month = months[x.getMonth()];
return month;
},
dateFormat: function(x) {
var month = months[new Date(x).getMonth()];
return month;
},
behaveLikeLine: true,
ymax: 300,
resize: true,
pointSize: 0,
pointStrokeColors:['#00B5B8', '#FA8E57', '#F25E75'],
smooth: true,
gridLineColor: '#E4E7ED',
numLines: 6,
gridtextSize: 14,
lineWidth: 0,
fillOpacity: 0.9,
hideHover: 'auto',
lineColors: ['#00B5B8', '#FA8E57', '#F25E75'],
data:arrData
});
My controller to count the number of new students registered and the number of online students per month
class DashboardController extends AdminBaseController
{
public function index ()
{
$month = 1;
$studNew = [];
$studOnline = [];
$studActive = [];
for($i = $month; $i < 13; $i++) {
//count new students
$newStudents = Member::where('member_type_id',1)->whereMonth('created_at', $i)->get();
$studNew[$i] = $newStudents->count();
//students online
$onlStudents = Member::where('member_type_id',1)->whereMonth('updated_at', $i)->get();
$studOnline[$i] = $onlStudents->count();
// count card active
$act = Order::where('status', "active")->whereMonth('updated_at', $i)->get();
$studActive[$i] = $act->count();
}
$monthNewStudent = json_encode($studNew);
$monthOnline = json_encode($studOnline);
$monthActive = json_encode($studActive);
return view('admin.dashboard.index', compact('monthNewStudent',
'monthOnline',
'monthActive'));
}
}

Answer 1

You can set values in a variable and then can pass that variable to view. At view, you can use that variable like below:
{!! $yourvariable !!}
So in your case, it will be like this:
data: {!! $yourvariable !!},
Hope it helps you!!