/* This list will be dynamically filled with all the transactions between * the start and and date you select on the "Show Chart" page * and filtered according to your specified filter. * An example entry for this list and tutorial about how to create custom charts ca be found in the BudgetMaster wiki: * https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts */ var transactionData = []; // Note: All variables starting with "localized" are only available inside default charts. var categoryNames = []; var colors = []; var incomes = []; var expenditures = []; for(var i = 0; i < transactionData.length; i++) { var transaction = transactionData[i]; var categoryName = transaction.category.name; // create new category if not already in dict if(!categoryNames.includes(categoryName)) { categoryNames.push(categoryName); colors.push(transaction.category.color); incomes.push(0); expenditures.push(0); } // determine index of categoryName in list because the transactions are not ordered by category and some categories // will be missing either for income or expenditures var index = categoryNames.indexOf(categoryName); // add to income or expenditure sum var amount = transaction.amount; if(amount > 0) { incomes[index] = incomes[index] + amount; } else { expenditures[index] = expenditures[index] + Math.abs(amount); } } // calculate total sums var totalIncomes = 0; var totalExpenditures = 0; incomes.forEach(function(value) { totalIncomes += value; }); expenditures.forEach(function(value) { totalExpenditures += value; }); // Prepare your chart settings here (mandatory) var plotlyData = []; for(var j = 0; j < categoryNames.length; j++) { var currentName = categoryNames[j]; var percentageIncome = (100 / totalIncomes) * incomes[j]; var percentageExpenditure = (100 / totalExpenditures) * expenditures[j]; var textIncome = prepareHoverText(currentName, percentageIncome, incomes[j]); var textExpenditure = prepareHoverText(currentName, percentageExpenditure, expenditures[j]); // add border if category color is white var borderWidth = 0; if(colors[j].toUpperCase().startsWith('#FFFFFF')) { borderWidth = 1; } plotlyData.push({ x: [percentageExpenditure, percentageIncome], y: [localizedData['label1'], localizedData['label2']], orientation: 'h', type: 'bar', hoverinfo: 'text', hovertext: [textExpenditure, textIncome], name: currentName, marker: { color: colors[j], // use the category's color line: { color: '#212121', width: borderWidth } } }); } // Add your Plotly layout settings here (optional) var plotlyLayout = { title: { text: localizedTitle }, xaxis: { showgrid: false, showticklabels: false }, yaxis: { tickangle: 90, tickfont: { family: 'sans-serif', size: 14, color: 'black' }, }, barmode: 'stack', hovermode: 'closest' // show hover popup only for hovered item }; // Add your Plotly configuration settings here (optional) var plotlyConfig = { showSendToCloud: false, displaylogo: false, showLink: false, responsive: true, displayModeBar: true, toImageButtonOptions: { format: 'png', filename: 'BudgetMaster_chart_export', height: 1080, width: 1920, } }; // Don't touch this line Plotly.newPlot("containerID", plotlyData, plotlyLayout, plotlyConfig); function prepareHoverText(categoryName, percentage, value) { value = value / 100; return categoryName + ' ' + percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')'; }