Widget:Grafico

 <canvas id="canvas_"
         width=""
         height=""
         data-id=""
         data-title=""
         data-x-title=""
         data-y-title=""
         data-labels=""
         data-series1-title=""
         data-series1-data=""
         data-series1-type=""
         data-series1-color=""
         data-series2-title=""
         data-series2-data=""
         data-series2-type=""
         data-series2-color=""
         data-series3-title=""
         data-series3-data=""
         data-series3-type=""
         data-series3-color=""
         data-series4-title=""
         data-series4-data=""
         data-series4-type=""
         data-series4-color=""
         data-eqx=""
         data-eqy=""
         data-show-legend=""
         data-responsive=""
         data-xmin=""
         data-xmax=""
         data-ymin=""
         data-ymax=""
 ></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

{literal} <script> (function(){

 function csvToArray(str){ if(!str) return []; return str.split(',').map(s=>s.trim()); }
 function csvToNum(str){ return csvToArray(str).map(v=>{const n=Number(v); return isNaN(n)?null:n;}); }
 function truthy(s){ return String(s||).toLowerCase() !== 'false'; }
 function numOrUndef(s){ const n = Number(s); return isNaN(n) ? undefined : n; }

 function buildDataset(title, data, type, color){
   if(!title || !data) return null;
   return {
     label: title,
     data: csvToNum(data),
     type: (type || 'line'),
     fill: false,
     borderColor: color || undefined,
     backgroundColor: color || undefined,
     tension: 0,
     pointRadius: 2
   };
 }

 document.querySelectorAll("canvas[id^='canvas_']").forEach(function(c){
   var ds = c.dataset;
   var labels = csvToArray(ds.labels);
   var datasets = [];

   [['series1Title','series1Data','series1Type','series1Color'],
    ['series2Title','series2Data','series2Type','series2Color'],
    ['series3Title','series3Data','series3Type','series3Color'],
    ['series4Title','series4Data','series4Type','series4Color']
   ].forEach(function(keys){
     var d = buildDataset(ds[keys[0].toLowerCase()], ds[keys[1].toLowerCase()], ds[keys[2].toLowerCase()], ds[keys[3].toLowerCase()]);
     if(d) datasets.push(d);
   });

   // Punto di equilibrio opzionale
   var eqx = Number(ds.eqx), eqy = Number(ds.eqy);
   if(!isNaN(eqx) && !isNaN(eqy)){
     datasets.push({
       label: 'Equilibrio',
       type: 'scatter',
       data: [{x:eqx, y:eqy}],
       showLine: false,
       pointRadius: 5,
       pointHoverRadius: 6,
       borderColor: "#000000",
       backgroundColor: "#000000"
     });
   }

   var numericLabels = labels.every(l => !isNaN(Number(l)));
   var cfg = {
     type: 'line',
     data: { labels: labels, datasets: datasets },
     options: {
       responsive: truthy(ds.responsive),
       maintainAspectRatio: false,
       plugins: {
         title: { display: !!ds.title, text: ds.title },
         legend: { display: truthy(ds.showLegend) },
         tooltip: { enabled: true }
       },
       elements: { line: { borderWidth: 2 } },
       scales: {
         x: numericLabels ? {
           type: 'linear',
           title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' },
           min: numOrUndef(ds.xmin), max: numOrUndef(ds.xmax)
         } : {
           type: 'category',
           title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' }
         },
         y: {
           title: { display: true, text: ds.yTitle || "Prezzo dell'affitto" },
           min: numOrUndef(ds.ymin), max: numOrUndef(ds.ymax),
           beginAtZero: false
         }
       }
     }
   };

   new Chart(c.getContext('2d'), cfg);
 });

})(); </script> {/literal}