|
|
| (33 versioni intermedie di uno stesso utente non sono mostrate) |
| Riga 1: |
Riga 1: |
| <!-- Widget:Grafico — Chart.js con supporto a 4 serie + punto di equilibrio --> | | <includeonly> |
| <div id="chartwrap_<!--{$id|escape:'html'}-->" | | <div id="chartwrap_<!--{$id}-->" |
| style="width:<!--{$width|default:600|escape:'html'}-->px; | | style="width:<!--{$width|default:600}-->px;height:<!--{$height|default:380}-->px;"> |
| height:<!--{$height|default:380|escape:'html'}-->px;">
| | <canvas id="canvas_<!--{$id}-->" |
| <canvas id="canvas_<!--{$id|escape:'html'}-->" | | width="<!--{$width|default:600}-->" |
| width="<!--{$width|default:600|escape:'html'}-->" | | height="<!--{$height|default:380}-->"></canvas> |
| height="<!--{$height|default:380|escape:'html'}-->" | |
| data-id="<!--{$id|escape:'html'}-->"
| |
| data-title="<!--{$title|escape:'html'}-->"
| |
| data-x-title="<!--{$xTitle|default:'Quantità di appartamenti'|escape:'html'}-->"
| |
| data-y-title="<!--{$yTitle|default:'Prezzo dell\'affitto'|escape:'html'}-->"
| |
| data-labels="<!--{$labels|default:'0,2,4,6,8,10'|escape:'html'}-->"
| |
| data-series1-title="<!--{$series1title|escape:'html'}-->"
| |
| data-series1-data="<!--{$series1data|escape:'html'}-->"
| |
| data-series1-type="<!--{$series1type|default:'line'|escape:'html'}-->"
| |
| data-series1-color="<!--{$series1color|escape:'html'}-->"
| |
| data-series2-title="<!--{$series2title|escape:'html'}-->"
| |
| data-series2-data="<!--{$series2data|escape:'html'}-->"
| |
| data-series2-type="<!--{$series2type|default:'line'|escape:'html'}-->"
| |
| data-series2-color="<!--{$series2color|escape:'html'}-->"
| |
| data-series3-title="<!--{$series3title|escape:'html'}-->"
| |
| data-series3-data="<!--{$series3data|escape:'html'}-->"
| |
| data-series3-type="<!--{$series3type|default:'line'|escape:'html'}-->"
| |
| data-series3-color="<!--{$series3color|escape:'html'}-->"
| |
| data-series4-title="<!--{$series4title|escape:'html'}-->"
| |
| data-series4-data="<!--{$series4data|escape:'html'}-->"
| |
| data-series4-type="<!--{$series4type|default:'line'|escape:'html'}-->"
| |
| data-series4-color="<!--{$series4color|escape:'html'}-->"
| |
| data-eqx="<!--{$eqX|escape:'html'}-->"
| |
| data-eqy="<!--{$eqY|escape:'html'}-->"
| |
| data-show-legend="<!--{$showLegend|default:'true'|escape:'html'}-->"
| |
| data-responsive="<!--{$responsive|default:'true'|escape:'html'}-->"
| |
| data-xmin="<!--{$xMin|escape:'html'}-->"
| |
| data-xmax="<!--{$xMax|escape:'html'}-->"
| |
| data-ymin="<!--{$yMin|escape:'html'}-->"
| |
| data-ymax="<!--{$yMax|escape:'html'}-->"
| |
| ></canvas>
| |
| </div>
| |
|
| |
|
| <!-- Chart.js (CDN) --> | | <!-- Config INI dentro <pre hidden> --> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | | <pre id="cfg_<!--{$id}-->" hidden> |
| | id=<!--{$id}--> |
| | title=<!--{$title}--> |
| | xTitle=<!--{$xTitle}--> |
| | yTitle=<!--{$yTitle}--> |
| | labels=<!--{$labels}--> |
|
| |
|
| {literal} | | series1title=<!--{$series1title}--> |
| <script> | | series1data=<!--{$series1data}--> |
| (function(){
| | series1type=<!--{$series1type}--> |
| function csvToArray(str){ if(!str) return []; return str.split(',').map(s=>s.trim()); }
| | series1color=<!--{$series1color}--> |
| 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){
| | series2title=<!--{$series2title}--> |
| if(!title || !data) return null;
| | series2data=<!--{$series2data}--> |
| return {
| | series2type=<!--{$series2type}--> |
| label: title,
| | series2color=<!--{$series2color}--> |
| 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){
| | series3title=<!--{$series3title}--> |
| var ds = c.dataset;
| | series3data=<!--{$series3data}--> |
| var labels = csvToArray(ds.labels);
| | series3type=<!--{$series3type}--> |
| var datasets = [];
| | series3color=<!--{$series3color}--> |
|
| |
|
| [['series1Title','series1Data','series1Type','series1Color'],
| | series4title=<!--{$series4title}--> |
| ['series2Title','series2Data','series2Type','series2Color'],
| | series4data=<!--{$series4data}--> |
| ['series3Title','series3Data','series3Type','series3Color'],
| | series4type=<!--{$series4type}--> |
| ['series4Title','series4Data','series4Type','series4Color']
| | series4color=<!--{$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
| | eqX=<!--{$eqX}--> |
| var eqx = Number(ds.eqx), eqy = Number(ds.eqy);
| | eqY=<!--{$eqY}--> |
| if(!isNaN(eqx) && !isNaN(eqy)){
| | showLegend=<!--{$showLegend}--> |
| datasets.push({
| | responsive=<!--{$responsive}--> |
| label: 'Equilibrio',
| | xMin=<!--{$xMin}--> |
| type: 'scatter',
| | xMax=<!--{$xMax}--> |
| data: [{x:eqx, y:eqy}],
| | yMin=<!--{$yMin}--> |
| showLine: false,
| | yMax=<!--{$yMax}--> |
| pointRadius: 5,
| | </pre> |
| pointHoverRadius: 6,
| |
| borderColor: "#000000",
| |
| backgroundColor: "#000000"
| |
| });
| |
| }
| |
|
| |
|
| var numericLabels = labels.every(l => !isNaN(Number(l)));
| | <!-- opzionale: area debug tenuta nascosta --> |
| var cfg = {
| | <pre id="debug_<!--{$id}-->" hidden></pre> |
| type: 'line',
| | </div> |
| 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 src="/resources/chart.umd.js" defer></script> |
| });
| | <script src="/resources/widget-grafico.js" defer></script> |
| })();
| | </includeonly> |
| </script> | |
| {/literal}
| |
