<%@ include file="/shell/include.jsp" %> <html> <head> <j:initJavascript /> <ajax:initJavascript /> <script type="text/javascript" src="${j:getResourceUrlOfModule('shell', 'js/jquery-1.4.4.min.js')}"></script> <script type="text/javascript" src="${j:getResourceUrlOfModule('shell', 'js/jquery.json-2.4.min.js')}"></script> <script type="text/javascript" src="${j:getResourceUrl('js/Chart.min.js')}"></script> <script type="text/javascript" src="${j:getResourceUrl('js/Chart.bundle.min.js')}"></script> <script type="text/javascript" src="${j:getResourceUrl('js/chartjs-gauge.js')}"></script> <link rel="stylesheet" type="text/css" href="${j:getResourceUrlOfModule('shell', 'css/shell.css')}"> <link rel="stylesheet" type="text/css" href="${j:getResourceUrl('js/Chart.min.css')}"> <script type="text/javascript"> /** * Inizializzazione componenti */ var barChartLabels = []; var barChartValues = []; var pieChartLabels = []; var pieChartValues = []; var gaugeDataset = {}; Chart.defaults.global.defaultFontColor = "#2a4d70"; function initUI() { /** barChart */ var barChartCtx = document.getElementById('barChart').getContext('2d'); window.barChart = new Chart(barChartCtx, { type : 'bar', data : { labels : barChartLabels, datasets : [ { data : barChartValues, backgroundColor : [ 'rgba(34, 73, 122, 0.8)', 'rgba(130, 167, 209, 0.8)' ], borderColor : [ 'rgba(34, 73, 122, 1)', 'rgba(130, 167, 209, 1)' ], borderWidth : 2 } ] }, options : { legend : { display : false }, layout: { padding: { left: 0, right: 0, top: 16, bottom: 0 } }, scales : { yAxes : [ { ticks : { beginAtZero : true, callback : function(label, index, labels) { return formatAsValuta(label); }, fontSize : 10, fontColor : '#2a4d70' } } ], xAxes : [ { barPercentage : 0.4, ticks : { fontSize : 12, fontColor : '#2a4d70' } } ] }, events : [ 'click' ], animation : { "duration" : 1, "onComplete" : function() { var chartInstance = this.chart, ctx = chartInstance.ctx; ctx.fillStyle = '#2a4d70'; ctx.font = Chart.helpers.fontString( 12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function(dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); meta.data.forEach(function(bar, index) { var data = formatAsValuta(dataset.data[index]); ctx.fillText(data, bar._model.x, bar._model.y - 5); }); }); } } } }); document.getElementById("barChart").onclick = function(evt) { /** */ var activePoints = window.barChart.getElementsAtEvent(evt); if (activePoints.length > 0) { var clickedIdx = activePoints[0]["_index"]; onClickBarChart(clickedIdx); } } /** pieChart */ var pieChartCtx = document.getElementById('pieChart').getContext('2d'); window.pieChart = new Chart(pieChartCtx, { type : 'pie', data : { labels : pieChartLabels, datasets : [ { data : pieChartValues, backgroundColor : [ 'rgba(195, 93, 91, 0.8)', 'rgba(204, 221, 173, 0.8)', 'rgba(90, 137, 193, 0.8)', 'rgba(195, 181, 211, 0.8)', 'rgba(255, 212, 0, 0.8)' ] } ] }, options : { responsive : true, maintainAspectRatio : false, legend : { position : 'right', labels : { fontColor : '#2a4d70', fontSize : 12, boxWidth : 10, padding : 10 } } } }); /** gaugeChart */ var gaugeChartCtx = document.getElementById('gaugeChart').getContext( '2d'); gaugeDataset = { backgroundColor : [ 'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)' ], data : [ 0.9, 1, 1.5 ], value : 0, borderWidth : 2 } window.gaugeChart = new Chart(gaugeChartCtx, { type : 'gauge', data : { datasets : [ gaugeDataset ] }, legend : { display : false }, options : { circumference : 1.5 * Math.PI, rotation : -1.25 * Math.PI, cutoutPercentage : 70, responsive : true, title : { display : false, }, needle : { radiusPercentage : 2, widthPercentage : 4.2, lengthPercentage : 80, color : 'rgba(29, 70, 126, 1)' }, valueLabel : { display : false } } }); } function formatAsValuta(x) { var parts = x.toString().replace('.', ',').split(","); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "."); return '\u20AC ' + parts.join(","); } /** * Caricamento dati */ var vbDescriptions; var vbSummaryLabels; var vbSummaryValues; var vbDetailLabels; var vbDetailValues; var vbBudgets; var vbIdx; var vbType; function loadXmlData() { jsLoadXMLFromUrl(addParamsToUrl( juiceGetEvent('budget.getxmlVociBudget'), 'id=${id}'), _jsBudgetHandler, ''); } function _jsBudgetHandler(responseXML, functionName) { /** */ vbDescriptions = []; vbSummaryLabels = []; vbSummaryValues = []; vbDetailLabels = []; vbDetailValues = []; vbBudgets = []; vbIdx = 0; vbType = -1; /** */ if (responseXML != null) { /** */ var variableTags = responseXML.documentElement .getElementsByTagName('variable'); if (variableTags.length > 0) { for ( var i = 0; i < variableTags.length; i++) { var name = variableTags[i].getAttribute('name'); if (name.startsWith('Riepilogo')) { /** Riepilogo */ var description = getNodeValue(variableTags[i], 0, 0); vbDescriptions.push(description); var labels = [ getNodeValue(variableTags[i], 1, 0, 'Consolidato'), getNodeValue(variableTags[i], 2, 0, 'Previsione') ]; vbSummaryLabels.push(labels); var values = [ getNodeValue(variableTags[i], 1, 1, '0'), getNodeValue(variableTags[i], 2, 1, '0') ]; vbSummaryValues.push(values); if (values[0] != null && values[0] != 0) { vbType = 0; } else if (values[1] != null && values[1] != 0) { vbType = 1; } } else if (name.startsWith('Dettaglio')) { /** Dettaglio */ var cLabels = getNodeValues(variableTags[i], 0, 5); var cValues = getNodeValues(variableTags[i], 1, 5); var pLabels = getNodeValues(variableTags[i], 2, 5); var pValues = getNodeValues(variableTags[i], 3, 5); vbDetailLabels.push([ cLabels, pLabels ]); vbDetailValues.push([ cValues, pValues ]); } else if (name.startsWith('Budget')) { /** Budget */ var budget = getNodeValue(variableTags[i], 1, 0); vbBudgets.push(budget); } } } /** */ document.getElementById("selectVdb").options.length = 0; for ( var i = 0; i < vbDescriptions.length; i++) { var x = document.getElementById("selectVdb"); var option = document.createElement("option"); option.value = i; option.text = vbDescriptions[i]; x.add(option); } /** */ updateCharts(); } } function getNodeValue(variableTag, row, column, defaultValue) { try { var childNodes = variableTag.getElementsByTagName('row')[row] .getElementsByTagName('column')[column].childNodes; return childNodes.length == 0 ? (defaultValue ? defaultValue : null) : childNodes[0].nodeValue; } catch (error) { return defaultValue ? defaultValue : null; } } function getNodeValues(variableTag, row, n) { var result = []; for ( var i = 0; i < n; i++) { var e = getNodeValue(variableTag, row, i); if (e) { result.push(e); } } return result; } function updateCharts() { /** */ barChartLabels.length = 0; barChartValues.length = 0; for ( var i = 0; i < vbSummaryLabels[vbIdx].length; i++) { barChartLabels.push(vbSummaryLabels[vbIdx][i]); } for ( var i = 0; i < vbSummaryValues[vbIdx].length; i++) { barChartValues.push(vbSummaryValues[vbIdx][i]); } /** */ pieChartLabels.length = 0; pieChartValues.length = 0; if (vbType != -1) { for ( var i = 0; i < vbDetailLabels[vbIdx][vbType].length; i++) { pieChartLabels.push(truncateString( vbDetailLabels[vbIdx][vbType][i], 60)); } for ( var i = 0; i < vbDetailValues[vbIdx][vbType].length; i++) { pieChartValues.push(vbDetailValues[vbIdx][vbType][i]); } } /** */ var budget = parseFloat(vbBudgets[vbIdx]); var currentValue = (parseFloat(vbSummaryValues[vbIdx][0]) + parseFloat(vbSummaryValues[vbIdx][1])); currentValue = currentValue.toFixed(2); if (budget > 0) { gaugeDataset.data = [ budget * 0.9, budget, budget * 1.5 ]; gaugeDataset.value = Math.min(currentValue, budget * 1.5); gaugeDataset.backgroundColor = [ 'rgba(0, 158, 18, 0.8)', 'rgba(255, 216, 0, 0.8)', 'rgba(255, 0, 0, 0.8)' ]; document.getElementById("budgetValue").value = formatAsValuta(budget); document.getElementById("currentValue").value = formatAsValuta(currentValue); } else { gaugeDataset.data = [ 1 * 0.9, 1, 1 * 1.5 ]; gaugeDataset.value = 0; gaugeDataset.backgroundColor = [ 'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)' ]; document.getElementById("budgetValue").value = '---'; document.getElementById("currentValue").value = formatAsValuta(currentValue); } /** */ window.barChart.update(); window.pieChart.update(); window.gaugeChart.update(); } function truncateString(str, num) { if (str.length > num) { return str.slice(0, num) + "..."; } else { return str; } } /** * Gestione eventi */ function onChangeVoceBudget() { var selectInput = document.getElementById("selectVdb"); vbIdx = selectInput.options[selectInput.selectedIndex].value; updateCharts(); } function onClickBarChart(type) { vbType = type; updateCharts(); } $(document).ready(function() { initUI(); loadXmlData(); }); </script> </head> <body> <table border="0"> <tr> <td class="form-values" style="padding-top: 12px; font-size: 12px"> <center>Voce di budget</center> </td> <td class="form-values" style="padding-top: 12px; font-size: 12px"> <center>Budget</center> </td> </tr> <tr> <td> <center><select id="selectVdb" name="selectVdb" class="form-input" style="font-weight: bold; font-size: 13px" onchange="onChangeVoceBudget();" /></center> </td> <td class="form-values"> <center><input type="text" style="font-weight: bold; font-size: 13px; text-align: center; color: #2a4d70;" id="budgetValue" value="" readonly></center> </td> </tr> <tr> <td rowspan="2" style="padding: 20px 20px 20px 20px"> <div class="chart-container" style="position: relative; height:220px; width:400px"> <canvas id="barChart"></canvas> </div> </td> <td> <div class="chart-container" id="canvas-holder" style="position: relative; height:200px; width:300px"> <canvas id="gaugeChart"></canvas> </div> </td> </tr> <tr> <td class="form-values"> <center><input type="text" style="position: relative; bottom:55px; font-weight: bold; font-size: 13px; text-align: center; color: #2a4d70;" id="currentValue" value="" readonly></center> </td> </tr> <tr> <td colspan="2"> <div class="chart-container" style="position: relative; height:240px; width:600px; padding: 20px 20px 20px 20px"> <canvas id="pieChart"></canvas> </div> </td> </tr> </table> </body> </html>