Changeset 448 for trunk


Ignore:
Timestamp:
Apr 1, 2025, 6:03:44 PM (8 months ago)
Author:
roby
Message:
  • CLIENT

-- altre modifiche ai grafici

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/admin/versione.php

    r447 r448  
    11<?php
    22
    3 $versione = "3.0 rev 447";
     3$versione = "3.0 rev 448";
    44$version_number = $versione;
    55$datarel = "01 aprile 2025";

  • trunk/client/temi/bootstrap/pagine/grafici/affluenza_referendum.php

    r442 r448  
    11<?php
    2 // Dati simulati per 10 quesiti per testare lo spazio dinamico
     2// Dati dinamici da PHP
     3
    34$labels = [
    45    ['01/03/2025', '14:00'],
    … …  
    78    ['01/03/2025', '20:00']
    89];
    9 $quesiti = [
    10     'Quesito 1' => [[10, 700], [24.7, 980], [30, 1200], [47.5, 2000]],
    11     'Quesito 2' => [[12, 750], [26.3, 1100], [32, 1300], [49, 2100]],
    12     'Quesito 3' => [[14, 800], [28, 1150], [34, 1400], [50, 2200]],
    13     'Quesito 4' => [[8, 650], [22.5, 900], [28, 1100], [44, 1900]],
    14     'Quesito 5' => [[6, 500], [20, 850], [26, 1000], [42, 1800]],
    15     'Quesito 6' => [[9, 700], [23.5, 1000], [29, 1250], [46, 1950]],
    16     'Quesito 7' => [[7, 600], [21, 800], [27, 1150], [45, 1850]],
    17     'Quesito 8' => [[11, 720], [25, 960], [31, 1280], [48, 2080]],
    18     'Quesito 9' => [[13, 770], [27, 1120], [33, 1350], [51, 2250]],
    19     'Quesito 10' => [[15, 850], [30, 1200], [36, 1500], [53, 2300]]
    20 ];
     10$voti_percentuali = [10, 24.7, 30, 47.5];  // Dati % attuali n.b. i decimali mettere il punto
     11$voti = [700, 980, 1200, 2000];            // Voti attuali
     12$scrutinate =10;
     13$sezionitotali=15;
    2114?>
    22 
     15<!-- Chart.js -->
    2316<script src="temi/bootstrap/pagine/grafici/js/chart.umd.js"></script>
    2417
    … …  
    3023    }
    3124</style>
    32 
     25<div class="container pb-2">
     26                        <label for="defaultSelect">Seleziona Quesito</label>
     27                        <select id="defaultSelect" onchange="location = this.value;">
     28                                <!-- option selected>Selezione Quesito</option -->
     29                                <?php
     30                                        $desc='';
     31                                        foreach($quesiti as $key=>$val) { if ($num_gruppo==$val[1]) {$id_gruppo=$val['id_gruppo']; $sel='selected';} else {$sel='';} ?>
     32                                                <option <?php echo $sel; ?> value=" <?php echo "modules.php?op=11&id_comune=$id_comune$cirpar&file=index&id_cons_gen=$id_cons_gen&data=$data&orario=$orario&num_gruppo=".$val[1];?>">Quesito <?php echo $val['num_gruppo'];?></option>
     33                                <?php }?>
     34                        </select>
     35                </div>
    3336<div class="container">
    3437    <div class="row text-center">
    35         <h4 class="fw-semibold text-primary mobile-expanded mt-2">Affluenza referendum</h4>
     38        <h4 class="fw-semibold text-primary mobile-expanded mt-2">Affluenza</h4>
    3639    </div>
     40        <div class="table-responsive overflow-x">
     41        <table class="table  mb-0">
     42                <thead class="title-content">
     43                        <tr>
     44                                <th>Affluenza</th>
     45                                <?php if ($scrutinate == $sezionitotali) {?>
     46                                        <th class="text-end">Dati finali</th>
     47                                <?php } else {?>
     48                                        <th class="text-end"><span>Sezioni scrutinate: <?php echo $scrutinate; ?> su <?php echo $sezionitotali; ?></span></th>
     49                                <?php }?>
     50                        </tr>
     51                </thead>
     52        </table>
     53</div>
    3754    <div id="chartContainer">
    3855        <canvas id="affluenzaChart"></canvas>
    … …  
    4057</div>
    4158
     59<!-- Script per il grafico -->
    4260<script>
    43     var ctx = document.getElementById('affluenzaChart').getContext('2d');
    44     var labels = <?php echo json_encode($labels); ?>;
    45     var quesiti = <?php echo json_encode($quesiti); ?>;
     61var ctx = document.getElementById('affluenzaChart').getContext('2d');
    4662
    47     const predefinedColors = [
    48         'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 206, 86)',
    49         'rgb(75, 192, 192)', 'rgb(153, 102, 255)', 'rgb(255, 159, 64)',
    50         'rgb(201, 203, 207)', 'rgb(100, 181, 246)', 'rgb(255, 171, 145)',
    51         'rgb(174, 213, 129)'
    52     ];
     63// Passaggio dei dati PHP a JavaScript
     64var labels = <?php echo json_encode($labels); ?>;
     65var voti_percentuali = <?php echo json_encode($voti_percentuali); ?>;
     66var voti = <?php echo json_encode($voti); ?>;
    5367
    54     var datasets = [];
    55     var colorIndex = 0;
    56     var numQuesiti = Object.keys(quesiti).length;
    57     var chartHeight = Math.max(400, numQuesiti * 110);
    58     document.getElementById('chartContainer').style.height = chartHeight + 'px';
     68// Funzione per sostituire i valori nulli o vuoti con 0
     69function handleNullValues(array) {
     70    return array.map(value => value === null || value === undefined ? 0 : value);
     71}
    5972
    60     for (var quesito in quesiti) {
    61         var percentuali = [];
    62         var voti = [];
    63 
    64         quesiti[quesito].forEach(function (item) {
    65             percentuali.push(item[0]);
    66             voti.push(item[1]);
    67         });
    68 
    69         datasets.push({
    70             label: quesito,
    71             data: percentuali,
    72             backgroundColor: predefinedColors[colorIndex % predefinedColors.length],
    73             borderWidth: 1
    74         });
    75 
    76         colorIndex++;
    77     }
    78 
    79     var affluenzaChart = new Chart(ctx, {
    80         type: 'bar',
    81         data: {
    82             labels: labels,
    83             datasets: datasets
    84         },
    85         options: {
    86             responsive: true,
    87             maintainAspectRatio: false,
    88             indexAxis: 'y',
    89             scales: {
    90                 x: {
    91                     beginAtZero: true,
    92                     max: 100
    93                 },
    94                 y: {
    95                     ticks: {
    96                         stepSize: 1
    97                     },
    98                     barThickness: (window.innerWidth <= 768) ? 40 : 60
    99                 }
     73var affluenzaChart = new Chart(ctx, {
     74    type: 'bar',
     75    data: {
     76        labels: labels,
     77        datasets: [
     78            {
     79                label: 'Affluenza',
     80                data: voti_percentuali,
     81                backgroundColor: 'rgba(240,128,128)',
     82                borderWidth: 1
     83            }
     84        ]
     85    },
     86    options: {
     87        responsive: true,
     88        maintainAspectRatio: false,
     89        indexAxis: 'y',
     90        scales: {
     91            x: {
     92                beginAtZero: true,
     93                max: 100
    10094            },
    101             plugins: {
    102                 legend: {
    103                     display: true
    104                 },
    105                 tooltip: {
    106                     callbacks: {
    107                         label: function (context) {
    108                             var datasetIndex = context.datasetIndex;
    109                             var dataIndex = context.dataIndex;
    110                             var percentuale = context.raw;
    111                             var voti = quesiti[context.dataset.label][dataIndex][1];
    112 
    113                             return context.dataset.label + ': ' + percentuale + '% (' + voti + ' voti)';
    114                         }
     95            y: {
     96                ticks: {
     97                    stepSize: 1,
     98                    font: {
     99                        family: 'Titillium Web',
     100                        size: 14,
     101                        weight: 'bold'
    115102                    }
    116103                }
    117104            }
    118105        },
    119         plugins: [
    120     {
    121         id: 'insideBarPercentage',
    122         afterDatasetDraw: function (chart) {
    123             const ctx = chart.ctx;
    124             chart.data.datasets.forEach(function (dataset, datasetIndex) {
    125                 if (!chart.isDatasetVisible(datasetIndex)) return;
    126 
    127                 dataset.data.forEach(function (value, index) {
    128                     const meta = chart.getDatasetMeta(datasetIndex).data[index];
    129                     const x = meta.base + (meta.width / 2);
    130                     const y = meta.y;
    131 
    132                     const text = value + '% (' + quesiti[dataset.label][index][1] + ' voti)';
    133                     const isSmallBar = value < 10; // Se la percentuale Ú sotto il 10%, rimpiccioliamo il testo
    134 
    135                     // Cambiamo dinamicamente la dimensione del font
    136                     const fontSize = isSmallBar ? 10 : ((window.innerWidth <= 768) ? 10 : 14);
    137 
    138                     ctx.save();
    139                     ctx.fillStyle = '#000000'; // Testo nero
    140                     ctx.font = `bold ${fontSize}px Titillium Web, Arial`;
    141                     ctx.textAlign = 'center';
    142                     ctx.textBaseline = 'middle';
    143                     ctx.fillText(text, x, y);
    144                     ctx.restore();
    145                 });
    146             });
     106        plugins: {
     107            legend: {
     108                labels: {
     109                    font: {
     110                        family: 'Titillium Web',
     111                        size: 16,
     112                        weight: 'bold'
     113                    }
     114                }
     115            },
     116            tooltip: {
     117                callbacks: {
     118                    title: function (tooltipItems) {
     119                        const index = tooltipItems[0].dataIndex;
     120                        return labels[index].join(' - ');
     121                    },
     122                    label: function (context) {
     123                        const index = context.dataIndex;
     124                        return `Affluenza: ${voti_percentuali[index]}% (${voti[index]} voti)`;
     125                    }
     126                }
     127            }
    147128        }
    148129    }
    149 ]
    150 
    151     });
     130});
    152131</script>

  • trunk/client/temi/bootstrap/pagine/grafici/votanti_referendum.php

    r442 r448  
    11<?php
    2 // Simulazione dei dati per 10 quesiti
    3 $quesiti = [
    4     "Quesito 1" => ["Schede Valide" => 891105, "Schede Bianche" => 59511, "Schede Nulle" => 75903],
    5     "Quesito 2" => ["Schede Valide" => 720300, "Schede Bianche" => 45000, "Schede Nulle" => 63000],
    6     "Quesito 3" => ["Schede Valide" => 815400, "Schede Bianche" => 50230, "Schede Nulle" => 71020],
    7     "Quesito 4" => ["Schede Valide" => 780500, "Schede Bianche" => 47000, "Schede Nulle" => 68000],
    8     "Quesito 5" => ["Schede Valide" => 845000, "Schede Bianche" => 52000, "Schede Nulle" => 74000],
    9     "Quesito 6" => ["Schede Valide" => 900000, "Schede Bianche" => 58000, "Schede Nulle" => 79000],
    10     "Quesito 7" => ["Schede Valide" => 760000, "Schede Bianche" => 46000, "Schede Nulle" => 65000],
    11     "Quesito 8" => ["Schede Valide" => 875000, "Schede Bianche" => 55000, "Schede Nulle" => 73000],
    12     "Quesito 9" => ["Schede Valide" => 710000, "Schede Bianche" => 44000, "Schede Nulle" => 62000],
    13     "Quesito 10" => ["Schede Valide" => 895000, "Schede Bianche" => 60000, "Schede Nulle" => 80000],
     2// Simulazione dei dati per un quesito
     3$quesito = [
     4    "Schede Valide" => 891105,
     5    "Schede Bianche" => 59511,
     6    "Schede Nulle" => 75903
    147];
     8$nome_quesito = "Quesito 1"; // Nome del quesito dinamico
     9$scrutinate =10;
     10$sezionitotali=15;
    1511?>
    1612
    … …  
    2016<style>
    2117    .chart-container {
    22         width: 100%;
    23         height: 400px;
    24         margin-bottom: 20px;
     18        width: 50%;
     19        max-width: 500px;
     20        margin: 0 auto;
     21        padding: 20px;
    2522    }
    2623</style>
    27 
     24<!-- Blocco select quesito referndum-->
     25                <div class="container pb-2">
     26                        <label for="defaultSelect">Seleziona Quesito</label>
     27                        <select id="defaultSelect" onchange="location = this.value;">
     28                                <!-- option selected>Selezione Quesito</option -->
     29                                        <?php
     30                                        $desc='';
     31                                        foreach($quesiti as $key=>$val) {
     32                                                if ($num_gruppo==$val[1]) {
     33                                                        $id_gruppo=$val['id_gruppo']; $sel='selected';
     34                                                } else {
     35                                                        $sel='';
     36                                                }?>
     37                                                <option <?php echo $sel; ?> value=" <?php echo "modules.php?op=12&id_comune=$id_comune&file=index&id_cons_gen=$id_cons_gen&data=$data&orario=$orario&num_gruppo=".$val[1];?>">Quesito <?php echo $val['num_gruppo'];?></option>
     38                                        <?php }?>
     39                        </select>
     40                </div>
     41                <!-- fine Blocco select quesito referndum-->
    2842<div class="container">
    29     <div class="row text-center">
    30         <h4 class="fw-semibold text-primary mt-2">Distribuzione dei Voti Referendum</h4>
    31     </div>
    32    
    33     <div class="row">
    34         <?php foreach ($quesiti as $nome => $dati): ?>
    35             <div class="col-md-6 col-12">
    36                 <div class="chart-container">
    37                     <canvas id="chart<?= str_replace(' ', '', $nome) ?>"></canvas>
    38                 </div>
    39             </div>
    40         <?php endforeach; ?>
     43        <div class="row text-center">
     44                <h4 class="fw-semibold text-primary mobile-expanded mt-2">Dettaglio Voti espressi</h4>
     45        </div>
     46</div>
     47<div class="table-responsive overflow-x">
     48        <table class="table  mb-0">
     49                <thead class="title-content">
     50                        <tr>
     51                                <th>Votanti per sezione</th>
     52                                <?php if ($scrutinate == $sezionitotali) {?>
     53                                        <th class="text-end">Dati finali</th>
     54                                <?php } else {?>
     55                                        <th class="text-end"><span>Sezioni scrutinate: <?php echo $scrutinate; ?> su <?php echo $sezionitotali; ?></span>
     56                                        </th>
     57                                <?php }?>
     58                        </tr>
     59                </thead>
     60        </table>
     61</div> 
     62<div class="container text-center">
     63    <div class="chart-container">
     64        <canvas id="chartQuesito"></canvas>
    4165    </div>
    4266</div>
    … …  
    4468<script>
    4569    document.addEventListener("DOMContentLoaded", function () {
    46         var quesiti = <?php echo json_encode($quesiti); ?>;
     70        var dati = <?php echo json_encode($quesito); ?>;
     71        var nomeQuesito = <?php echo json_encode($nome_quesito); ?>;
     72        var ctx = document.getElementById("chartQuesito").getContext("2d");
    4773       
    48         Object.entries(quesiti).forEach(([nome, dati]) => {
    49             var ctx = document.getElementById(`chart${nome.replace(/\s+/g, '')}`).getContext('2d');
    50             var labels = Object.keys(dati);
    51             var voti = Object.values(dati);
    52            
    53             new Chart(ctx, {
    54                 type: 'pie',
    55                 data: {
    56                     labels: labels,
    57                     datasets: [{
    58                         data: voti,
    59                         backgroundColor: [
    60                             'rgba(54, 162, 235, 0.6)',
    61                             'rgba(255, 206, 86, 0.6)',
    62                             'rgba(255, 99, 132, 0.6)'
    63                         ],
    64                         borderColor: [
    65                             'rgba(54, 162, 235, 1)',
    66                             'rgba(255, 206, 86, 1)',
    67                             'rgba(255, 99, 132, 1)'
    68                         ],
    69                         borderWidth: 1
    70                     }]
    71                 },
    72                 options: {
    73                     responsive: true,
    74                     maintainAspectRatio: false,
    75                     plugins: {
    76                         legend: { position: 'top' },
    77                         title: {
    78                             display: true,
    79                             text: nome,
    80                             font: {
    81                                 size: 16,
    82                                 weight: '600'
    83                             }
    84                         },
    85                         tooltip: {
    86                             callbacks: {
    87                                 label: function(tooltipItem) {
    88                                     return "Voti: " + tooltipItem.raw;
    89                                 }
     74        new Chart(ctx, {
     75            type: "pie",
     76            data: {
     77                labels: Object.keys(dati),
     78                datasets: [{
     79                    data: Object.values(dati),
     80                    backgroundColor: [
     81                        "rgba(54, 162, 235, 0.6)",
     82                        "rgba(255, 206, 86, 0.6)",
     83                        "rgba(255, 99, 132, 0.6)"
     84                    ],
     85                    borderColor: [
     86                        "rgba(54, 162, 235, 1)",
     87                        "rgba(255, 206, 86, 1)",
     88                        "rgba(255, 99, 132, 1)"
     89                    ],
     90                    borderWidth: 1
     91                }]
     92            },
     93            options: {
     94                responsive: true,
     95                maintainAspectRatio: false,
     96                plugins: {
     97                    legend: { position: "top" },
     98                    title: {
     99                        display: true,
     100                        text: nomeQuesito,
     101                        font: { size: 16, weight: "600" }
     102                    },
     103                    tooltip: {
     104                        callbacks: {
     105                            label: function(tooltipItem) {
     106                                return "Voti: " + tooltipItem.raw;
    90107                            }
    91108                        }
    92109                    }
    93110                }
    94             });
     111            }
    95112        });
    96113    });

  • trunk/client/temi/bootstrap/pagine/grafici/voti_referendum.php

    r442 r448  
    11<?php
    22$quesiti = [
    3     'Quesito 1' => [[65, 1500], [35, 800]],
    4     'Quesito 2' => [[70, 1800], [30, 900]],
    5     'Quesito 3' => [[60, 1400], [40, 1000]],
    6     'Quesito 4' => [[55, 1300], [45, 1200]],
    7     'Quesito 5' => [[75, 2000], [25, 700]],
    8     'Quesito 6' => [[80, 2100], [20, 500]],
    9     'Quesito 7' => [[85, 2200], [15, 300]],
    10     'Quesito 8' => [[50, 1100], [50, 1100]],
    11     'Quesito 9' => [[90, 2300], [10, 250]],
    12     'Quesito 10' => [[95, 2400], [5, 150]],
     3    'Quesito 2' => [[65, 1500], [35, 800]],
    134];
    145
    156$labels = array_keys($quesiti);
     7$scrutinate =10;
     8$sezionitotali=15;
    169?>
    1710
    … …  
    3225    }
    3326</style>
    34 
     27<!-- Blocco select quesito referndum-->
     28                <div class="container pb-2">
     29                        <label for="defaultSelect">Seleziona Quesito</label>
     30                        <select id="defaultSelect" onchange="location = this.value;">
     31                                <!-- option selected>Selezione Quesito</option -->
     32                                <?php
     33                                $desc='';
     34                                foreach($quesiti as $key=>$val) {
     35                                if ($num_gruppo==$val[1]) {$id_gruppo=$val['id_gruppo']; $sel='selected';} else {$sel='';}
     36                                ?>
     37                                        <option <?php echo $sel; ?> value=" <?php echo "modules.php?op=29&id_comune=$id_comune&file=index&id_cons_gen=$id_cons_gen&num_gruppo=".$val[1];?>">Quesito <?php echo $val['num_gruppo'];?></option>
     38                                <?php }?>
     39                        </select>
     40                </div>
     41                <!-- fine Blocco select quesito referndum-->
    3542<div class="container">
    3643    <div class="row text-center">
    37         <h4 class="fw-semibold text-primary mobile-expanded mt-2">Risultati referendum</h4>
     44        <h4 class="fw-semibold text-primary mobile-expanded mt-2">Risultati Referendum</h4>
    3845    </div>
     46        <div class="table-responsive overflow-x">
     47        <table class="table  mb-0">
     48                <thead class="title-content">
     49                        <tr>
     50                                <th>Risultati Referendum</th>
     51                                <?php if ($scrutinate == $sezionitotali) {?>
     52                                        <th class="text-end">Dati finali</th>
     53                                <?php } else {?>
     54                                        <th class="text-end"><span>Sezioni scrutinate: <?php echo $scrutinate; ?> su <?php echo $sezionitotali; ?></span>
     55                                        </th>
     56                                <?php }?>
     57                        </tr>
     58                </thead>
     59        </table>
     60</div> 
    3961    <div id="chartContainer">
    4062        <canvas id="risultatiChart"></canvas>

  • trunk/client/temi/bootstrap/pagine/grafici/votidigruppo.php

    r447 r448  
    11<?php
    22// Simulazione dei dati da un database o altra fonte
    3 $dati=voti_tot_gruppo();
    4 $scrutinate=scrutinate('gruppo');
    5 $sezionitotali=sezioni_totali();
     3$scrutinate = scrutinate('gruppo');
     4$sezionitotali = sezioni_totali();
     5$dati = voti_tot_gruppo();
    66# t2.num_gruppo,t2.descrizione,sum(t1.voti)
    7 $descr=array();
    8 $perc=array();
    9 $voti=array();
    10 $tot=0;
    11 $i=0;
    12 foreach($dati as $val)
    13         $tot+=$val[2];
    14 foreach($dati as $val) {
    15 #       if($i) $perc.=", ";
    16         $descr[]=$val[1];
    17         $perc[]=number_format($val[2]/$tot*100,2);
    18         $voti[]=number_format($val[2],0,'','.');
    19         $i++;
     7$descr = [];
     8$perc = [];
     9$voti = [];
     10$tot = 0;
     11$i = 0;
     12foreach ($dati as $val)
     13    $tot += $val[2];
     14foreach ($dati as $val) {
     15    $descr[] = $val[1];
     16    $perc[] = number_format($val[2] / $tot * 100, 2);
     17    $voti[] = number_format($val[2],0,'','.');
     18    $i++;
    2019}
    21 $labels = $descr; //Nomi di Lista
    22 $voti_percentuali = $perc; //Percentuali di Lista
    23 $voti_lista = $voti; // Aggiungi i voti per ciascuna lista
     20$labels = $descr; // Nomi di Gruppo
     21$voti_percentuali = $perc; // Percentuali di Gruppo
     22$voti_lista = $voti; // Aggiungi i voti per ciascun gruppo
     23
     24// Palette di colori per le barre (fino a 30 gruppi)
     25$palette = [
     26    '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf',
     27    '#aec7e8', '#ffbb78', '#98df8a', '#ff9896', '#c5b0d5', '#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5',
     28    '#393b79', '#637939', '#8c6d31', '#843c39', '#7b4173', '#5254a3', '#8ca252', '#bd9e39', '#ad494a', '#d6616b'
     29];
    2430?>
    2531
    2632<!-- Chart.js -->
    2733<script src="temi/bootstrap/pagine/grafici/js/chart.umd.js"></script>
     34<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    2835
    2936<style>
    3037    #chartContainer {
    3138        width: 100%;
    32         height: <?php echo intval(300 + count($labels) * 20); ?>px;
     39        height: <?php echo min(300 + count($labels) * 30, 900); ?>px; /* L'altezza si adatta al numero di gruppi */
    3340        margin: 0 auto;
    3441    }
    35 
    36     /* Applica il font Titillium Web al grafico */
    37     body, .chartjs-tooltip, .chartjs-legend, .chartjs-tooltip-table, .chartjs-title {
    38         font-family: 'Titillium Web', sans-serif;
     42    #legendContainer {
     43        text-align: center;
     44        margin-bottom: 20px;
     45    }
     46    #legendContainer div {
     47        display: inline-block;
     48        margin-right: 15px;
    3949    }
    4050</style>
    4151
    4252<div class="container">
    43     <div class="row text-center">
    44         <h4 class="fw-semibold text-primary mobile-expanded mt-2">Voti per 
    45                         <?php if ($tipo_cons==3 or $tipo_cons==5) echo _GRUPPO;
    46                                 elseif ($tipo_cons==1 or $tipo_cons==4 or $tipo_cons==9 or $tipo_cons==12 or $tipo_cons==13 or $tipo_cons==17 ) echo _GRUPPO;
    47                                 else echo "Raggruppamenti";
    48                                 echo "<br>";
    49                         ?>
    50                         <?php if ($scrutinate == $sezionitotali) {?>
    51                                 <th class="text-end">Dati finali</th>
    52                         <?php } else {?>
    53                                 <th class="text-end"><span>Sezioni scrutinate: <?php echo $scrutinate; ?> su <?php echo $sezionitotali; ?></span></th>
    54                         <?php }?>
     53   <div class="row text-center">
     54        <h4 class="fw-semibold text-primary mobile-expanded mt-2">Voti per <?php echo _GRUPPO; ?> <?php /* ?>
     55                <?php /*if ($tipo_cons==3 or $tipo_cons==5) echo
     56                        elseif ($tipo_cons==1 or $tipo_cons==4 or $tipo_cons==9 or $tipo_cons==12 or $tipo_cons==13 or $tipo_cons==17 ) echo "Candidati a Presidente";
     57                        else echo "Raggruppamenti";
     58                        echo "<br>";
     59                ?>*/ ?>
     60                </h4>
     61    </div>
     62<div class="table-responsive overflow-x">
     63        <table class="table  mb-0">
     64                <thead class="title-content">
     65                        <tr>
     66                                <th><?php echo _GRUPPO; /*if ($tipo_cons==3 or $tipo_cons==5) echo "Candidati a Sindaco";
     67                        elseif ($tipo_cons==1 or $tipo_cons==4 or $tipo_cons==9 or $tipo_cons==12 or $tipo_cons==13 or $tipo_cons==17 ) echo "Candidati a Presidente";
     68                        else echo "Raggruppamenti"; */
     69                        echo "<br>";
     70                ?></th>
     71                                <?php if ($scrutinate == $sezionitotali) {?>
     72                                        <th class="text-end">Dati definitivi</th>
     73                                <?php } else {?>
     74                                        <th class="text-end"><span>Sezioni scrutinate: <?php echo $scrutinate; ?> su <?php echo $sezionitotali; ?></span></th>
     75                                <?php }?>
     76                        </tr>
     77                </thead>
     78        </table>
     79</div>
     80    <!-- Legenda sopra il grafico -->
     81    <div class="row mb-3">
     82        <div class="col">
     83            <div id="legendContainer"></div>
     84        </div>
    5585    </div>
     86
    5687    <div id="chartContainer">
    5788        <canvas id="affluenzaChart"></canvas>
    … …  
    6394    var ctx = document.getElementById('affluenzaChart').getContext('2d');
    6495
    65     // Passaggio dei dati PHP a JavaScript
    6696    var labels = <?php echo json_encode($labels); ?>;
    6797    var dataPercentuali = <?php echo json_encode($voti_percentuali); ?>;
    6898    var dataVoti = <?php echo json_encode($voti_lista); ?>;
     99    var palette = <?php echo json_encode($palette); ?>;
     100
     101    var datasets = [{
     102        label: 'Voti %',
     103        data: dataPercentuali,
     104        backgroundColor: palette.slice(0, dataPercentuali.length),
     105        borderWidth: 1,
     106        barThickness: 30,  // Larghezza delle barre
     107        categoryPercentage: 1.0,  // Occupa tutta la larghezza disponibile
     108        barPercentage: 0.8  // Percentuale della larghezza della barra
     109    }];
    69110
    70111    var affluenzaChart = new Chart(ctx, {
    71112        type: 'bar',
    72113        data: {
    73             labels: labels,  // Dati delle etichette (Lista A, Lista B, ecc.)
    74             datasets: [
    75                 {   // Percentuali di voti
    76                     label: 'Voti %',
    77                     data: dataPercentuali,  // Dati percentuali
    78                     backgroundColor: 'rgba(135,206,250, 0.8)',  // Azzurro
    79                     borderWidth: 1
    80                 }
    81             ]
     114            labels: labels,
     115            datasets: datasets
    82116        },
    83117        options: {
    … …  
    89123                    stacked: true,
    90124                    beginAtZero: true,
    91                     max: 100
     125                    max: 100,
     126                    ticks: {
     127                        stepSize: 10 // Aumenta la dimensione dei tick dell'asse X
     128                    }
    92129                },
    93130                y: {
    94                     stacked: true
     131                    stacked: true,
     132                    ticks: {
     133                        beginAtZero: true,
     134                        padding: 15 // Spazio tra le barre
     135                    }
    95136                }
    96137            },
    97138            plugins: {
     139                legend: {
     140                    display: false // Nasconde la legenda di Chart.js, verrà gestita manualmente
     141                },
    98142                tooltip: {
    99143                    callbacks: {
    … …  
    105149                        }
    106150                    }
     151                },
     152                // Plugin per inserire i valori percentuali fuori dalla barra
     153                datalabels: {
     154                    display: true,
     155                    color: '#000000',  // Colore del testo
     156                    align: 'end',      // Posiziona il testo alla fine della barra
     157                    formatter: function(value, context) {
     158                        var percentuale = dataPercentuali[context.dataIndex];
     159                        return percentuale + '%'; // Mostra solo la percentuale
     160                    },
     161                    font: {
     162                        weight: 'bold',
     163                        size: 14
     164                    },
     165                    anchor: 'end',  // Ancorato alla fine della barra
     166                    offset: 5       // Distanza tra la barra e la percentuale
    107167                }
    108168            }
    109169        },
    110         plugins: [
    111             {
    112                 id: 'insideBarPercentage',
    113                 afterDatasetDraw: function(chart) {
    114                     const ctx = chart.ctx;
     170        plugins: [ChartDataLabels]
     171    });
    115172
    116                     chart.data.datasets[0].data.forEach((value, index) => {
    117                         const meta = chart.getDatasetMeta(0).data[index];  // Seleziona la barra corretta
    118 
    119                         // Voti numerici da mostrare
    120                         var numero_voti = dataVoti[index];
    121                        
    122                         // Calcolo orizzontale per il centro della barra (meta.width / 2)(value * 11);
    123                         const x = meta.base + meta.width + 5;
    124                        
    125                         // Calcolo verticale per il centro della barra
    126                         const y = meta.y;
    127 
    128                         ctx.save();
    129                         ctx.fillStyle = '#000000';  // Colore del testo nero per un buon contrasto
    130                         ctx.font = 'bold 14px "Titillium Web", sans-serif';  // Usa il font Titillium Web
    131                         ctx.textAlign = 'left';
    132                         ctx.textBaseline = 'middle';  // Centro del testo verticalmente
    133                         ctx.fillText(value + '% (' + numero_voti.toLocaleString() + ' voti)', x, y);  // Testo centrato
    134                         ctx.restore();
    135                     });
    136                 }
    137             }
    138         ]
     173    // Creazione della legenda personalizzata sopra il grafico
     174    var legendContainer = document.getElementById('legendContainer');
     175    labels.forEach((label, index) => {
     176        var legendItem = document.createElement('div');
     177        legendItem.innerHTML = `<span style="display:inline-block;width:12px;height:12px;background-color:${palette[index]};margin-right:5px;"></span>${label}`;
     178        legendContainer.appendChild(legendItem);
    139179    });
    140180</script>

  • trunk/client/versione.php

    r447 r448  
    11<?php
    2 $versione = "3.0 rev 447";
     2$versione = "3.0 rev 448";
    33$version_number = $versione;
    44$datarel = "01 aprile 2025";
Note: See TracChangeset for help on using the changeset viewer.