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	E
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!B2:B5)
19	Top Region	=INDEX(Data!A2:A5, MATCH(MAX(Data!B2:B5), Data!B2:B5, 0))
20	Growth	=Data!F2

Sheet2 (Data Entry)

Where users can update the underlying data:

	A	B
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
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 Distribution
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
1	app	Sales Dashboard
2		chartOptions
3			palette	#3366cc, #dc3912, #ff9900, #109618
4			fontSize	medium
5			backgroundColor	white
6	view	Dashboard!A1:H20
7		name	Overview
8		backgroundColor	#f8f9fa
9		editable	B3
10		chart	A5:D15
11			source	Data!A1:B6
12			type	bar
13			sort	descending
14		chart	E5:H15
15			source	Data!A10:B15
16			type	pie
17		button	H20
18	view	’Data Entry’!A1:C9
19		name	Enter Data
20		editable	B4:B7
21		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>

Full-Page Dashboard

<!DOCTYPE html>
<html>
<head>
  <title>Sales Dashboard</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f0f2f5;
    }
    .header {
      background: #1a237e;
      color: white;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .header h1 {
      font-size: 24px;
      font-weight: 600;
    }
    .header .period {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header select {
      padding: 8px 15px;
      font-size: 14px;
      border: none;
      border-radius: 4px;
    }
    .dashboard-container {
      padding: 30px;
    }
    .metrics-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }
    .metric-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .metric-card .label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    .metric-card .value {
      font-size: 28px;
      font-weight: bold;
      color: #1a237e;
    }
    .metric-card .change {
      font-size: 14px;
      color: #4caf50;
      margin-top: 5px;
    }
    .charts-row {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }
    .chart-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .chart-card h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
    }
    .nexs-embed {
      width: 100%;
      min-height: 400px;
    }
  </style>
</head>
<body>

<div class="header">
  <h1>Sales Dashboard</h1>
  <div class="period">
    <span>Period:</span>
    <select class="nexs__input" data-nexs-cell-addr="Dashboard!B3">
      <option>Q1 2024</option>
      <option>Q2 2024</option>
      <option>Q3 2024</option>
      <option>Q4 2024</option>
    </select>
  </div>
</div>

<div class="dashboard-container">
  <div class="metrics-row">
    <div class="metric-card">
      <div class="label">Total Revenue</div>
      <div class="value">
        <span class="nexs__output_formatted" data-nexs-cell-addr="Dashboard!B18"></span>
      </div>
      <div class="change">+<span class="nexs__output_formatted" data-nexs-cell-addr="Dashboard!B20"></span> vs last quarter</div>
    </div>
    <div class="metric-card">
      <div class="label">Top Region</div>
      <div class="value">
        <span class="nexs__output_raw" data-nexs-cell-addr="Dashboard!B19"></span>
      </div>
    </div>
    <div class="metric-card">
      <div class="label">Active Products</div>
      <div class="value">4</div>
    </div>
  </div>

  <div class="charts-row">
    <div class="chart-card">
      <h3>Revenue by Region</h3>
      <!-- The NExS app handles the chart rendering -->
      <div class="nexs-embed">
        <script class="nexs"
          src="https://static.nexs.com/js/nexs_embed.js"
          data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
        </script>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Complete NExS.app Worksheet

	A	B	C	D
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
Custom styling with the Declarative API

Enhancements to Try

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

Next Steps

Charts Guide — All chart types and options
Deployment Modes — Share with your team
JavaScript API — Advanced interactivity