Widget:Grafico: differenze tra le versioni

Da WikiLectio.
m test
m tet
Riga 1: Riga 1:
<includeonly>
<div id="wrap_<!--{$id|escape:'html'}-->" style="padding:8px;border:1px solid #ccc;width:620px;">
  <div style="font-size:12px;color:#555;margin-bottom:6px;">
    Widget Grafico — test base (id: <!--{$id|escape:'html'}-->)
  </div>
  <canvas id="canvas_<!--{$id|escape:'html'}-->" width="600" height="240" style="border:1px solid #ddd;"></canvas>
  <div id="msg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:6px;"></div>
</div>
<!-- Chart.js locale -->
<script src="/resources/chart.umd.js"></script>
<script>
<script>
(function(){
(function(){
Riga 21: Riga 9:


   try {
   try {
    // Dati DEMO fissi (niente Smarty qui)
     var labels = [0, 2, 4, 6, 8, 10];
     var labels = [0, 2, 4, 6, 8, 10];
     var data1  = [10, 8, 6, 4, 2, 0];  // Domanda
     var data1  = [10, 8, 6, 4, 2, 0];  // Domanda
Riga 31: Riga 18:
         labels: labels,
         labels: labels,
         datasets: [
         datasets: [
           { label: 'Domanda', data: data1, fill: false },
           {
           { label: 'Offerta', data: data2, fill: false }
            label:'Domanda',
            data: data1,
            borderColor: '#d62728',      // rosso visibile
            backgroundColor: '#d62728',
            borderWidth: 2,
            pointRadius: 3,
            fill: false,
            tension: 0
          },
           {
            label:'Offerta',
            data: data2,
            borderColor: '#1f77b4',      // blu visibile
            backgroundColor: '#1f77b4',
            borderWidth: 2,
            pointRadius: 3,
            fill: false,
            tension: 0
          }
         ]
         ]
       },
       },
       options: {
       options: {
         responsive: false,
         responsive: false,
        maintainAspectRatio: false,
         plugins: {
         plugins: {
           title: { display: true, text: 'Mercato affitti (demo)' },
           title: { display: true, text: 'Mercato affitti (demo)' },
           legend: { display: true }
           legend: { display: true }
        },
        scales: {
          x: {
            type: 'category',
            title: { display: true, text: 'Quantità' },
            grid: { display: true }
          },
          y: {
            title: { display: true, text: 'Prezzo' },
            min: 0,
            max: 12,
            grid: { display: true }
          }
         }
         }
       }
       }
Riga 50: Riga 69:
})();
})();
</script>
</script>
</includeonly>

Versione delle 17:55, 19 set 2025

<script> (function(){

 var id  = "";
 var c   = document.getElementById("canvas_" + id);
 var msg = document.getElementById("msg_" + id);
 if (!c) { if (msg) msg.textContent = "Canvas non trovato (id="+id+")"; return; }
 if (typeof Chart === "undefined") { if (msg) msg.textContent = "Chart.js locale non caricato: controlla /resources/chart.umd.js"; return; }
 try {
   var labels = [0, 2, 4, 6, 8, 10];
   var data1  = [10, 8, 6, 4, 2, 0];   // Domanda
   var data2  = [0,  2, 4, 6, 8, 10];  // Offerta
   new Chart(c.getContext('2d'), {
     type: 'line',
     data: {
       labels: labels,
       datasets: [
         {
           label:'Domanda',
           data: data1,
           borderColor: '#d62728',      // rosso visibile
           backgroundColor: '#d62728',
           borderWidth: 2,
           pointRadius: 3,
           fill: false,
           tension: 0
         },
         {
           label:'Offerta',
           data: data2,
           borderColor: '#1f77b4',      // blu visibile
           backgroundColor: '#1f77b4',
           borderWidth: 2,
           pointRadius: 3,
           fill: false,
           tension: 0
         }
       ]
     },
     options: {
       responsive: false,
       maintainAspectRatio: false,
       plugins: {
         title: { display: true, text: 'Mercato affitti (demo)' },
         legend: { display: true }
       },
       scales: {
         x: {
           type: 'category',
           title: { display: true, text: 'Quantità' },
           grid: { display: true }
         },
         y: {
           title: { display: true, text: 'Prezzo' },
           min: 0,
           max: 12,
           grid: { display: true }
         }
       }
     }
   });
   if (msg) msg.textContent = "";
 } catch (e) {
   if (msg) msg.textContent = "Errore rendering: " + (e && e.message ? e.message : e);
   console.error("[Widget:Grafico] errore:", e);
 }

})(); </script>