1

Tengo un archivo Js cuya función es crear un gráfico, pero me gustaría que los datos que use ese gráfico sean algunos que busco en unas consultas de eloquent que luego paso a mi vista en blade. Hay alguna forma de hacer esto?

Este es mi código en mi archivo Js, los valores que dicen data son los que vendrían de la vista:

var salesChart  = new Chart($salesChart, {
type   : 'bar',
data   : {
  labels  : ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
  datasets: [
    {
      backgroundColor: '#007bff',
      borderColor    : '#007bff',
      data           : [1000, 2000, 3000, 2500, 2700, 2500, 7000]
    },
    {
      backgroundColor: '#ced4da',
      borderColor    : '#ced4da',
      data           : [700, 1700, 2700, 2000, 1800, 1500, 2000]
    }
  ]
}

Los datos en mi vista blade se presentan con un foreach de esta forma:

@foreach ($montos as $monto)
 {{ $monto }}
@endforeach

2 respuestas 2

0

Lo que puedes hacer es crear el array como lo hace ahora mismo en tu controlador pero hacerle un json_encode() y mandar como una cadena json a un <input class="array" type="hidden" id="data-chart" name="data" value="{{ $data }}">:

public function tuFuncion()
{
    $data = json_encode([
        'data' => ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        "datasets" => [
            'backgroundColor' => '#007bff',
            'borderColor' => '#007bff',
            'data' => [1000, 2000, 3000, 2500, 2700, 2500, 7000],
            [
                'backgroundColor' => '#ced4da',
                'borderColor' => '#ced4da',
                'data' => [700, 1700, 2700, 2000, 1800, 1500, 2000]
            ],
        ]
    ]);

    return view('view', compact('data'));
}

Y en tu archivo JS buscas el input al que le asignamos el valor:

var data = JSON.parse($('#data-chart').val());

Y empiezas a acceder a los datos, los vas poniendo como los quieres en tu gráfico y listo

0
<script>

const MONTOS = {!! json_encode($montos) !!};

var salesChart  = new Chart($salesChart, {
type   : 'bar',
data   : {
  labels  : ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
  datasets: [
    {
      backgroundColor: '#007bff',
      borderColor    : '#007bff',
      data           : MONTOS
    },
    {
      backgroundColor: '#ced4da',
      borderColor    : '#ced4da',
      data           : MONTOS
    }
  ]
}
</script>
1
  • Explica brevemente el funcionamiento del código: ten en cuenta que otros verán tu respuesta y puede que no comprendan lo que hace. Stack Overflow en español no es un repositorio de código: lee Cómo responder.
    – padaleiana
    Commented el 19 dic. 2021 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.