Make a stacked graph showing compound interest in C#

[compound interest]

The example Show compound interest graphically in C# displays a graph showing contributions, compound interest, and total balance over time for a monthly investment strategy. This example may provide a better representation than that one. It shows the total contributions in green with the interested stacked on top in pink. The total balance in the account is the sum of the green and pink areas.

In other words, the total amount of interest in the account at a given month is the height of the pink section at that month. Similarly, the total amount of investment up to given month is the height of the green section at that month. The total balance in the account is the height of the whole graph from the red curve to the bottom.

This example differs from the previous one in a couple of ways. First it only stores the total balance and the total contributions at each month. It uses those values to draw the graph. The total balance indicates where the pink (compound interest) area should be drawn. The total contributions indicate where the green curve should be drawn.

The second difference between this program and the previous one is in how the program displays tooltips. In the previous version, you need to move the mouse over a data point such as the total compound interest or balance for a given month to see the value in a tooltip.

This example uses the mouse’s X position to determine which month that position represents. It then displays a tooltip giving the contributions, compound interest, and total balance at that month. It also draws a vertical line to mark the month on the graph.

The following code shows how the program displays the tooltip.

// The X coordinate of the mouse position.
private int MouseX = -1;

// Display the nearest month's values.
private void picGraph_MouseMove(object sender, MouseEventArgs e)
    if (Transform == null) return;
    if (Balance.Count < 3) return;

    // Find the month closest to the mouse.
    PointF[] points = { new PointF(e.X, 0) };
    int month = (int)Math.Round(points[0].X);

    string tip = "";
    if ((month >= 0) && (month < Balance.Count - 1))
        float interest = Balance[month].Y - Contributions[month].Y;
        tip = "Month: " + month.ToString() + "\nContributions: " +
            Contributions[month].Y.ToString("C") +
            "\nInterest: " + interest.ToString("C") +
            "\nTotal: " + Balance[month].Y.ToString("C");
        MouseX = e.X;
        MouseX = -1;

    // Display the new tool tip.
    if (tip != tipAmount.GetToolTip(picGraph))
        tipAmount.SetToolTip(picGraph, tip);
        Console.WriteLine("[" + tip + "]");

This method uses the inverse graphics transformation to convert the mouse’s X coordinate into a month number. If the month is between 0 and the maximum month plotted, the code composes the tooltip text. Then if the text is different from the previously displayed text, the method displays it.

The method also sets the MouseX variable to hold the selected month’s X coordinate. It then refreshes the PictureBox to make it redraw the graph with the month marked. That is relatively straightforward. Download the program and look at the Paint event handler to see how it works.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in algorithms, calculations, graphics, mathematics and tagged , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *