Break-even calculation and plotting the result

Calculating the break-even is a helpful tool in determining if a venture or project has the potential to succeed.
Here's how you do it and how to create an app simplifying the result's representation.

The break-even or break-even point is a tool used in economics to determine a project's potential.

It's often used in cost accounting and in my opinion very helpful (provided you know some numbers) in spotting if you're about to make some revenue. Or not!

Simply put, if your sales will be higher than the break-even point you're going to make a profit. If it's lower you're not.

Calculating the break-even point

Calculating the break-even point is fairly easy. You need to know some numbers, though!

First, you need to know your fixed costs related to the product's creation.

This might be office rent, costs for internet and phone, machines and computers and more. Things that you have to pay for running your project (or business) with or without producing or selling the actual product. So you might have to summarize any costs related to the project to get the sum of it.

Second, you need to know the variable (or running) costs. These are related to each piece and include any materials you need to produce your product. Like provisions, the time you (or others) need to invest to create each piece or even to transport the product. Again, you need to do some summarizing here.

Third, you need a price. You can set this by yourself, or it might already be set. Nonetheless, it should be quite higher than the variable costs. If you also know the potential number of items you're going to sell you can derive the minimum price by using that number in relation to the full costs (adding the fixed and variable costs).

This brings me to the last point. It's really helpful to know the potential amount of units going to be sold!

In the end, the whole calculation can be set into a time relation. Like per month, per day or per year.

So, we got

• (total) fixed Costs Cf
• variable Costs Cv
• the Price P
• amount of units to be sold Us

Using these we can now calculate the break-even point via the following formula:

X = Cf / P - Cv

So what about the Us? This is where you're going to make your decisions! If the value is higher than the calculated break-even: Depending on how much, you're clear to go on.

If it's less or exactly the same you're not going to see any profit continuing this project. Either you're able to reduce the costs, increase the price or increase the numbers sold or you should stop the project.

Creating a break-even calculation app

Knowing this, we can start creating an app calculating and plotting the results into a diagram.

So, what do we need for an app? TLDR: try it yourself!

Chart library

Some kind of diagram library. Over the past, I used quite a few. Namely, I started out using highcharts, later on, chart.js, chartist and very recently frappe charts. Staying with Open Source libraries for this project I tried apex charts.

I consider all of these projects a good fit for creating charts but since apex brought a variety of different chart types and is based on SVG it seemed to be the best choice for this project. Also, out of the box, apex gives you exports for SVG and PNG downloads amongst zooming in and out in your dataset.

Form

Next up, we need some form elements to get our input. To make it look pretty from the beginning I chose the tailwindcss based daisyUI. Implementation

Implementation

Well, this was mainly reading docs to include and use the libraries and writing markup.

And: I used modern JavaScript (ES6), so older browsers (I'm looking at you Internet Explorer!) won't be able to use it.

Here are a few things I learned and that might be useful for other projects as well:

1. Using an XMLHttpRequest in beforeunload event context doesn't work in Chrome.
2. Using a fetch request in beforeunload context has to be sent very fast (obviously). As within around 10ms.
3. You do not need to use an input file when building your tailwindcss: npx tailwindcss --no-autoprefixer -o ./dist/tailwind.css --minify.
4. Never forget to handle possible Infinity results when doing calculations in JavaScript! Although it's obvious, your CPU won't like that...
5. Apex charts aren't just shiny but easy to use as well
   
   

Usage logging

Not directly related but nonetheless a useful tool to see who's using the app and how I decided to add some usage logging compatible with GDPR. I had some very simple and basic implementations for a usage log so I used the existing code and improved it a bit. So I changed it to using ES6 and the fetch API instead of XMLHttpRequest.

Also, I made the PHP based backend as well as the logging frontend able to handle multiple logs per request instead of sending a new request for each log as the old simple implementation did.

Why implement this yourself, you may ask, since there are quite a handful of already existing applications out there? Good point and the only answer I have for you: Because I wanted to try this and see how simple and efficient such an implementation could be. And, well, because I can 😎.