Skip to content
Snippets Groups Projects
Select Git revision
  • 122cdff9ef162ed7c1a5bfadffb8a9abcc7e6aa7
  • master default
  • renovate/opencsv.version
  • renovate/org.springframework.boot-spring-boot-starter-parent-3.x
  • renovate/junit-jupiter-engine.version
  • renovate/selenium.version
  • renovate/testcontainer.version
  • demo
  • v1_8_1
  • v2.18.1
  • v2.18.0
  • v2.17.2
  • v2.17.1
  • v2.17.0
  • v2.16.1
  • v2.16.0
  • v2.15.1
  • v2.15.0
  • v2.14.0
  • v2.13.0
  • v2.12.0
  • v2.11.0
  • v2.10.0
  • v2.9.2
  • v2.9.1
  • v2.9.0
  • v2.8.0
  • testPipeline2
  • v2.7.0
29 results

IncomesAndExpendituresByCategoryBar.js

Blame
  • IncomesAndExpendituresByCategoryBar.js 3.10 KiB
    /* 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 incomes = [];
    var expenditures = [];
    
    for(var i = 0; i < transactionData.length; i++)
    {
        var transaction = transactionData[i];
    
        var categoryName = transaction.category.name;
        // create new category is not already in dict
        if(!categoryNames.includes(categoryName))
        {
            categoryNames.push(categoryName);
            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 percentageIncome = (100 / totalIncomes) * incomes[j];
        var percentageExpenditure = (100 / totalExpenditures) * expenditures[j];
    
        var textIncome = prepareHoverText(percentageIncome, incomes[j]);
        var textExpenditure = prepareHoverText(percentageExpenditure, expenditures[j]);
    
        plotlyData.push({
            x: [percentageExpenditure, percentageIncome],
            y: [localizedData['label1'], localizedData['label2']],
            orientation: 'h',
            type: 'bar',
            hoverinfo: 'text',
            text: [textExpenditure, textIncome],
            name: categoryNames[j]
        });
    }
    
    
    // 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'
    };
    
    // Add your Plotly configuration settings here (optional)
    var plotlyConfig = {
        showSendToCloud: false,
        displaylogo: false,
        showLink: false,
        responsive: true
    };
    
    // Don't touch this line
    Plotly.newPlot('chart-canvas', plotlyData, plotlyLayout, plotlyConfig);
    
    
    function prepareHoverText(percentage, value)
    {
        value = value / 100;
        return percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')';
    }