> For the complete documentation index, see [llms.txt](https://docs.infotopics.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.infotopics.com/trulyp/analytics/create-an-app.md).

# Create your first app

In this tutorial you build a sales dashboard with KPI cards, a filter and four charts. It takes about ten minutes. The screenshots use the Floraya sample data, but you can follow along with any semantic model.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-3e5050aa0cb1dd76c91e1333c14038fd2eb9a9c0%2FAnalytics_Tutorial_08_View_Mode.png?alt=media" alt="The finished sales dashboard"><figcaption><p>What you will build</p></figcaption></figure>

{% hint style="info" %}
You need the **Analytics Creator** role and access to at least one [semantic model](/trulyp/data/semantic-modeling.md).
{% endhint %}

{% stepper %}
{% step %}

### Create the app

1. Go to **Analytics** and click **Create app** at the top right.
2. A new app called **Dashboard 1** (or **Dashboard 2**, and so on) opens in the editor.
3. Click the name at the top left and type a better one, for example **Sales overview**.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-4000a506a7ac7a5c68537c508e220718c1d18446%2FAnalytics_Editor_New_App.png?alt=media" alt="A new, empty app in the editor"><figcaption></figcaption></figure>

The editor has three areas: the toolbar at the top, the canvas on the left, and the panel with the tabs **Visuals**, **Edit visual**, **Data**, **Layers** and **Dashboard** on the right. See [The app editor](/trulyp/analytics/the-app-editor.md) for a full tour.
{% endstep %}

{% step %}

### Connect your data

A new app opens on the **Data** tab. Under **Available models** you see the semantic models you have access to.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-4000a506a7ac7a5c68537c508e220718c1d18446%2FAnalytics_Editor_New_App.png?alt=media" alt="The Connect your data panel"><figcaption></figcaption></figure>

Click **Connect** next to the model you want to use. It moves to **Connected**, and its fields appear in the **Fields** list next to it.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-0976786f77ca17718d429906fe5a28bb7a10b86b%2FAnalytics_Data_Connected.png?alt=media" alt="A connected semantic model and its fields"><figcaption></figcaption></figure>

Don't have a semantic model for your data yet? You can also [import an Excel or CSV file](/trulyp/analytics/data-sources-and-fields.md#import-an-excel-or-csv-file).
{% endstep %}

{% step %}

### Add a KPI card

1. Open the **Visuals** tab and click **KPI Card**. The card appears on the canvas and the **Edit visual** tab opens.
2. Under **Value**, click **+ Choose field** and pick a measure, for example `net_sales`. The card shows the total.
3. Open the **Titles** tab and type a title, for example **Net sales**.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-2b211a920676adbde333946581af30add91f2bda%2FAnalytics_Tutorial_03_KPI_Card.png?alt=media" alt="A KPI card showing net sales"><figcaption></figcaption></figure>

To show the value as currency, open the **Styling** tab, expand **Data labels**, set **Measure format** to **Currency**, enter a **Currency code** such as `EUR` and set **Decimal places** to `0`.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-b4b577706e154cdee8dafc9f3167304baf4c0ed8%2FAnalytics_Tutorial_04_KPI_Format.png?alt=media" alt="Formatting a KPI card as currency" width="320"><figcaption></figcaption></figure>

Repeat this for **Gross margin** and **Units sold**.

{% hint style="success" %}
**Tip:** you can also double-click a field in the **Fields** list (or select it and press **Enter**) to add it to the selected visual. Trulyp puts it in the first slot that fits.
{% endhint %}
{% endstep %}

{% step %}

### Add a filter

1. In the **Visuals** tab, scroll to **Dashboard Objects** and click **Filter**.
2. Set **Data source** to your model and **Dimension** to the field you want to filter on, for example `channel`.
3. Under **Filter target visuals**, tick every visual the filter should affect.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-af28c124f65ff6362dccc22852bca9c2208d4ce4%2FAnalytics_Tutorial_06_Filter_Targets.png?alt=media" alt="Choosing which visuals a filter affects"><figcaption></figcaption></figure>

{% hint style="warning" %}
A new filter does not affect any visual until you tick them under **Filter target visuals**. Visuals you add later must be ticked too.
{% endhint %}
{% endstep %}

{% step %}

### Add charts

**A line chart over time**

1. Click **Line** in the **Visuals** tab.
2. Under **Category / X axis** choose a date field, for example `order_date`. Dates are grouped by year by default; change the grouping next to the field to **Month** (under **Continuous**) to see a monthly trend.
3. Under **Value / Y axis** choose `net_sales`.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-6d3f7b81f5790eca39a402b5680efcab039b6312%2FAnalytics_Tutorial_05_Line_Chart.png?alt=media" alt="Building a monthly line chart"><figcaption></figcaption></figure>

**A bar chart and a donut**

* Add a **Bar** chart with `channel` on the X axis and `net_sales` as the value. On the **Options** tab, click **Horizontal** to turn it into a horizontal bar chart. On the **Styling** tab, switch on **Show value labels** under **Data labels**.
* Add a **Donut** with `primary_flower` as **Slice category** and `net_sales` as **Slice size**.
* Add a **Heatmap** with `day_of_week` as **X category**, `channel` as **Y category** and `quantity` as **Color value**.

See [Visuals](/trulyp/analytics/visuals.md) for every chart type and the fields it needs.
{% endstep %}

{% step %}

### Arrange the canvas

* **Move** a visual by dragging it.
* **Resize** it by dragging one of its edges or corners.
* Visuals snap to a grid of 48 columns and push each other out of the way, so they never overlap. If you want to place visuals on top of each other, switch to **Freeform** on the **Layers** tab.

<figure><img src="https://2312557015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWbWxEBax8PKTjFYRLWgi%2Fuploads%2Fgit-blob-8b93574079a466b98d0f849c9cc22b13a847533a%2FAnalytics_Tutorial_07_Editor_Finished.png?alt=media" alt="The arranged dashboard in the editor"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Save and preview

* Click **Save** (or press **Ctrl+S** / **Cmd+S**). Trulyp also saves automatically every two minutes, but only a manual save updates the thumbnail on the home page.
* Click **Preview** to see the app as your viewers will. Click **Edit** to return to the editor.

In view mode, try clicking a bar: the other visuals filter to that channel. See [Filters and interactivity](/trulyp/analytics/filters-and-interactivity.md).
{% endstep %}

{% step %}

### Share it

Click **Share** to copy a link, get an embed code or download a Tableau extension file, or use **…** > **Manage sharing** to give colleagues access. See [Sharing and embedding](/trulyp/analytics/sharing-and-embedding.md).
{% endstep %}
{% endstepper %}

### Next steps

* Add more pages with the **+** next to the page tabs, and link them with [buttons](/trulyp/analytics/visuals/dashboard-objects.md#button).
* Create [calculations](/trulyp/analytics/calculations.md) such as margin percentages or share of total.
* Change the look of the whole app in the [Dashboard settings](/trulyp/analytics/global-chart-options.md).
* Let [Vizzy AI](/trulyp/analytics/vizzy-ai-in-analytics.md) improve your dashboard even further!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.infotopics.com/trulyp/analytics/create-an-app.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
