Convert Table to Chart

Greetings,

I have a Table that has Cluster 1 - Cluster 5.

Each Cluster has the following records: Budgeted and Allocated.

// Current table (below)

Cluster              Budgeted ( { a.budgeted } )    Allocated ( { a.allocated } )
Cluster 1                 1                                                     0
Cluster 2               4                                                      0
Cluster 3               5                                                      3
Cluster 4               0                                                     0
Cluster 5               0                                                     0

I cannot see how to place the "loop" - {% for a in allocations %} within the dataset (the chart example which is hard-coded).

I want to replace >> data: [12, 19]  in //Bootstrap.js  with data: [ {{ a.budgeted }}, {{ a.allocated }}] from //Current table

Any assistance is appreciated.

Code for Table above:

// Current table
<div class="panel panel-primary">
<div class="panel-heading">Budgeted FTE and Allocated FTE </div>
<div class="panel body">
{% if allocations %}
<table>
<thead>
<th>Cluster</th>
<th class="midc">Budgeted FTE</th>
<th>Allocated FTE</th>
</thead>
{% for a in allocations %}
<tr>
<td>Cluster {{ a.id }}</td>
<td class="midc">{{ a.budgeted }}</td>
<td>{{ a.allocated }}</td>
</tr>
{% endfor %}
</table>
{% endif %}
</div>
</div>

// Bootstrap.js

<canvas id="barChart"></canvas>

//bar chart
var ctxB = document.getElementById("barChart").getContext('2d');
var myBarChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: ["Budgeted FTE", "Allocated FTE" ],
datasets: [{
label: '# Budgeted FTE ',
data: [12, 19],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});