NExSDocs

Example: Sales Dashboard

This example builds an interactive sales dashboard with charts, multiple views, and dynamic filtering.

What We’re Building

A sales dashboard that:

  • Displays revenue by region with a bar chart
  • Shows product mix with a pie chart
  • Allows filtering by time period
  • Has separate views for overview and detailed data entry

Step 1: Create the Excel Spreadsheet

Sheet1 (Dashboard)

Layout for the dashboard view:

A B C D E F G H
1 Sales Dashboard
2
3 Time Period Q1 2024
4
5 (Chart area for regional sales - spans A5:D15) (Chart area for product mix - spans E5:H15)
6-15
16
17 Summary
18 Total Revenue =SUM(Data!B3:B6)
19 Top Region =INDEX(Data!A3:A6, MATCH(MAX(Data!B3:B6), Data!B3:B6, 0))
20 Growth =Data!F2

Sheet2 (Data Entry)

Where users can update the underlying data:

A B C
1 Enter Sales Data
2
3 Region Revenue
4 North 125000
5 South 98000
6 East 156000
7 West 112000
8
9 [Back to Dashboard]

Sheet3 (Data - Hidden calculations)

Chart source data and calculations:

A B C D
1 Regional Sales [Revenue ($)]
2 Region Q1 2024
3 North 125000
4 South 98000
5 East 156000
6 West 112000
A B
10 Product Mix
11
12 Product A 180000
13 Product B 145000
14 Product C 95000
15 Product D 71000
E F
1 Metrics
2 Growth 12%

Step 2: Configure Charts

Regional Sales Chart (Bar)

Source data in Data sheet, A1:B6:

A B
1 Regional Sales [Revenue ($)]
2 Region Q1 2024
3 North 125000
4 South 98000
5 East 156000
6 West 112000

Product Mix Chart (Pie)

Source data in Data sheet, A10:B15:

A B
10 Product Mix
11
12 Product A 180000
13 Product B 145000
14 Product C 95000
15 Product D 71000

Step 3: Configure NExS.app

A B C D E
1 app Sales Dashboard
2 mode open
3 chartOptions
4 palette #3366cc, #dc3912, #ff9900, #109618
5 fontSize medium
6 backgroundColor white
7 view Dashboard!A1:H20
8 name Overview
9 backgroundColor #f8f9fa
10 editable B3
11 chart A5:D15
12 source Data!A1:B6
13 type bar
14 sort descending
15 legend none
16 chart E5:H15
17 source Data!A10:B15
18 type pie
19 legend right
20 button H20
21 view ‘Data Entry’!A1:C9
22 name Enter Data
23 editable B4:B7
24 button A9

Step 4: Configure Buttons

Dashboard View - “Enter Data” Button (Dashboard H20)

Cell content: Edit Data {setView: 'Enter Data'}

Data Entry View - “Back” Button (Data Entry A9)

Cell content: Back to Dashboard {setView: 'Overview'}

Step 5: Add Time Period Filter

Create a dropdown for the time period:

In Excel, use Data Validation on Dashboard B3:

  • Allow: List
  • Source: Q1 2024, Q2 2024, Q3 2024, Q4 2024

Then use formulas in the Data sheet to look up values based on the selected period.

Example with VLOOKUP

Create a lookup table (Sheet4 - AllData):

A B C D E
1 Region Q1 2024 Q2 2024 Q3 2024 Q4 2024
2 North 125000 132000 145000 158000
3 South 98000 105000 112000 120000
4 East 156000 168000 175000 190000
5 West 112000 118000 125000 135000

In Data sheet, B3 formula:

=VLOOKUP("North", AllData!A:E, MATCH(Dashboard!B3, AllData!1:1, 0), FALSE)

Now changing the time period dropdown updates all the charts!

Step 6: Embed on Your Website

Basic Embed

<iframe
  src="https://platform.nexs.com/app/YOUR-APP-ID"
  width="900"
  height="600"
  style="border:0;">
</iframe>

Complete NExS.app Worksheet

A B C D E
1 app Sales Dashboard
2 mode open
3 chartOptions
4 palette #3366cc, #dc3912, #ff9900, #109618
5 fontSize medium
6 backgroundColor white
7 view Dashboard!A1:H20
8 name Overview
9 backgroundColor #f8f9fa
10 editable B3
11 chart A5:D15
12 source Data!A1:B6
13 type bar
14 sort descending
15 legend none
16 chart E5:H15
17 source Data!A10:B15
18 type pie
19 legend right
20 button H20
21 view ‘Data Entry’!A1:C9
22 name Enter Data
23 editable B4:B7
24 button A9

What You Learned

  • Creating dashboards with multiple charts
  • Configuring bar and pie chart types
  • Using chart options (sort, legend, palette)
  • Building multi-view apps
  • Dynamic data filtering with dropdowns
  • Using Excel formulas (VLOOKUP, INDEX/MATCH) for interactivity

Enhancements to Try

  1. Add more time periods — Extend the dropdown and lookup table
  2. Drill-down views — Add buttons on chart regions that navigate to detail views
  3. Export functionality — Add a button that triggers sendData for reports
  4. Team mode — Convert to team mode so multiple users can update data

Next Steps