Laravel & livewire chart not displayed well

i am developing an application with laravel 8 and livewire. In a blade view of my application I need to insert a graph, and the graph is inserted inside the template I have chosen. In the template I have an example file that indicates how to populate the graph and called morris-init.js, then in vendor/morris I have the file morris.min.js. These two javascripts are called from my script and css configuration file dz.php. In my blade view, I have two livewire components, and in the second component I have a table (which is shown correctly) and the graph with the related script. My problem is that the graph is shown correctly, but not with the data passed by my script, it uses the data from the morris-init.js file. By deleting the morris-init.js file from the config file the graph is not being rendered in my livewire component. On the console I have noticed these errors (screenshot attached), but I cannot understand what the problem may be. Anyone have any suggestions or ideas on what the problem may be? Thank you all!

My code:

  • dz.php
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Application Name
    |--------------------------------------------------------------------------
    |
    | This value is the name of your application. This value is used when the
    | framework needs to place the application's name in a notification or
    | any other location as required by the application or its packages.
    |
    */

    'name' => env('APP_NAME', 'C.U.O.RE'),


    'public' => [
        'favicon' => 'media/img/logo/favicon.ico',
        'logo' => 'images/cuore_logo/cuore-icon.png',
        'logo_text' => 'images/cuore_logo/Cuore - naming.png',
        'fonts' => [
            'google' => [
                'families' => [
                    'Poppins:300,400,500,600,700'
                ]
            ]
        ],
        'global' => [
            'css' => [
                'css/style.css',
            ],
            'js' => [
                'vendor/global/global.min.js',
            ],
        ],
        'pagelevel' => [
            'css' => [
                //start my custom css
                'dashboard_4_with_tables' =>[
                    'vendor/bootstrap-select/dist/css/bootstrap-select.min.css',
                    'vendor/jqvmap/css/jqvmap.min.css',
                    'vendor/chartist/css/chartist.min.css',
                    'https://cdn.lineicons.com/2.0/LineIcons.css',
                    'vendor/datatables/css/jquery.dataTables.min.css',
                    
                ],
                //end my custom css
                
            ],
            'js' => [
                // start my custom js
                'dashboard_4_with_tables' => [
                    'vendor/bootstrap-select/dist/js/bootstrap-select.min.js',
                    'vendor/chart.js/Chart.bundle.min.js',
                    'vendor/apexchart/apexchart.js',
                    'vendor/peity/jquery.peity.min.js',
                    'vendor/chartist/js/chartist.min.js',
                    'vendor/svganimation/vivus.min.js',
                    'vendor/svganimation/svg.animation.js',
                    'js/custom.js',
                    'js/dashboard/dashboard-4.js',
                    'vendor/datatables/js/jquery.dataTables.min.js',
                    'js/plugins-init/datatables.init.js',
                    'js/deznav-init.js',
                    'vendor/bootstrap-select/dist/js/bootstrap-select.min.js',
                    'vendor/chart.js/Chart.bundle.min.js',
                    'js/plugins-init/chartjs-init.js',
                    'vendor/svganimation/vivus.min.js',
                    'vendor/svganimation/svg.animation.js',
                    'js/custom.js',
                    'js/deznav-init.js',
                    'vendor/raphael/raphael.min.js',
                    'vendor/morris/morris.min.js',
                    'js/plugins-init/morris-init.js',
                ],

                // end my custom js
];

  • my blade:
{{-- Extends layout --}}
@extends('layout.layout2')

{{-- Content --}}
@section('content')
<!-- row -->
<div class="container-fluid">
    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
          <div class="welcome-text">
            <h4>Report dei residui</h4>
            <p class="mb-0">Situazione dei residui per soggetto e per fasce di credito</p>
          </div>
        </div>
    </div>
    <!-- componente header-filter per raggruppare i residui per codice fiscale -->
    <livewire:report-residui-header-filter />
    <!-- importo il componente livewire per mostrare i residui -->
    <livewire:table-report-residui />
    <!-- importo il componente table-residui-fasce, con i residui suddivisi per fasce -->
    <livewire:table-report-residui-fasce />
    <!-- TODO -->
    <button class="btn btn-primary" id="export">Esporta Ricerca</button>
</div>
@endsection
  • my component with table & chart:
<div class="row">
    <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Report residui per fasce</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-responsive-md" style="min-width: 845px">
                <thead>
                  <tr>
                    <th>Fascia</th>
                    <th># Posizioni</th>
                    <th>Residuo &euro;</th>
                    <th>% Posizioni</th>
                    <th>% Residuo</th>
                    <th>Valore Medio &euro;</th>
                  </tr>
                </thead>
                <tbody>
                  @if($fascia1[0]['total'] !== 0)
                    <tr>
                      <td><span class="badge light badge-lg badge-info"> < 100 &euro;</span></td>
                      <td>{{ $fascia1[0]['total'] }}</td>
                      <td>{{ $fascia1[0]['residuo'] }} &euro;</td>
                      <td>{{ round((100*$fascia1[0]['total'])/$tot_posizioni, 2) }} % </td>
                      <td>{{ round((100*$fascia1[0]['residuo'])/$tot_residuo , 2) }} %</td>
                      <td>@if(!empty($fascia1[0]['total'])) {{ round($fascia1[0]['residuo']/$fascia1[0]['total'], 2) }} @else  0 @endif &euro;</td>
                    </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-info"> < 100 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia2[0]['total'] !== 0)
                    <tr>
                      <td><span class="badge light badge-lg badge-success">100 - 1000 &euro;</span></td>
                      <td>{{ $fascia2[0]['total'] }}</td>
                      <td>{{ $fascia2[0]['residuo'] }} &euro;</td>
                      <td>{{ round((100*$fascia2[0]['total'])/$tot_posizioni, 2) }} % </td>
                      <td>{{ round((100*$fascia2[0]['residuo'])/$tot_residuo , 2) }} %</td>
                      <td>@if(!empty($fascia2[0]['total'])) {{ round($fascia2[0]['residuo']/$fascia2[0]['total'], 2) }} @else  0 @endif &euro;</td>
                    </tr>
                  @else
                    <tr>
                      <td><span class="badge light badge-lg badge-success"> 100 - 1000 &euro;</span></td>
                      <td>0</td>
                      <td>0 &euro;</td>
                      <td>0 % </td>
                      <td>0 %</td>
                      <td>0 &euro;</td>
                    </tr>
                  @endif
                  @if($fascia3[0]['total'] !== 0) 
                  <tr>
                    <td><span class="badge light badge-lg badge-light">1000 - 5000 &euro;</span></td>
                    <td>{{ $fascia3[0]['total'] }}</td>
                    <td>{{ $fascia3[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia3[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia3[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia3[0]['total'])) {{ round($fascia3[0]['residuo']/$fascia3[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-light"> 1000 - 5000 &euro;</span></td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia4[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-dark">5000 - 10000 &euro;</span></td>
                    <td>{{ $fascia4[0]['total'] }}</td>
                    <td>{{ $fascia4[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia4[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia4[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia4[0]['total'])) {{ round($fascia4[0]['residuo']/$fascia4[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-dark"> 5000 - 10000 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia5[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-warning">10000 - 20000 &euro;</span></td>
                    <td>{{ $fascia5[0]['total'] }}</td>
                    <td>{{ $fascia5[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia5[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia5[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia5[0]['total'])) {{ round($fascia5[0]['residuo']/$fascia5[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-warning"> 10000 - 20000 &euro; </span></td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia6[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-danger"> > 2000 &euro;</span></td>
                    <td>{{ $fascia6[0]['total'] }}</td>
                    <td>{{ $fascia6[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia6[0]['total'])/$tot_posizioni, 2)}} % </td>
                    <td>{{ round((100*$fascia6[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia6[0]['total'])) {{ round($fascia6[0]['residuo']/$fascia6[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-danger"> > 20000 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                </tbody>
                <tfoot>
                  <th></th>
                  <th>Tot posizioni: {{ $tot_posizioni }}</th>
                  <th>Tot residuo: {{ $tot_residuo }} &euro;</th>
                  <th>100%</th>
                  <th>100%</th>
                  <th>Tot medio: @if($tot_posizioni != 0) {{ round($tot_residuo/$tot_posizioni, 2) }} @else 0 @endif &euro;</th>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
    </div>
    <!-- grafichiamo i risultati stampati in tabella -->
    <div class="col-xl-6 col-lg-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Residui per fasce</h4>
        </div>
        <div class="card-body">
          <div id="morris_donught" class="morris_chart_height">
            <div id="morris">
                
            </div>
          </div>
        </div>
      </div>
    </div>
    
</div>
<script type="text/javascript">
    console.log('Sono entrato nel codice js');
    //Codice per popolare il grafico
        
        var setChartWidth = function(){
            if(screenWidth <= 768)
            {
                var chartBlockWidth = 0;
                chartBlockWidth = (screenWidth < 300 )?screenWidth:300;
                jQuery('.morris_chart_height').css('min-width',chartBlockWidth - 31);
            }
        }

    let Data= [
        {label: "Fascia < 100 &euro;", value: 12},
        {label: "Fascia 100 - 1000 &euro;", value: 30},
        {label: "Fascia 1000 - 5000 &euro;", value: 20},
        {label: "Fascia 5000 - 10000 &euro;", value: 20},
        {label: "Fascia 10000 - 20000 &euro;", value: 20},
        {label: "Fascia > 20000 $euro;", value: 20},
  ];
    let total = 62;
  var browsersChart = Morris.Donut({
    element: 'morris',
    data: Data,
    formatter: function (value, data) { 
      return Math.floor(value/total*100) + '%'; 
    }
  }),
  resize = true,
                redraw = true,
                colors = ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'];

</script>
  • my console screen: enter image description here

Answer

There are a couple of errors in your code:

  • The following lines should go inside your browserChart object
resize = true,
redraw = true,
colors = ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'];

like this

var browsersChart = Morris.Donut({
            element: 'morris', 
            data: Data,
            formatter: function(value, data) {
                return Math.floor(value / total * 100) + '%';
            },
            resize: true,
            redraw: true,
            colors: ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93']
        });
  • your element is 'morris' but in your code you have a div called "morris_donught" with a nested 'morris' inside, simply delete the nested one and call the outer one morris

  • Your total is hard coded to 62 but the sum of your elements is 122, the chart will be displayed incorrectly

  • You have 6 data labels to display but you only have defined 3 colors