¿Como generar graficas dinamicas con chart js?

publicado por: Anonymous

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

ejemplo

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.

solución

Bueno amigo espero te sirva estos fragmentos de codigos como guia para hacer tu grafica, remplaza de acuerdo con lo que necesitas hacer.

Controlador

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class HomeController extends Controller
{
    public function chartjs()
    {
        $viewer = View::select(DB::raw("SUM(numberofview) as count"))
            ->orderBy("created_at")
            ->groupBy(DB::raw("year(created_at)"))
            ->get()->toArray();
        $viewer = array_column($viewer, 'count');

        $click = Click::select(DB::raw("SUM(numberofclick) as count"))
            ->orderBy("created_at")
            ->groupBy(DB::raw("year(created_at)"))
            ->get()->toArray();
        $click = array_column($click, 'count');


        return view('chartjs')
            ->with('viewer', json_encode($viewer, JSON_NUMERIC_CHECK))
            ->with('click', json_encode($click, JSON_NUMERIC_CHECK));
    }
}

Vista

@extends('layouts.app')


@section('content')
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/dist/Chart.bundle.js"></script>
<script>
    var year = ['2013','2014','2015', '2016'];
    var data_click = <?php echo $click; ?>;
    var data_viewer = <?php echo $viewer; ?>;


    var barChartData = {
        labels: year,
        datasets: [{
            label: 'Click',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: data_click
        }, {
            label: 'View',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: data_viewer
        }]
    };


    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 255, 0)',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: 'Yearly Website Visitor'
                }
            }
        });


    };
</script>


<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    <canvas id="canvas" height="280" width="600"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

Podrias hacer una consulta mas a base de datos para los label pero en esta asi.

Resultado.introducir la descripción de la imagen aquí

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *