|
|
| (32 versioni intermedie di uno stesso utente non sono mostrate) |
| Riga 1: |
Riga 1: |
| <includeonly> | | <includeonly> |
| <div id="chartwrap_<!--{$id|escape:'html'}-->" | | <div id="chartwrap_<!--{$id}-->" |
| style="width:<!--{$width|default:600|escape:'html'}-->px;height:<!--{$height|default:380|escape:'html'}-->px;"> | | style="width:<!--{$width|default:600}-->px;height:<!--{$height|default:380}-->px;"> |
| <canvas id="canvas_<!--{$id|escape:'html'}-->" | | <canvas id="canvas_<!--{$id}-->" |
| width="<!--{$width|default:600|escape:'html'}-->" | | width="<!--{$width|default:600}-->" |
| height="<!--{$height|default:380|escape:'html'}-->" | | height="<!--{$height|default:380}-->"></canvas> |
| data-id="<!--{$id|escape:'html'}-->"
| | |
| data-title="<!--{$title|escape:'html'}-->"
| | <!-- Config INI dentro <pre hidden> --> |
| data-x-title="<!--{$xTitle|default:'Quantità di appartamenti'|escape:'html'}-->"
| | <pre id="cfg_<!--{$id}-->" hidden> |
| data-y-title="<!--{$yTitle|default:'Prezzo dell\'affitto'|escape:'html'}-->"
| | id=<!--{$id}--> |
| data-labels="<!--{$labels|default:'0,2,4,6,8,10'|escape:'html'}-->"
| | title=<!--{$title}--> |
| data-series1-title="<!--{$series1title|escape:'html'}-->"
| | xTitle=<!--{$xTitle}--> |
| data-series1-data="<!--{$series1data|escape:'html'}-->"
| | yTitle=<!--{$yTitle}--> |
| data-series1-type="<!--{$series1type|default:'line'|escape:'html'}-->"
| | labels=<!--{$labels}--> |
| data-series1-color="<!--{$series1color|escape:'html'}-->"
| | |
| data-series2-title="<!--{$series2title|escape:'html'}-->"
| | series1title=<!--{$series1title}--> |
| data-series2-data="<!--{$series2data|escape:'html'}-->"
| | series1data=<!--{$series1data}--> |
| data-series2-type="<!--{$series2type|default:'line'|escape:'html'}-->"
| | series1type=<!--{$series1type}--> |
| data-series2-color="<!--{$series2color|escape:'html'}-->"
| | series1color=<!--{$series1color}--> |
| 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 dal CDN --> | | series2title=<!--{$series2title}--> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | | series2data=<!--{$series2data}--> |
| | series2type=<!--{$series2type}--> |
| | series2color=<!--{$series2color}--> |
|
| |
|
| <script> | | series3title=<!--{$series3title}--> |
| (function(){
| | series3data=<!--{$series3data}--> |
| function csvToArray(str){ if(!str) return []; return str.split(',').map(s=>s.trim()); }
| | series3type=<!--{$series3type}--> |
| function csvToNum(str){ return csvToArray(str).map(v=>{const n=Number(v); return isNaN(n)?null:n;}); }
| | series3color=<!--{$series3color}--> |
| function truthy(s){ return String(s||'').toLowerCase() !== 'false'; }
| |
| function numOrUndef(s){ const n = Number(s); return isNaN(n) ? undefined : n; }
| |
|
| |
|
| document.querySelectorAll("canvas[id^='canvas_']").forEach(function(c){
| | series4title=<!--{$series4title}--> |
| var ds = c.dataset;
| | series4data=<!--{$series4data}--> |
| var labels = csvToArray(ds.labels);
| | series4type=<!--{$series4type}--> |
| var datasets = [];
| | series4color=<!--{$series4color}--> |
|
| |
|
| [['series1Title','series1Data','series1Type','series1Color'],
| | eqX=<!--{$eqX}--> |
| ['series2Title','series2Data','series2Type','series2Color'],
| | eqY=<!--{$eqY}--> |
| ['series3Title','series3Data','series3Type','series3Color'],
| | showLegend=<!--{$showLegend}--> |
| ['series4Title','series4Data','series4Type','series4Color']
| | responsive=<!--{$responsive}--> |
| ].forEach(function(keys){
| | xMin=<!--{$xMin}--> |
| var title = ds[keys[0].toLowerCase()], data = ds[keys[1].toLowerCase()],
| | xMax=<!--{$xMax}--> |
| type = ds[keys[2].toLowerCase()], color = ds[keys[3].toLowerCase()];
| | yMin=<!--{$yMin}--> |
| if(title && data){
| | yMax=<!--{$yMax}--> |
| datasets.push({
| | </pre> |
| label: title, data: csvToNum(data), type: (type||'line'),
| |
| fill: false, borderColor: color||undefined, backgroundColor: color||undefined,
| |
| tension: 0, pointRadius: 2
| |
| });
| |
| }
| |
| });
| |
|
| |
|
| var eqx = Number(ds.eqx), eqy = Number(ds.eqy);
| | <!-- opzionale: area debug tenuta nascosta --> |
| if(!isNaN(eqx) && !isNaN(eqy)){
| | <pre id="debug_<!--{$id}-->" hidden></pre> |
| datasets.push({
| | </div> |
| label: 'Equilibrio', type: 'scatter',
| |
| data: [{x:eqx, y:eqy}], showLine: false, pointRadius: 5, pointHoverRadius: 6,
| |
| borderColor: '#000', backgroundColor: '#000'
| |
| });
| |
| }
| |
|
| |
|
| var numericLabels = labels.every(l => !isNaN(Number(l)));
| | <script src="/resources/chart.umd.js" defer></script> |
| new Chart(c.getContext('2d'), {
| | <script src="/resources/widget-grafico.js" defer></script> |
| 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
| |
| }
| |
| }
| |
| }
| |
| });
| |
| });
| |
| })();
| |
| </script> | |
| </includeonly> | | </includeonly> |
