@extends('adminlte::page')


@section('title', 'Dashboard')


@section('content_header')



    <div class="row">
        <div class="col-md-1"> <button class="btn btn-primary" onclick="history.back()"><i class="fas fa-arrow-left"></i>
                Indietro</button></div>
        <div class="col-md-8 text-center">
            <h1>Analisi Half Body </h1>
        </div>
        <div class="col-md-2 d-flex">
            <form action="{{ route('HalfBody.destroy', $halfbody->id) }}" class="mx-2" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">cancella</button>

            </form>
            <a class="btn btn-primary" href="{{ route('HalfBody.EsportaPdf', $halfbody->id) }}" target="_blank">Esporta pdf</a>
        </div>
    </div>


@stop


@section('content')
    <div class="row mb-4">
        <div class="col-md-4">
            <canvas id="myChart4" data-rea="{{ $halfbody->ReattanzaSx }}" data-res="{{ $halfbody->ResistenzaSx }}"
                style="position: relative; height:40vh; width:40vw"></canvas>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Sx</p> <canvas id="myChart1"></canvas>
            </div>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Dx</p> <canvas id="myChart1_d"></canvas>
            </div>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Sx</p> <canvas id="myChart2"></canvas>
            </div>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Dx</p> <canvas id="myChart2d"></canvas>
            </div>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Sx</p> <canvas id="myChart3"></canvas>
            </div>
        </div>
        <div class="col-md-1">
            <div style="height: 530px">
                <p class="text-center">Dx</p> <canvas id="myChart3d"></canvas>
            </div>
        </div>
    </div>


    <div class="row">

        <div class="col-md-4"> </div>
        <div class="col-md-4"> </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-header">
                    <h3 class="text-center"> Analisi: {{ $halfbody->Cliente->Nome }} - Genere:
                        {{ $halfbody->Cliente->Sesso }} - Laf: {{ $halfbody->LAF }} </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-4">
                                    <p><strong>Resistenza Sx:</strong></p>
                                </div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ $halfbody->ResistenzaSx }}</p>
                                    </strong></div>
                                <div class="col-md-4">
                                    <p><strong>Reattanza Sx:</strong></p>
                                </div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ $halfbody->ReattanzaSx }}</p>
                                    </strong></div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <p><strong>Resistenza Dx:</strong></p>
                                </div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ $halfbody->ResistenzaDx }}</p>
                                    </strong></div>
                                <div class="col-md-4">
                                    <p><strong>Reattanza Dx:</strong></p>
                                </div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ $halfbody->ReattanzaDx }}</p>
                                    </strong></div>
                            </div>
                            <div class="row">
                                <div class="col-md-4" data-toggle="modal" data-target="#">
                                    <p><strong> PhA Sx: </strong><span><i
                                                class="text-primary fas fa-info-circle"></i></span></p>
                                </div>
                                <div class="col-md-2 ">
                                    <p><strong id="PA">{{ round($halfbody->PASx, 2) }}</strong></p>
                                </div>
                                <div class="col-md-4 modal-PA" data-toggle="modal">
                                    <p><strong> PhA Dx: </strong><span><i
                                                class="text-primary fas fa-info-circle"></i></span></p>
                                </div>
                                <div class="col-md-2">
                                    <p><strong id="PA">{{ round($halfbody->PADx, 2) }}</strong></p>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-5"><strong>
                                        <p>Età:</p>
                                    </strong></div>
                                <div class="col-md-2"><strong>
                                        <p id="eta">{{ $halfbody->eta }}</p>
                                    </strong></div>
                            </div>
                            <div class="row">
                                <div class="col-md-5"><strong>
                                        <p>Altezza:</p>
                                    </strong></div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ $halfbody->Altezza }}</p>
                                    </strong></div>
                            </div>
                            <div class="row">
                                <div class="col-md-5"><strong>
                                        <p>Peso:</p>
                                    </strong></div>
                                <div class="col-md-2"><strong>
                                        <p id="resistenza">{{ round($halfbody->Peso, 2) }}</p>
                                    </strong></div>
                            </div>
                        </div>



                    </div>



                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header">
                    <h3 class="card-title">Valutazioni</h3>
                </div>
                <div class="card-body">

                    <textarea class="form-control" rows="10">{{ $Commenti['RZ']['messaggio'] }}

{{ $Commenti['XC']['messaggio'] }}

{{ $Commenti['PA']['messaggio'] }}
                        </textarea>


                </div>
            </div>
        </div>

    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title text-center">Rapporti di Asimmetria</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <h5 class="text-center mb-3">Asimmetria idrica</h5>
                            <canvas id="risRZ" data-ris-rz="{{ round($Ris['RZ'], 2) }}" width="450" height="100" style="display: block; margin: 0 auto;"></canvas>
                        </div>
                        <div class="col-md-4" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <h5 class="text-center mb-3">Asimmetria cellulare</h5>
                            <canvas id="risXC" data-ris-xc="{{ round($Ris['XC'], 2) }}" width="450" height="100" style="display: block; margin: 0 auto;"></canvas>
                        </div>
                        <div class="col-md-4" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <h5 class="text-center mb-3">Asimmetria funzionale sistemica</h5>
                            <canvas id="risPA" data-ris-pa="{{ round($Ris['PA'], 2) }}" width="450" height="100" style="display: block; margin: 0 auto;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-8">
            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th scope="col" style="width:40%">Dato</th>
                        <th scope="col" style="width:10%">Lato Sinistro</th>
                        <th scope="col">Lato Destro</th>
                        <th scope="col">Percentuali</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">PhA</th>
                        <td>{{ round($halfbody->PASx, 2) }}</td>
                        <td>{{ round($halfbody->PADx, 2) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">C-Dex</th>
                        <td>{{ round($halfbody->CDEXSx / 2, 0) }}</td>
                        <td>{{ round($halfbody->CDEXDx / 2, 0) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">ECL</th>
                        <td>{{ round($halfbody->ECLSx, 0) }}</td>
                        <td>{{ round($halfbody->ECLDx, 0) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">Bia Index</th>
                        <td>{{ round($halfbody->BIAINDEXSx, 1) }}</td>
                        <td>{{ round($halfbody->BIAINDEXDx, 1) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">BCM</th>
                        <td>{{ round($halfbody->BCMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->BCMDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->BCMSx / 2 / $halfbody->Peso) * 100, 1) }} - dx:
                            {{ round(($halfbody->BCMDx / 2 / $halfbody->Peso) * 100, 1) }} </td>
                    </tr>
                    <tr>
                        <th scope="row">BCM/FFM</th>
                        <td>{{ round(($halfbody->BCMSx / 2 / ($halfbody->FFMSx / 2)) * 100, 1) }}</td>
                        <td>{{ round(($halfbody->BCMDx / 2 / ($halfbody->FFMDx / 2)) * 100, 1) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">ECM</th>
                        <td>{{ round($halfbody->ECMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->ECMDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->ECMSx / 2 / $halfbody->Peso) * 100, 1) }} - dx:
                            {{ round(($halfbody->ECMDx / 2 / $halfbody->Peso) * 100, 1) }} </td>
                    </tr>
                    <tr>
                        <th scope="row">ECM/BCM</th>
                        <td>{{ round($halfbody->ECMBCMSx, 2) }}</td>
                        <td>{{ round($halfbody->ECMBCMDx, 2) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">ASMM</th>
                        <td>{{ round($halfbody->ASMMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->ASMMDx / 2, 1) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">SMM</th>
                        <td>{{ round($halfbody->SMMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->SMMDx / 2, 1) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">FFM</th>
                        <td>{{ round($halfbody->FFMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->FFMDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->FFMSx / 2 / $halfbody->Peso) * 100, 1) }} - dx:
                            {{ round(($halfbody->FFMDx / 2 / $halfbody->Peso) * 100, 1) }} </td>
                    </tr>
                    <tr>
                        <th scope="row">FM</th>
                        <td>{{ round($halfbody->FMSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->FMDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->FMSx / 2 / $halfbody->Peso) * 100, 1) }} - dx:
                            {{ round(($halfbody->FMDx / 2 / $halfbody->Peso) * 100, 1) }} </td>
                    </tr>
                    <tr>
                        <th scope="row">FM/FFM</th>
                        <td>{{ round($halfbody->FMFFMSx, 2) }}</td>
                        <td>{{ round($halfbody->FMFFMDx, 2) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th scope="row">TBW</th>
                        <td>{{ round($halfbody->TBWSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->TBWDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->TBWSx / 2 / $halfbody->Peso) * 100, 1) }} - dx:
                            {{ round(($halfbody->TBWDx / 2 / $halfbody->Peso) * 100, 1) }} </td>
                    </tr>
                    <tr>
                        <th scope="row">ECW</th>
                        <td>{{ round($halfbody->ECWSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->ECWDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->ECWSx / 2 / ($halfbody->TBWSx / 2)) * 100, 1) }} - dx:
                            {{ round(($halfbody->ECWDx / 2 / ($halfbody->TBWDx / 2)) * 100, 1) }}</td>
                    </tr>
                    <tr>
                        <th scope="row">ICW</th>
                        <td>{{ round($halfbody->ICWSx / 2, 1) }}</td>
                        <td>{{ round($halfbody->ICWDx / 2, 1) }}</td>
                        <td>sx: {{ round(($halfbody->ICWSx / 2 / ($halfbody->TBWSx / 2)) * 100, 1) }} - dx:
                            {{ round(($halfbody->ICWDx / 2 / ($halfbody->TBWDx / 2)) * 100, 1) }}</td>
                    </tr>
                    <tr>
                        <th scope="row">ECW/ICW</th>
                        <td>{{ round($halfbody->ECWICWSx, 2) }}</td>
                        <td>{{ round($halfbody->ECWICWDx, 2) }}</td>
                        <td></td>
                    </tr>

                </tbody>
            </table>
        </div>


    </div>

@stop


@section('css')


@stop


@section('js')
<script src="{{ asset('js/Asim.js')}}" ></script>
<script src="{{ asset('js/RisAsim.js')}}" ></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"
        integrity="sha512-es3XL5vwq08UWKA+Fp6tZVTcJ4Kh25GsgsCSkBbPlX6QmDn3YJX0yhUVhPYQUoPX/gUFXf7uH0YtuZHGPj4iHA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const ctx4 = document.getElementById('myChart4');
        const myChart4 = new Chart(ctx4, {
            responsive: false,
            maintainAspectRatio: false,
            type: 'line',
            data: {

                datasets: [{
                    label: 'Sinistro',
                    backgroundColor: "rgba(255, 99, 132, 1)",
                    data: [

                        {
                            y: "{{ $halfbody->ReattanzaSx }}",
                            x: "{{ $halfbody->BIAINDEXSx }}"
                        },

                    ],
                    backgroundColor: [
                        'rgba(255, 99, 132, 1)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                    ],
                    borderWidth: 2,
                    pointRadius: 4,
                }, {
                    label: 'Destro',
                    data: [

                        {
                            y: "{{ $halfbody->ReattanzaDx }}",
                            x: "{{ $halfbody->BIAINDEXDx }}"
                        },

                    ],
                    backgroundColor: [
                        'rgba(54, 162, 235, 1)',
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                    ],
                    borderWidth: 2,
                    pointRadius: 4,
                }]
            },
            options: {
                aspectRatio: 1,
                plugins: {
                    annotation: {
                        clip: true,
                        drawTime: 'afterDatasetsDraw',


                    },
                },
                scales: {
                    y: { // and your y axis customization as you see fit...
                        max: 100,
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Reattanza'
                        },

                        ticks: {
                            stepSize: 0.5
                        },
                        display: true,
                        scaleLabel: {
                            display: false,
                        }
                    },
                    x: {
                        max: 18,
                        min: 0,
                        title: {
                            display: true,
                            text: 'Bia-Index'
                        },
                        type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)

                        ticks: {
                            stepSize: 1
                        },

                        display: true, // mandatory
                        scaleLabel: {
                            display: false, // mandatory
                            labelString: 'Your label' // optional
                        },

                    }
                }
            }
        });

        const ctx1 = document.getElementById('myChart1');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'FAT',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FAT\n " + item + " Kg";
                        }
                    },
                    backgroundColor: "#F5CF35",
                    data: [{{ round($halfbody->FMSx / 2, 1) }}],
                }, {
                    label: 'FFM',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FFM\n " + item + " Kg";
                        }
                    },
                    backgroundColor: "#6BA362",
                    data: [{{ round($halfbody->FFMSx / 2, 1) }}],
                }],
            },

            plugins: [ChartDataLabels],
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {

                        stacked: true,
                    },
                    y: {
                        stacked: true,
                        max: {{ $halfbody->Peso / 2 }},
                        ticks: {
                            display: false
                        },
                    }
                }
            }

        });

        const ctx1d = document.getElementById('myChart1_d');
        const myChart1_d = new Chart(ctx1d, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'FAT',
                    backgroundColor: "#F5CF35",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FAT\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->FMDx / 2, 1) }}],
                }, {
                    label: 'FFM',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FFM\n " + item + " Kg";
                        }
                    },
                    backgroundColor: "#6BA362",
                    data: [{{ round($halfbody->FFMDx / 2, 1) }}],
                }],
            },

            plugins: [ChartDataLabels],
            options: {
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                },
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true,
                        max: {{ $halfbody->Peso / 2 }},
                        ticks: {
                            display: false
                        },
                    }
                }
            }

        });

        const ctx2 = document.getElementById('myChart2');
        const myChart2 = new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'FAT',
                    backgroundColor: "#F5CF35",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FAT\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->FMSx / 2, 1) }}],
                }, {
                    label: 'BCM',
                    backgroundColor: "#D64D3E",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  BCM\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->BCMSx / 2, 1) }}],
                }, {
                    label: 'ECM',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ECM\n " + item + " Kg";
                        }
                    },
                    backgroundColor: "#CABD78",
                    data: [{{ round($halfbody->ECMSx / 2, 1) }}],
                }],
            },

            plugins: [ChartDataLabels],
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        max: {{ $halfbody->Peso / 2 }},
                        stacked: true,
                        ticks: {
                            display: false
                        },

                    }
                }
            }

        });

        const ctx2d = document.getElementById('myChart2d');
        const myChart2d = new Chart(ctx2d, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'FAT',
                    backgroundColor: "#F5CF35",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  FAT\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->FMDx / 2, 1) }}],
                }, {
                    label: 'BCM',
                    backgroundColor: "#D64D3E",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  BCM\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->BCMDx / 2, 1) }}],
                }, {
                    label: 'ECM',
                    backgroundColor: "#CABD78",
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ECM\n " + item + " Kg";
                        }
                    },
                    data: [{{ round($halfbody->ECMDx / 2, 1) }}],
                }],
            },
            plugins: [ChartDataLabels],

            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        max: {{ $halfbody->Peso / 2 }},
                        stacked: true,
                        ticks: {
                            display: false
                        }

                    }
                }
            }

        });
        const ctx3 = document.getElementById('myChart3');
        const myChart3 = new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'ICW',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ICW%\n " + item + "%";
                        }
                    },
                    backgroundColor: "#5EF3FA",
                    data: [{{ round(($halfbody->ICWSx / 2 / ($halfbody->TBWSx / 2)) * 100, 1) }}],
                }, {
                    label: 'ECW',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ECW%\n " + item + "%";
                        }
                    },
                    backgroundColor: "#68B0FA",
                    data: [{{ round(($halfbody->ECWSx / 2 / ($halfbody->TBWSx / 2)) * 100, 1) }}],
                }],
            },

            plugins: [ChartDataLabels],
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {

                    },
                    y: {
                        max: 100,
                        ticks: {
                            display: false
                        }

                    }
                }
            }

        });


        const ctx3d = document.getElementById('myChart3d');
        const myChart3d = new Chart(ctx3d, {
            type: 'bar',
            data: {
                labels: [""],
                datasets: [{
                    label: 'ICW',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ICW%\n " + item + "%";
                        }
                    },
                    backgroundColor: "#5EF3FA",
                    data: [{{ round(($halfbody->ICWDx / 2 / ($halfbody->TBWDx / 2)) * 100, 2) }}],
                }, {
                    label: 'ECW',
                    datalabels: {
                        color: '#000000',
                        formatter: (item) => {

                            return "  ECW%\n " + item + "%";
                        }
                    },
                    backgroundColor: "#68B0FA",
                    data: [{{ round(($halfbody->ECWDx / 2 / ($halfbody->TBWDx / 2)) * 100, 2) }}],
                }],
            },

            plugins: [ChartDataLabels],
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                },

                scales: {
                    x: {

                    },
                    y: {
                        max: 100,
                        ticks: {
                            display: false
                        }

                    }
                }
            }

        });
    </script>
@stop