Build a JavaScript Cash Flow Application with Cascading Sparklines
Tags: webdev, devops, javascript, tutorial
Published: 2023-05-08 20:35:42

---
canonical_url: https://developer.mescius.com/blogs/build-a-javascript-cash-flow-analysis-application-with-cascading-sparklines
description: Learn how to build a JavaScript cash flow application with cascading sparklines using SpreadJS spreadsheet components.
---
<span class="intro sm">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.</span>

<span class="intro sm">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.</span>

1.  [Cash Flow - Concept](#Cash)
2.  [Cash Flow - Categories](#Flow)
3.  [Header Section](#Header)
4.  [Entering Data](#Entering)
5.  [Inserting Cascade Sparkline](#Inserting)

Download the sample file [here](https://gccontent.blob.core.windows.net/gccontent/blogs/spread/20230417-cashflow-js/Demo_download.zip) and follow along.

### <a id="Cash"></a>**<span class="lg">Cash Flow - Concept</span>**

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.

### <a id="Flow"></a>**<span class="lg">Cash Flow - Categories</span>**

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!

To create our "yearly statement of Cash Flow," we will use the SpreadJS [Designer](https://developer.mescius.com/spreadjs/designer/index.html) component, which is an optional add-on that is highly customizable and could be easily embedded into your web application.

![Blank Worksheet](https://files.grapecity.com/gc-website-media/eitnha4c/sjs-designer.jpg?width=500&height=242)

### <a id="Header"></a>**<span class="lg">Header Section</span>**

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.

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1640" data-height="168" data-id="5776c496-7c24-4ef0-86ca-99590de3728e" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-7_13_1_21.jpg" data-file-size="164629" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-7_13_1_21.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/5776c496-7c24-4ef0-86ca-99590de3728e/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=392&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=5776c496-7c24-4ef0-86ca-99590de3728e&collection=contentId-3277980127&contextId=3277980127&height=168&width=1640&alt=)![Merge & Center option](https://files.grapecity.com/gc-website-media/ttvhztxf/merge-and-center.jpg?width=500&height=51)</div>

</div>

</div>

</div>

</div>

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

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1602" data-height="95" data-id="3d06a32b-b4ac-4c87-b756-6fa8be699561" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_16_1_44.jpg" data-file-size="20599" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_16_1_44.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/3d06a32b-b4ac-4c87-b756-6fa8be699561/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=226&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=3d06a32b-b4ac-4c87-b756-6fa8be699561&collection=contentId-3277980127&contextId=3277980127&height=95&width=1602&alt=)![Cash Flow statement header](https://files.grapecity.com/gc-website-media/5k4anmnv/header-section.jpg?width=500&height=30)</div>

</div>

</div>

</div>

</div>

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.

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="888" data-height="167" data-id="230e1e22-21ea-4ec1-9be9-fc7f2b40043c" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-7_13_3_15.jpg" data-file-size="97535" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-7_13_3_15.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/230e1e22-21ea-4ec1-9be9-fc7f2b40043c/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=722&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=230e1e22-21ea-4ec1-9be9-fc7f2b40043c&collection=contentId-3277980127&contextId=3277980127&height=167&width=888&alt=)![Shapes option](https://files.grapecity.com/gc-website-media/xlultimq/shapes.jpg?width=500&height=94)</div>

</div>

</div>

</div>

</div>

It will look as below:

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1600" data-height="168" data-id="5cd0a91d-8204-401e-859c-80017670f247" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_16_5_55.jpg" data-file-size="30884" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_16_5_55.jpg" data-test-progress="1">![Shapes preview](https://files.grapecity.com/gc-website-media/jpqpcwie/shapes-preview.jpg?width=500&height=53)![](https://api.media.atlassian.com/file/5cd0a91d-8204-401e-859c-80017670f247/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=402&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=5cd0a91d-8204-401e-859c-80017670f247&collection=contentId-3277980127&contextId=3277980127&height=168&width=1600&alt=)</div>

</div>

</div>

</div>

</div>

### <a id="Entering"></a>**<span class="lg">Entering Data</span>**

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.

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1172" data-height="433" data-id="81793cd7-fd5f-4765-9845-9453d9c32e11" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_15_37_26.jpg" data-file-size="116720" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_15_37_26.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/81793cd7-fd5f-4765-9845-9453d9c32e11/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=1418&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=81793cd7-fd5f-4765-9845-9453d9c32e11&collection=contentId-3277980127&contextId=3277980127&height=433&width=1172&alt=)![Operating activities](https://files.grapecity.com/gc-website-media/gs1moiaj/operating-activities.jpg?width=500&height=185)</div>

</div>

</div>

</div>

</div>

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

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1160" data-height="457" data-id="f9d42107-ef42-4e63-943a-c4c795a9478e" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_15_45_20.jpg" data-file-size="133711" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_15_45_20.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/f9d42107-ef42-4e63-943a-c4c795a9478e/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=1512&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=f9d42107-ef42-4e63-943a-c4c795a9478e&collection=contentId-3277980127&contextId=3277980127&height=457&width=1160&alt=)![Operating activities sum](https://files.grapecity.com/gc-website-media/5vypf3gi/operating-activities-sum.jpg?width=500&height=196.98275862068965)</div>

</div>

</div>

</div>

</div>

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

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1178" data-height="268" data-id="9ce3b4bb-e550-4511-906f-9a5c38c2a3da" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_16_14_41.jpg" data-file-size="114725" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_16_14_41.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/9ce3b4bb-e550-4511-906f-9a5c38c2a3da/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=872&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=9ce3b4bb-e550-4511-906f-9a5c38c2a3da&collection=contentId-3277980127&contextId=3277980127&height=268&width=1178&alt=)![Investing activities](https://files.grapecity.com/gc-website-media/lzpfshvg/investing-activities.jpg?width=500&height=113.7521222410866)</div>

</div>

</div>

</div>

</div>

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:

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1187" data-height="312" data-id="094e83ed-7b3e-4e87-be1f-03d3fb47fea8" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_16_56_46.jpg" data-file-size="118875" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_16_56_46.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/094e83ed-7b3e-4e87-be1f-03d3fb47fea8/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=1008&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=094e83ed-7b3e-4e87-be1f-03d3fb47fea8&collection=contentId-3277980127&contextId=3277980127&height=312&width=1187&alt=)![Financing activities](https://files.grapecity.com/gc-website-media/me4bxyyi/financing-activities.jpg?width=500&height=131.42375737152486)</div>

</div>

</div>

</div>

</div>

### <a id="Inserting"></a>**<span class="lg">Inserting Cascade Sparkline</span>**

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.

A [Cascade Sparkline](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Sparklines.CascadeSparkline#class-cascadesparkline) 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:

<div data-layout="center" data-width="82" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1040" data-height="180" data-id="ef24e8f9-712e-44e2-901a-eabd65faa37c" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-5_17_19_25.jpg" data-file-size="70672" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-5_17_19_25.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/ef24e8f9-712e-44e2-901a-eabd65faa37c/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=664&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=ef24e8f9-712e-44e2-901a-eabd65faa37c&collection=contentId-3277980127&contextId=3277980127&height=180&width=1040&alt=)![Sparklines group](https://files.grapecity.com/gc-website-media/0vsfjnlw/sparklines.jpg?width=500&height=86.53846153846155)</div>

</div>

</div>

</div>

</div>

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")**

![](https://api.media.atlassian.com/file/8955d147-0d55-4809-bccc-7da01ff74b28/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=3196&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=8955d147-0d55-4809-bccc-7da01ff74b28&collection=contentId-3277980127&contextId=3277980127&height=571&width=686&alt=)![Cascade Sparkline](https://files.grapecity.com/gc-website-media/1b3gk5re/cascade-sparkline.jpg?width=500&height=416)

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

<div data-layout="center" data-width="83" data-node-type="mediaSingle">

<div>

<div data-type="file" data-node-type="media" data-width="1392" data-height="822" data-id="fd56f983-876c-4ca6-8318-703ea6f420c0" data-collection="contentId-3277980127" data-file-name="fotor_2023-4-12_9_23_4.jpg" data-file-size="192723" data-file-mime-type="image/jpeg" data-alt="" data-context-id="3277980127">

<div id="newFileExperienceWrapper" data-testid="media-card-view">

<div data-testid="media-file-card-view" data-test-status="complete" data-test-media-name="fotor_2023-4-12_9_23_4.jpg" data-test-progress="1">![](https://api.media.atlassian.com/file/fd56f983-876c-4ca6-8318-703ea6f420c0/image?allowAnimated=true&client=866418b8-f32d-4169-81f3-5baec6a7271d&collection=contentId-3277980127&height=2266&max-age=2592000&mode=full-fit&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI4NjY0MThiOC1mMzJkLTQxNjktODFmMy01YmFlYzZhNzI3MWQiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0zMjc3OTgwMTI3IjpbInJlYWQiXX0sImV4cCI6MTY4MTc0NDU4MywibmJmIjoxNjgxNzQxNzAzfQ.jcr8fSqc0xXeIKk5dLTbyp_KfWl1aj5TDT0Ppq1SefE&width=3840#media-blob-url=true&id=fd56f983-876c-4ca6-8318-703ea6f420c0&collection=contentId-3277980127&contextId=3277980127&height=822&width=1392&alt=)![Cash Flow statement preview](https://files.grapecity.com/gc-website-media/slago21u/cash-flow-statement.jpg?width=500&height=295)</div>

</div>

</div>

</div>

</div>

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.