--- title: "Getting Started with Dashboards" canonical: "https://wiki.yellowfinbi.com/space/yfcurrent/2204269/Getting%20Started%20with%20Dashboards" format: markdown --- > Macro (anchor) > Macro (toc) # Create a Dashboard ### Learning Outcomes After completing this section, you will be able to: - Create sub tabs using static or canvas layouts - Add Reports, graphics, images and text to a Dashboard - Add, link and style global and local filters - Add a button to navigate between sub tabs ### About Dashboards Dashboards can simultaneously show multiple Reports to users in a way that lets them quickly scan their key metrics without having to open each Report individually. Their interactive nature allows an engaging user experience that helps users monitor business performance and discover fresh insights. **Additional Learning:** See more information on [Dashboards](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Yellowfin+Dashboards). In this section, you’ll create a Dashboard with 2 sub tabs using the Reports you built in the [previous section](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Getting+Started+with+Reports).  ### Static Layout Sub Tab The first tab will be a financial overview using the “Getting Started Invoiced Summary” Report. We will build this Dashboard tab using a static layout. - Click the *Create * > Macro (inline-media-image) button and select “Dashboard”. > Macro (inline-media-image) - Enter “Getting Started Dashboard” as the* Dashboard Name*. - Choose “Getting Started View” as the *Default Data Set*. **Note:** This is optional. You can leave this field blank. - Choose the wireframe layout with the three horizontal boxes > Macro (inline-media-image) . Click **Create**. > Macro (inline-media-image) You are taken to the Dashboard Builder where you’ll add the Report and filters to your first sub tab. **Additional Learning:** See more information on the [Dashboard Builder](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Understanding+the+Dashboard+Builder). #### Adding a Report - Open the *Reports* section on the left panel. - Search for “Getting Started Invoice Summary”. Drag and drop the Report into the top content box. A popup window will appear asking whether you want to display the Table, one of the Charts, or the Multi-Chart Canvas. - Select the *Canvas*. Your Multi-Chart Canvas will appear in the content box. **Note:** In the Properties Panel, you can click **Select Visualization** to change the Chart shown on the Dashboard after you have dragged a Chart in. - Resize the content box to fit the entire canvas. **Note:** In this wireframe layout, you are only able to adjust the height of the visualizations selected. Later, when we use the canvas layout, you are able to choose the height, width, and location of each Report, text box, and widget down to the pixel. - Open the *Reports* section again and drag in the “Getting Started Invoice Summary” Report to the next content box. - This time, select the Time Series Line Chart from the options in the popup. > Macro (inline-media-image) Depending on the object you drag onto your Dashboard, you have settings available to edit. These settings can be edited in the Dashboard object’s Properties Panel. To access those settings, click on the Dashboard object and click on the Expand icon in the top right corner of the screen. > Macro (inline-media-image) - Click on the Time Series Chart. Open the *Report Properties* panel by clicking on the icon in the top right corner of the screen. > Macro (inline-media-image) **Additional Learning:** See more information on the [Report Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Reports#DashboardReports-Reportproperties). - Toggle on “Hide Report Name”. Notice the “Getting Started Invoice Summary” title of the Time Series Chart has been removed. You can always make it visible again by toggling off “Hide Report Name”. > Macro (inline-media-image) - On the top panel, select **Preview Mode**. You will now see the Dashboard as it will appear when published. The Time Series Chart’s unit selection is now visible. - Select the various time options to change the units of the horizontal axis. **Note:** In the Creating a Report section, you enabled “Visible Unit Selection” for this Time Series Chart. The unit selection is only visible when the Report or Dashboard has been published or is in Preview Mode. If you do not see the Unit Selection option while in Preview Mode, return to the [Create a Time Series Chart](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Getting+Started+with+Reports#GettingStartedwithReports-CreateaTimeSeriesChart) section to confirm you toggled on “Visible Unit Selection”. - Select **Edit Dashboard** to exit out of *Preview Mode*. **Additional Learning:** See more information on [Dashboard Reports](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Reports). #### Adding a Global Filter - Click on the *Filter* > Macro (inline-media-image) section on the left panel. - Drag in a *Vertical Filter* and place it in the *Global content here* box to the left of the sub tab content boxes. - Close the *Filter* panel. - Click on the **+ Filters** button. Select “Filter”. - Select “Gender” from one of the “Getting Started Invoice Summary” Report options. **Note:** The “Getting Started Invoice Summary” Report shows up twice as an Available Report when adding filters. This is because there are two separate objects on the Dashboard from the one Report: the Multi-Chart Canvas and the Line Chart. In this case, it does not matter which “Gender” filter you choose, since we will be linking them together later on. **Additional Learning:** See more information on [Dashboard filters](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Filters#DashboardFilters-Overview). - Click on the Dashboard margin, below the *Global content here* boxes. Open the *Dashboard Properties* panel at the top right corner. **Additional Learning:** See more information on the [Filter Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Filters#DashboardFilters-filterpropertiesFilterproperties). - Toggle from “Dashboard” to “Sub Tab”. - Enter “Financial Overview” as the *Name*. > Macro (inline-media-image) **Additional Learning:** See more information on [Dashboard Properties](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Creating+a+Dashboard#CreatingaDashboard-Dashboardproperties). ### Canvas Layout Sub Tab The second sub tab we’ll create will feature the Table and Charts from the “Getting Started Camp Summary” Report. We’ll use the canvas layout, where you’ll add text boxes, shapes, and a button widget. #### Add a Sub Tab: - Select “+ Create Sub Tab”. Enter “Camp Analysis” as the *Sub Tab Name*. - Choose the “Canvas” layout > Macro (inline-media-image) . Click Create. > Macro (inline-media-image) **Note:** Using either the sub tab names above the canvas, or in the left Sub Tab section, you can add, remove, rename, and reorder sub tabs. **Additional Learning:** See more information on [sub tabs](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Sub+Tabs). - Open the *Dashboard Properties Panel* and move to the *Sub Tab* section. > Macro (inline-media-image) **Additional Learning:** See more information on the [Sub Tab Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Sub+Tabs#DashboardSubTabs-SubTabProperties). - Under *Canvas Size, *enter “1,000” as the *Canvas Size Width *and* Height. *Toggle on *Lock Size.* > Macro (inline-media-image) For this sub tab, we’ll explore some more styling options available in the Dashboard Builder. We’ll start by changing the background canvas color to a light gray. - *Under **Canvas Design**, enter “#f6f6f6” as the **Background Color.* > Macro (inline-media-image) #### Adding Graphics Next, add a light blue rectangle to the sub tab. This will be the sub tab header background. - In the left hand side objects menu, open the *Graphics *section. Drag in the rectangle onto your canvas. - Click on the rectangle to open the *Shape Properties *panel on the right. **Additional Learning:** See more information on the [Graphic Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Graphics#DashboardGraphics-Graphicproperties). - Click on the Fill Color circle and change the *Fill Color *to “#d0e1e4”. Click **Submit**. - Click on the Stroke Color circle and change the *Stroke Color* to transparent > Macro (inline-media-image) . Click **Submit**. > Macro (inline-media-image) Like in the Multi-Chart Canvas, you can resize the rectangle using the *Size and Location *section. - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 0                                      Y: 0 Width: 1,000                   Height: 150 > Macro (inline-media-image) Now you’ll add three white rectangles to the sub tab. These will act as backgrounds for the Table and Charts you’ll add later. The white backgrounds will make the Charts and Table stand out on the Dashboard. - Drag in another rectangle. - Keep the *Fill Color*** **white and make the *Stroke Color* transparent. - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 24                                      Y: 170 Width: 250                         Height: 255 > Macro (inline-media-image) - Right click on the white rectangle and select “Duplicate”. - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 298                                  Y: 170 Width: 678                        Height: 255 > Macro (inline-media-image) - Right click on either of the white rectangles and select “Duplicate”, - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 24                                     Y: 449 Width: 952                        Height: 368 > Macro (inline-media-image) Now we have backgrounds for our header, Charts, and Table. **Additional Learning:** See more information on [Dashboard graphics](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Graphics). #### Adding Text Next, add a title to place in the header. - In the left hand side object menu, open the *Text *section. Drag in a “Header 2” text box. - Enter “Ski Camp Analysis” in the text box. Using the *Text Properties, *you can change the formatting and location of the text. **Additional Learning:** See more information on the [Text Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Text#DashboardText-TextWidgetProperties). - Increase the *Font Size* to “28” and make the *Style *“Bold”. - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 30                                      Y: 35 Width: 400                         Height: 62 > Macro (inline-media-image) We will later add the Numeric Display Chart showing the average “Camp Rating”. Add a title for the Chart for context. - Open the *Text *section. Drag in a “Paragraph Text” text box. - Enter “Average Camp Rating” in the text box. - Switch the *Alignment *to Center. - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 47                                   Y: 324 Width: 200                      Height: 38 > Macro (inline-media-image) **Additional Learning:** See more information on [Dashboard text](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Text). #### Adding an Image Style the sub tab to match the Ski Team brand by adding an image to the header. - In the left hand side object menu, open the *Images* section. Type “Cable Car” into the search bar. - Drag the “Cable Car” image onto the canvas. - Open the Images Properties Panel. **Additional Learning:** See more information on the [Image Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Images#DashboardImages-ImagePropertiespanel). - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 360                               Y: 0 Width: 640                    Height: 130 > Macro (inline-media-image) **Additional Learning:** See more information on [Dashboard images](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Images). Now that you have your backgrounds for the Report objects, drag in the 2 charts and table from the “Getting Started Camp Summary” report. #### Add a Report First, add the Numeric Display Chart showing the “Camp Rating”. We’ll place this KPI in the upper left white box, over the “Average Camp Rating” text.  - In the left hand side object menu, open the *Reports *> Macro (inline-media-image) section on the left panel. - Search “Getting Started Camp Summary”. Drag and drop the Report onto the canvas. - Select the Numeric Display Chart. - On the *Automatic Filter Linking* popup, select “Link Filters”. This automatically links the “Getting Started Camp Summary” “Gender” filter with the global “Gender” filter on the Dashboard. > Macro (inline-media-image) **Note:** If the Chart is behind the graphics, right click on the Chart. Hover over Arrange, and select “Bring to Front”. - Resize the Chart to fit in the upper left white box. Open the *Size & Location* section. Input the following coordinates and dimensions: X: 79                                  Y: 223 Width: 139                     Height: 115 > Macro (inline-media-image) Next to it, add the Stacked Horizontal Bar Chart showing “Invoiced Amount” by “Camp Region” with “Camp Demographic” as the color. - Open the *Reports*  > Macro (inline-media-image) section on the left panel. - Search “Getting Started Camp Summary”. Drag and drop the Report onto the canvas. - Select the Stacked Bar Chart. - On the *Automatic Filter Linking* popup, select “Link Filters”. This automatically links the “Getting Started Camp Summary” Gender filter with the global Gender filter on the Dashboard. - Drag the Chart to resize to fit in the top left white box. > Macro (inline-media-image) Finally, add the Table from the “Getting Started Camp Summary” Report to the third white box. - Open the *Reports*  > Macro (inline-media-image) section on the left panel. - Search “Getting Started Camp Summary”. Drag and drop the Report onto the canvas. - Select the Table. - On the *Automatic Filter Linking* popup, select “Link Filters”. This automatically links the “Getting Started Camp Summary” “Gender” filter with the global “Gender” filter on the Dashboard. - Drag the Table to resize to fit in the bottom white box. > Macro (inline-media-image) #### Adding Local Filters Let’s add the “Camp Filters” to the header so users can filter by “Camp Region” and “Camp Demographic” on the Report objects displayed in this sub tab. **Note: **The filter objects on the canvas act differently than the filter objects in Global content here boxes to the right and left of the canvas. Global filters, like our “Gender” filter, are visible on every Dashboard sub tab. Conversely, the filters on a sub tab canvas will only be visible on that one tab. - Click on the *Filters* section on the left panel. - Drag in a *Horizontal Filter* and place it under the “Ski Camp Analysis” title in the header. - In the *Widget Properties*, toggle on *Hide Control Panel *and *Hide Display Name.* - Open the *Size & Location* section. Input the following coordinates and dimensions: X: 24                           Y: 82 Width:                       400 **Note:** After adjusting the width of the filter panel, you may need to toggle on and off the Hide Display Name again. - Under *Background Formatting, **c*hange the* **Background Color** *to “#d0e1e4” to match the header. > Macro (inline-media-image) Now that you’ve formatted the filter object to blend in with the header, add the “Camp Region” and “Camp Demographic” filters. - Select the “+ Filters” button. Select “Filter”. - Select “Camp Region” and “Camp Demographic” from one of the “Getting Started Camp Summary” Report options. Select **Save**. **Note:** Again, the “Getting Started Camp Summary” Report shows up three times as an Available Report when adding filters. This is because there are three separate objects on the Dashboard from the one Report: the Numeric Display Chart, Stacked Horizontal Bar Chart, and the Table. In this case, it does not matter which “Camp Region” or “Camp Demographic” filter you choose, since we will be linking them together later on. **Note:** After adding the filters, you may need to toggle on and off the Hide Display Name again. #### Linking Filters After you’ve added filters to your dashboard, you can link them to other Reports on the Dashboard. This means that when a user applies a selected value to a Dashboard filter, all linked Reports will be updated accordingly. You can link filters automatically or manually. When you earlier selected “Link Filter” on the Automatic Filter Linking window, you enabled Automatic Filter Linking.* *In the next steps, you will manually link the filters or confirm that they were automatically linked successfully. **Additional Learning:** See more information on [filter linking](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Filter+Linking). First, link the “Camp Filters” on the “Camp Analysis” sub tab. - Select **Link Filters** above the local filter panel. - For the “Filter: Camp Region” section, select “Camp Region” for both the “Getting Started Camp Summary” filters. - For the “Filter: Camp Demographic” section, select “Camp Demographic” for both the “Getting Started Camp Summary” filters. Select **Apply**. **Note:** If you selected “Automatically Link Filters” after dragging in each Report, the “Camp Region” and “Camp Demographic” filters should already be selected. Next, link all Report objects on both sub tabs to the global “Gender” filter. - Select **Link Filters** above the global filter panel. - For all Reports, select “Gender”. Click **Apply**. **Note:** If you selected “Automatically Link Filters” after dragging in each Report, the “Gender” filters should already be selected. #### Adding a Button To complete our Dashboard, add an action button that allows users to navigate back to the “Financial Overview” sub tab from the “Camp Analysis sub tab. There are some built-in actions that are very simple to use; we’ll use one below. You also have the option to use Code Mode to create custom click events. **Additional Learning:** See more information on [built-in Dashboard action buttons](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Action+Buttons) and [code widgets](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Code+Widgets) for extended functionality. - In the left hand side object menu, open the *Widgets *> Macro (inline-media-image) section. - Open the *Buttons* section. - Drag in an Action button to the bottom right corner of the “Camp Analysis” tab. > Macro (inline-media-image) - Click on the button and open the *Button Widget Properties* panel. **Additional Learning:** See more information on the [Button Widget Properties Panel](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Action+Buttons#DashboardActionButtons-ActionButtonproperties). - Under *Actions*, select “Go to Sub Tab” as the *Click Event*. - Enter “1” as the *Sub Tab #*. **Note:** We could also select “Previous Sub Tab” for the Click Event to achieve the same purpose in this scenario. - Under Button Text, enter “Go to Financial Overview”. > Macro (inline-media-image) ### Interacting with your Dashboard Test out the features you’ve added to your Dashboard. - Select **Preview Mode**. You will now see the Dashboard as users will see it once the Dashboard is published. First, interact with the filters. - In the “Camp Analysis” sub tab, select “Asia” and “Europe” in the “Camp Region” filter. - Select “Adventure”, “Luxury”, and “Sport” in the “Camp Demographic” filter. - Click **Apply** to update the Dashboard. Notice how all three Report objects on the sub tab (Numeric Display Chart, Stacked Horizontal Bar Chart, and Table) updated to match the inputted filters. > Macro (inline-media-image) - Now, select “Male” from the “Gender” global filter. Click **Apply**. Notice how all three Report objects on the sub tab are updated to show data only matching “Male” athletes. - On the top panel, click on the “Financial Overview” sub tab. Notice how the global “Gender” filter is still selected as “Male”. Both Report objects on this sub tab are now only showing data matching “Male” athletes as well. > Macro (inline-media-image) Stay on this tab to Drill Down from region to country using the hierarchy defined in the view. - Select **Reset** on the global filter to show both “Male” and “Female”. - In the Column Chart showing “Invoiced Amount” by “Region”, click on a section of the chart. The horizontal axis should drill from regions to countries in the selected region. > Macro (inline-media-image) You can also interact with Drill Throughs on Dashboards to view the data from Tables or Charts in more detail. - Return to the “Camp Analysis” sub tab. Keep the “Camp Region” and “Camp Demographic” filters you’ve applied. - Select “Female” on the “Gender” global filter. **Note:** You should still be in Preview Mode. Drill Throughs are visible and enabled in *Preview Mode*, as well as after the Report or Dashboard has been published, but not in *Edit Mode*. - In the Table, click on a value in the “Invoiced Amount” hyperlinked field to Drill Through to the “Getting Started Camp Details” Report. Notice how all filters are being passed through, including the local “Camp Region” and “Camp Demographic” filters, as well as the global “Gender” filter. The “Invoiced Amount” in the “Getting Started Camp Summary” Report matches the total sum in the “Getting Started Camp Details” Report. > Macro (inline-media-image) - Now click on a segment of the Stacked Horizontal Bar Chart. Your Drill Through can be activated by clicking here in addition to selecting the blue text “Invoiced Amount” in the Table. > Macro (inline-media-image) Finally, test your action button. - Click on the “Go to Financial Overview” button. You should be directed to the “Financial Overview” sub tab. > Macro (inline-media-image) You now have a complete Dashboard, with multiple tabs, Reports, Charts, filters, graphics, and more. You’ve applied multiple interactive components to your Dashboard, such as visible unit selection, Drill Downs, Drill Throughs, global and local filters, and an action button. Continue to publish your Dashboard and then to connect to your own data sources. ### Publish the Dashboard - Click **Publish** on the top right. - Enter “Getting Started Dashboard” as the *Dashboard Name*. - Enter “An overview of the camps and athletes included in the Ski Team. Features two sub tabs, one focused on the financial summary, the other an analysis of the ski camps.” as the *Description*. - Place it in the “Getting Started with Yellowfin” Folder and “Content” Sub-Folder. - **Save** the Dashboard. > Macro (inline-media-image) **Additional Learning:** See more information on the [Dashboard main page](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Interactions). **Additional Learning:** With minimal code, you can extend your Yellowfin to further meet your needs and add to the functionality and aesthetic of your Dashboard. See more information on [Code Mode](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Dashboard+Code+Mode). You’ve built this dashboard with the existing Ski Team data source to get the feel of Yellowfin. The next step is to connect to your own [Data Source](https://yellowfin.atlassian.net/wiki/display/yfcurrent/Getting+Started+with+Connecting+Data+Sources) to build content with your own data.