estoy tratando de manipular chart.js para reflejar datos dinamicamente ya sea con consultas eloquent desde mi controlador o cualquier manera de utilizarlas dinamicamente. la mayoria de ejemplos que he visto han sido estaticos, sin datos directos de la DB. estoy utilizando grafico RADAR aqui mostrare algunos ejemplos
como podemos ver en la imagen se nota que dentro del grafico no se reflejan los mismos datos que estan debajo, en el grafico aparecen 5 pero declarados manualmente por mi, y los datos de abajo son traidos de mi DB. acontinuacion mostrare mi codigo para mas informacion:
<script>
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: [
"1.Homotopía","2.Método científico","3.Teoría de juegos","4.Magnetismo", "5. Construcción de algoritmos"
],
datasets: [{
label: "Clasificación",
backgroundColor: "rgba(0,0,255,0.7)",
data: [1,3,2,4,2]
}]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
responsive: true,
data: marksData
});
</script>
ahora mostrare el codigo del modal, que se activa con un id respectivo de un inicio de sesion. quiere decir que cada vez que un usuario inicia sesion le aparecera su respectivo grafico con unos registros guardados.
<div class="modal fade bd-example-moda" id="ver{{$datosPersonales->first()->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" id="modal">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Mapa de conocimientos <i class="fas fa-brain"></i></h3>
</div>
<div class="modal-body">
<canvas id="marksChart" width="2800" height="900"></canvas>
<br>
<div style="text-align:right;">
<p>1. Aprendiz</p>
<p>2. Conocedor</p>
<p>3. Experto</p>
<p>4.Maestro</p>
<i class="far fa-user"></i>
<strong title="{{$datosPersonales->cargo}}">{{$datosPersonales->nombres. " " .$datosPersonales->apellidos}}</strong><br>
<p>{{$datosPersonales->gerencia}}</p>
</div>
<div class="row" style="text-align:center; display: none;">
<div class="col-xs-12">
AQUÍ IRÁ LA IMAGEN CAPTURADA
</div>
<div class="col-xs-12">
<img src="" id="preview">
</div>
<div class="col-xs-12">
<a class="btn btn-success" href="" id="blank">Descargar</a>
</div>
</div>
<hr>
<div style="text-align:left;">
@foreach($datosPersonales->first()->Resultados() as $resultado)
{{$loop->iteration}}-
{{$resultado->SubDisciplina()->first()->subdisciplina}}.
@endforeach
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button id="descargar" class="btn btn-primary">Descargar</button>
</div>
</div>
</div>
</div>
</div>
en el footer de mi modal hago un recorrido normal de los datos. lo mismo que esta en el footer debe aparecer en el grafico. mi pregunta es como reflejo esos datos en el grafico de manera dinamica y no estatica.