Skip to main content Skip to footer

Build a JavaScript Cash Flow Application with Cascading Sparklines

While spreadsheets are used in nearly every industry, they especially shine when working with many types of financial data. One such example is a Cash Flow Statement. Real-time and accurate information on the company’s cash inflows and outflows is critical to ensure business continuity and financial risk management, and spreadsheets are ideal for tracking this information.

In this article, we will show you how easily you can create your Cash Flow statement using Cascade Sparkline in SpreadJS. SpreadJS, our JavaScript spreadsheet, allows you to organize, analyze, and present financial data clearly and concisely.

  1. Cash Flow - Concept
  2. Cash Flow - Categories
  3. Header Section
  4. Entering Data
  5. Inserting Cascade Sparkline

Download the sample file here and follow along.

Cash Flow - Concept

Cash Flow refers to the net amount of cash and cash equivalents being transferred in and out of a company where cash received signifies inflows and cash spent signifies outflows.

To track all inflows/outflows of cash from operating, investing, and financing activities over a specific period, financial professionals create Cash Flow Statements to effectively manage company cash resources.

Cash Flow - Categories

In order to measure how effectively a company manages its cash position, companies establish statements including activities as shown below:

  • Cash from Operating activities

Operating activities involve cash inflows and outflows generated from the company's primary business operations. Here, we can mention payments to suppliers, revenue from sales, and salaries to employees.

  • Cash from Investing activities

Investing activities indicate cash inflows and outflows that result from buying and selling long-term assets. They can be stocks, property, or types of equipment.

  • Cash from Financing activities

Financing activities may involve cash inflows and outflows that result from raising and repaying debt, issuing and buying back stock, or paying dividends.

We will show you how to create this statement, which will give you the ability to track all of the above categories providing a comprehensive picture of your company's cash position, helping investors and managers understand how well the company manages and organizes its finances.

Let’s get started!

Ready to Get Started Now? Download our Free Trial of SpreadJS Today!

To create our "yearly statement of Cash Flow," we will use the SpreadJS Designer component, which is an optional add-on that is highly customizable and could be easily embedded into your web application.

JavaScript Cash Flow Application

Header Section

In the Header section of our Cash Flow Statement, we will specify the company’s name in the middle of the page by clicking on the Home tab, Alignment panel, and choosing the Merge & Center option.

JavaScript Cash Flow Application

The status of the year will be positioned in the right area of the Header section.

JavaScript Cash Flow Application

Under the header, we will create placeholders for Cash generated from Operating, Financing, and Investing activities using shapes. Simply add shapes to the designer worksheet by clicking on the Insert tab, Illustrations panel, and choosing the Shape option.

JavaScript Cash Flow Application

It will look as below:

JavaScript Cash Flow Application

Entering Data

After completing the first part of our Cash Flow Statement, we will start inputting data for the Operation Activities of the year in the first part of our Cash Flow Statement.

JavaScript Cash Flow Application

Total Cash generated by Operating Activities will be the sum of all cash inflows and outflows generated from the company's business operations:

JavaScript Cash Flow Application

In the second part, we will input data for the Investing Activities throughout the year.

JavaScript Cash Flow Application

As with the Operations, Total Cash generated by Investing Activities will be the sum of cash inflows and outflows that result from buying and selling long-term assets: =SUM(J22:J27).

Once we have inputted our data for the Investing Activities, we will move on to the final section, which will be the Financing Activities. It will refer to cash inflows and outflows related to debt and dividends as shown below:

JavaScript Cash Flow Application

Inserting Cascade Sparkline

To present effective information on how a company’s cash and cash equivalents change over a specific period and provide invaluable insight into a company's liquidity and ability to generate cash flow, we will use the Cascade Sparkline in the Cash Flow Statement created above.

Cascade Sparkline is generally used to analyze a value over time like yearly sales, total profit, etc. This sparkline is used widely in the sales, finance (mainly Profit and Loss statements), and construction sectors.

There are two ways of inserting Cascade Sparklines using SpreadJS.

In SpreadJS Designer, you can click the cell in which you want to insert a Sparkline and click the Insert tab, then select Cascade Sparkline from the Sparklines group:

JavaScript Cash Flow Application

Or select the destination cell and enter the formula for the Cascade Sparkline as below:

=CASCADESPARKLINE(pointsRange, pointIndex, labelsRange, minimum, maximum, colorPositive, colorNegative, vertical, itemTypeRange)

In our case, we have inserted the formula as: =CASCADESPARKLINE($J$10:$J$37,ROW()-9,$K$10:$K$37,,,,"#800000")

JavaScript Cash Flow Application

After creating a layout, our Cash Flow Statement will look as below:

JavaScript Cash Flow Application

By taking these steps, you will be able to prepare a statement that is accurate, comprehensive, and effectively analyzes your company's cash flow in SpreadJS.

If you'd like to learn more about what SpreadJS offers, download the free trial today!

Contact us to learn more at and visit the SpreadJS page.



comments powered by Disqus