javascriptphplaravel-8laravel-livewire
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 €</th>
<th>% Posizioni</th>
<th>% Residuo</th>
<th>Valore Medio €</th>
</tr>
</thead>
<tbody>
@if($fascia1[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-info"> < 100 €</span></td>
<td>{{ $fascia1[0]['total'] }}</td>
<td>{{ $fascia1[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-info"> < 100 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia2[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-success">100 - 1000 €</span></td>
<td>{{ $fascia2[0]['total'] }}</td>
<td>{{ $fascia2[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-success"> 100 - 1000 €</span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia3[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-light">1000 - 5000 €</span></td>
<td>{{ $fascia3[0]['total'] }}</td>
<td>{{ $fascia3[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-light"> 1000 - 5000 €</span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia4[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-dark">5000 - 10000 €</span></td>
<td>{{ $fascia4[0]['total'] }}</td>
<td>{{ $fascia4[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-dark"> 5000 - 10000 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia5[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-warning">10000 - 20000 €</span></td>
<td>{{ $fascia5[0]['total'] }}</td>
<td>{{ $fascia5[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-warning"> 10000 - 20000 € </span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia6[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-danger"> > 2000 €</span></td>
<td>{{ $fascia6[0]['total'] }}</td>
<td>{{ $fascia6[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-danger"> > 20000 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
</tbody>
<tfoot>
<th></th>
<th>Tot posizioni: {{ $tot_posizioni }}</th>
<th>Tot residuo: {{ $tot_residuo }} €</th>
<th>100%</th>
<th>100%</th>
<th>Tot medio: @if($tot_posizioni != 0) {{ round($tot_residuo/$tot_posizioni, 2) }} @else 0 @endif €</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 €", value: 12},
{label: "Fascia 100 - 1000 €", value: 30},
{label: "Fascia 1000 - 5000 €", value: 20},
{label: "Fascia 5000 - 10000 €", value: 20},
{label: "Fascia 10000 - 20000 €", 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:
Solution
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
elementis'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 onemorrisYour 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
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices