How to pull data for chartjs from a database in Angular Laravel?

Question

I am building a dashboard app with charts. I have a couple users and want to pull different data for each user from a database to form their own chart in their dashboard.

This is my current setup

In HTML

<div class="chart">
  <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="false" chart-click="onClick" style="height: 180px;">
  </canvas>
</div>

In Javascript file

$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
$scope.data = [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 55, 40]
$scope.onClick = function () {}

How can I change this to instead pull data out of my users table in my database, or perhaps a separate table if it creates more organization.

UPDATE:

I tried to place this code {{vm.userData.numbers}} in $scope.data, where numbers is a column in my user table containing all the values needed to make the graph. This unfortunately is not working for me.

Answer 1

If your users table having large amount of records, you can setup these chartJS related data into separate table for it with reference of users table primary key. This is simple understanding.

Regarding fetch ChartJS related data from DB table, you need to fetch that data from particular table, you can use laravel eloquent OR Fluent interface .

For the example code, take ride this blog

Hope this informative answer will help you!