Dashboard Designer
  • 17 Minutes to read
  • Dark
    Light
  • PDF

Dashboard Designer

  • Dark
    Light
  • PDF

Article summary

To launch Dashboard Designer to create your own dashboard, click the plus icon (shown below) from the Dashboard Organizer.

image669.png

How To Add a Dashboard and a Chart

  1. Enter a dashboard name.

  2. Select a chart from the right pane and drop it on the gray canvas to start visualizing your data.

    In the image below, the bar chart is dropped on the gray canvas.

    image1458.png

  3. Click Add to select dimension members for each axis. For information on how to do so, see How to Add Dimensions to Each Chart Axis.

  4. For each axis, you can enter a name in the Enter Axis name field. You can use substitution variables in the Axis Name field. For more information, see Using Substitution Variables for Chart Titles, SubTitles, and Axis.

  5. Enter a title and subtitle for the chart by clicking the fields. You can use substitution variables in the chart title and subtitle. For more information, see Using Substitution Variables for Chart Titles, SubTitles and Axis.

  6. Click the tick icon shown below to save the chart.

    image691.png

Note:
You can drag and drop charts between two existing objects so that new charts can be added wherever like.

How to Add Dimensions to Each Chart Axis

By clicking the Add Dimensions button, you can search and add dimensions to the chart and complete the member selections. All dimensions of the Financial, Workforce, and Scorecard Reporting Areas and their main, alternate, and attribute hierarchies are available in Dashboards. You can also include Calculated Members from the Account hierarchy. A maximum of 2 dimensions can be added on each row and column axis for charts.There is no limit for to the number of dimensions selected for chart filters.

  1. Click Add Dimensions for a chart axis.

  2. A list-box appears. Select how you want the dimension member you select displayed in the chart. You can select Label (combination of code and name), Code only, or Name only. Then, scroll up and down or search to find a particular dimension.

    image1492zzzzu.png

  3. Once a dimension is selected (for example, Company), click the dimension and all of its members display.

  4. Select dimension members.

For each dimension you select, the "Selected" option is displayed by default. However, you can select from the following options:

  • Selected - The members selected are displayed.

  • Children - The first level children of the selected members are displayed.

  • All Children - All of the descendants of the selected members are displayed.

  • Sel+Children - The selected members and the first level children of the selected members are displayed.

  • Sel+AllChildren - The selected members and all of the descendants of the selected members are displayed.

  • Leaves - The posting levels below the selected members are displayed.

  • Sel+Leaves - The selected members and the posting levels below the selected members are displayed.

  • Sel+Parents - The selected members and the summary levels above the selected members are displayed.

image1492zzzzv.png

Using Substitution Variables for Chart Titles, SubTitles, and Axis Name

You can use Substitution Variables like @CURMTH@ in a chart Title , Subtitle, and Axis Name. In the example below, the current year substitution variable is used in the subtitle. When the dashboard for which the chart resides is saved or in read mode, the current year value is displayed.

image746.png

User Selection in Chart Filter

The Chart Filter retains your member selection when you navigate away from the dashboard or sign out of the application.

For example, if you select GL Data and Adjustments in the Pick List and navigate away from the dashboard, the GL Data and Adjustments selection will still be displayed in the chart the next time you open the dashboard as shown in the image below.

DashboardChartFilterselectionSpring201.png

When multiple members are selected in the Chart Filter, the members that were selected will be displayed in the Pick List. If you want to select all the options displayed in the chart filter, you can use Select All option. This behavior is different if you select Dynamic Planning Charts or dimensions (such as Scenario and Measure) in Reporting. For Dynamic Planning Charts and Scenario and Measure dimensions, only a single member can be selected at once as shown in the image below.

DashboardChartFilterSpring20.png

Note:
The Select All feature is not applicable to those dimensions where multiple selections are not enabled. For example, Dynamic Planning Models, Scenario, Measures dimensions in Financial Model.

Sharing a Dashboard

When a dashboard is shared between two users:

  • If the first user configured multiple members in the Pick List and the second user opens the shared chart, then the chart shows all the members selected by the first user. If the second user deselects a few members and navigates away from the dashboard, then the next time the second user opens the dashboard, the same selection is displayed.

  • If the second user does not have dimension security access to the selected member on the Page axis, the chart is run for the next available members in Pick List.

Using Custom Members on a Chart

Your Admin user can define custom members for use when designing charts. In this example, a custom member named Sum was created on the Account dimension. It totals several accounts shown in the image below. Use the Sum custom member when the Account dimension is selected for a chart(s).

imagea3jz1234566.png

  1. Access Dashboards.

  2. Drag and drop a chart to the dashboard.

  3. For the x or y axis, select Account for dimension.

  4. Under Custom Members, select the Sum customer member as shown below. Continue to build the chart by selecting additional dimensions and members.

    image1492zzzzw.png

Altering Default Chart Settings

You can change the default chart settings to display dimension members from a different reporting area as well as format numeric data. For example, you might want to display Workforce dimension members and the numeric data in the chart as percent with 5 decimal places.

To change default chart settings:

  1. Within Dashboard Designer, select the chart element from the canvas and click the Settings tab in the right pane. Settings available are based on the chart type element selected.

    image1492zzzzx.png

  2. For Reporting Area, select from Financial, Workforce or Scorecard.

  3. Axis Labels are displayed on the axis of the chart and are available across all chart types including Line, Bar, Column, Waterfall, Stacked Column, Stacked Bar, Area, Stacked Area, Bubble and Scatter. Select Horizontal, Vertical or None. For existing Bar and Stacked Bar charts, Horizontal is selected by default. Vertical is selected by default for all other chart types as shown in the image below for a Line chart. If Vertical is not selected for all charts (excluding Bar and Stacked Bar), the axis displaying numbers/data is hidden. For Bar and Stacked Bar this applies to the Horizontal axis. If None is selected, both the dimension labels and the data values on both the axis are not displayed for all chart types.

    image1492zi2.png

    image1492zx2.png

    For Dual Combination Charts, configuration done on the Vertical axis also applies to the secondary Y axis. For existing Combination Charts, Vertical is always selected by default for Axis Labels.

    Note:
    Axis Labels are enabled for Pie and Doughnut charts, but there is no horizontal or vertical dropdown.

    Here is an example with Horizontal and Vertical Axis Labels selected.

    image1492zm2.png

  4. Select how you want the labels displayed on the chart. You can select from None, Wrap, Rotate, Stagger, or Auto., Wrap displays labels so that they don't overlap. Labels with many characters are displayed with a partial name appended with three dots. Rotate displays the label at an angle. Stagger displays the labels at a staggering height (low, high, low for example). Auto displays the labels for best results.

  5. Data Values represent the numbers of measures represented in the chart. Data Values are displayed when you hover over the chart elements. You can select to hide them on the chart. Slide the selector to the right to display data values.

    Data Values Displayed

    image698.png

    Data Values Hidden

    image699.png

  1. Display the chart legend at the bottom, top, or to the right of the chart.

  2. Select the maximum and minimum values to display on the vertical axis. For Vertical Axis, enter a minimum or maximum value for the vertical axis of a chart. For example, the vertical axis of the chart below is 60M.

    image8141.png

    Enter 30M for Axis Min. As you enter a numeric value, the chart dynamically adjusts as shown below.

    image1492zzzzy.png

  3. Select Show Grid Lines to display gridlines for the selected chart. Enter a numeric value for Grid Line Count.

  4. For Number Format, select the number of decimals to display, select to show or remove the number scale and thousands separator on data values. Select to display numbers in number, currency or percentage format.

  5. Display or hide chart axes name for the horizontal and vertical axis.

In Practice

  1. Open Dashboards.

  2. Edit a dashboard or add a new one. If you add a new one, drag and drop a chart to the canvas.

  3. Select the chart and click the Settings tab.

  4. Scroll to the bottom.

  5. Slide the blue buttons to the right to show the horizontal and vertical axis names. Or, slide the buttons to the left to hide the axis names.

    Note:
    Some settings are not applicable for KPIs, single-series charts like Pie, Doughnut and Bar charts. Refer to the Chart Types section for further details.

Gauge Chart Settings Explained

image14652.png

Show or hide tick values.

Tick mark values displayed:

image14682.png

Tick mark values hidden:

image14674.png

Show or hide tick marks.

Tick marks displayed:

image14662.png

Tick marks hidden:

image14675.png

For Tick Marks Count , enter the number of tick marks you want displayed.

Only one member can be selected on each dimension. As with all charts, all member selections are subject to dimension security. Settings enable selection of Min, Breakpoint 1, Breakpoint 2, Max value, Low Range Color, Middle Range Color, and High Range Color.

Dashboard filters are applied when the selected dimensions exists on the page or do not exist on the chart.

When a chart is run, the colors are applied as follows:

  1. Low Range Color - applied for the range between min to breakpoint 1

  2. Middle Range Color - applied between breakpoint 1 and 2

  3. High Range Color - applied beyond breakpoint 2

Scale is split based on the Min & Max values selected.

2 Value KPI Chart with Variance Explained

KPI charts display 2 values and you can include a variance against a compare dimension with corresponding text.

In Practice

In the example below, gross margin is compared for Q4 and Q3 of 2017. Percentage is shown for variance, but you can opt to display as a number (versus percentage) in the Settings - Property pane. The variance default negative color is displayed in red. The variance default positive color is green.

image14292.png

Steps to create a 2 value KPI with a variance and description:

  1. Ensure Variance is turned ON. Click the Settings pane and select the Properties tab. Slide the button for Variance to the right as shown below. The Compare Dimensions prompt is displayed beneath the KPI Chart.

    ReportingImagesKPIChartwithVarianceExplained.png

  2. Select a single member from each dimension as shown below. Notice that checkboxes have been removed from the selection hierarchy. Now, you can just select the member.

    image14312.png

  3. Select compare dimensions. You can add up to 2 compare dimensions for each KPI.

    image14322.png

  4. To add a description, ensure the Description field is turned ON. Click the Settings pane and select the Properties tab. Slide the button for Description to the right as shown below. Enter the description above the Compare Dimensions option (also shown below). Substitution Variables can be used in the description.

    ReportingImagesKPIChartwithVariancedescriptionupdated.png

    Use ‘Type’ to apply a sign reversal.

    Another option is to display variance in a specific color. To do so, select the KPI chart, click the Settings tab and the Style tab. Slide VarianceColor to ON. Select custom positive and negative colors to display.

    At any time you can return to the default color scheme provided by Planful by clicking Reset style setting to default.

    image14352.png

Two Variances in a KPI Chart

You can calculate two variances in a KPI chart. The following fields are available in a KPI chart:

  • VARIANCE 2 section: In the Settings tab, you can enable Variance 2 to calculate variance for the selected dimensions.

  • Compare Dimensions for Variance 2 drop-down list: You can select the required dimension from the drop-down list to compare it with the primary dimension selected from the Dimensions drop-down list. 

The image below displays the VARIANCE 2 section in the KPI chart.  You can now convert the negative variance percentage calculation with the Consider Absolute Value for Denominator option. Click here to learn more.

How to Apply a Percentage Calculation for a Dimension or Dimension Combination

Using the Pie, Doughnut or Stacked type chart, you can apply a percentage calculation for a dimension or dimension combination (custom member). Applying percentage calculation on the fly is yet another valuable performance indicator offered by Dashboards.

When Display Values is enabled, Display Value As is available. Select to display chart values as percentage (calculated as percentage of the sum of all values) or in number format.

image1492zzzzzc.png

In Practice

  1. Navigate to Dashboards. Create a new dashboard or use an existing one.

  2. Drag and drop a chart to the canvas. In this example, a pie type chart is dropped onto the canvas.

  3. Select Settings.

  4. Enable Data Values. When you slide the indicator to the right it turns blue and the Display Value As field becomes available.

  5. Click % for Display Value As.

  6. Apply changes to the chart and save the dashboard.

    imagea3jz1234592.png

Best Practice Tips

  • Display data values and number values in percent or number format, which will change the display of the chart to obtain the view and data you want.

  • If you have an Account dimension set up as percentage, it does not mean that it will display as percentage in a chart. The same goes for number format. The formatting is not carried over to Dashboards. You must format as needed within Dashboards.

How to Use a Stacked Column Chart in Combination Charts

Use the Stacked Column chart type in single and dual y axis Combination charts. In addition, use the Stacked Column chart in combination with a Line chart.

In the image below, the new Stacked Column chart type is shown in the setup for a single axis Combination chart.

image1492zzzzz12323456742.png

When a Stacked Column chart is applied in a Combination chart, the Settings pane enables all existing configurations as applicable for the Stacked Column chart.

The image below shows the Stacked Column chart type in a dual axis Combination chart used in combination with a Line chart.

image1492zzzzz12323456752.png

Enable Data Values and set the Display Value As to % to include the percentage Stacked Column chart in combination with a Line chart.

image1492zzzzz1232345678922.png

Changing the Chart Type

With Dashboards, you can visualize the same data from different perspectives by changing the chart type.

When changing the chart type of a selected chart, Dashboards provides compatible chart selections. Incompatible selections are not available for selection. For example, the image below shows a Bar type chart. The Bar type chart is selected and compatible charts are shown in the list-box.

image14082.png

In Practice

To change the chart type, complete the following steps:

  1. Open Dashboards.

  2. Select a dashboard and click Edit.

  3. Select a chart in the dashboard.

  4. On Settings tab, click the Chart list-box.

  5. Select a compatible chart. The chart is updated immediately.

  6. Click Save.

Additional Interactions in Dashboard Designer

  • Select a chart in the canvas and drag its bottom right corner to resize the chart (shown below).

  • Drag and drop the charts in the canvas to rearrange them in the dashboard.

  • Select a chart in the canvas and select the three dots to display options to duplicate or delete the chart from the dashboard (shown below). Or, click the Edit icon to edit the chart (also shown below).

image1463.png

Chart Types, Descriptions, Settings, and Use

The following chart types are supported:

Type


Description


Settings

Examples Where Used


Line

Shows trends over a period of time

  • Multiple Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Label Display, Display As, Suppress Empty and Zero Values, Display Absolute Values, Overlay Years, and Number Format
  • Profit/Loss trend
  • MoM headcount
  • Departmental expenses trend

Bar

Bar Stacked

Compares single or multiple categories of items that fall into a specific range

  • Multiple Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Display As, Display Absolute Values, Overlay Years, and Number Format
  • Total Sales by Product/Type
  • Revenue by quarter (Forecast Vs Actual)

Pie

Doughnut

Distributes data among different categories with reference to a total value

  • Single Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Display As, and Number Format
  • Sales by Product Type/Category
  • Operating expense by Department

Waterfall

Displays values that change incrementally and displays the cumulative effect at the end. Allows you to display chart in two format Bridge and Classic

  • Multiple Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Label Display, Display As, Display Absolute Values, and Number Format
  • COGS breakup for 2017
  • Net Income for the 4 quarters in 2017 plan
  • Total expense variance by Fiscal Month

Stacked Column

Compares single or multiple categories of items that fall into a specific range. Can be used in a Single or Dual Y Axis Combination chart and in combination with a Line chart.

  • Multiple Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Label Display, Display As, Display Absolute Values, Overlay Years, and Number Format
  • Total Sales by Product/Type
  • Compare Revenue by quarter (Forecast Vs Actual)

KPI

Displays a single value measure to track performance

  • Single Series
  • 2 dimensions on each axis, 1 value
  • Display As, Negative Number, and Number Format
  • EBITDA
  • Operating Expense
  • Gross Profit/Margin

Area

Area Stacked

Illustrates magnitude of change between two or more categories

  • Multiple Series
  • 2 dimensions on each axis
  • Data Labels, Values, Legend, Label Display, Display As, Display Absolute Values, Overlay Years, and Number Format
  • Revenue growth MoM
  • Product Sales by quarter

Scattered

Displays correlations between two sets of values

  • Multiple Series
  • 2 dimensions on each axis
  • Apply data formatting independently on both axis
  • Data Labels, Values, Legend, Label Display, Display As, Display Absolute Values, Decimals, and Number Format
  • Gross profit by region
  • Revenue by Product/Region

Dual Y AxisCombination

Combines two or more chart types into a single chart, compares two sets of related data

  • Multiple Series
  • 2 vertical axes on same or different dimension
  • Combination of Column, Line & Area. Can use a Stacked Column chart in combination with a Line chart.
  • 2 dimensions on each axis
  • Separate Settings for Primary and Secondary Axis
  • Data Labels, Values, Legend, Label Display, Display As, and Number Format
  • Expense Trend (Budget Vs Actual)
  • Revenue & Units by Month
  • Gross Margin (Budget Vs Actual)

Single Y Axis Combination

Allows you to represent one column of values on the Y axis.

  • Single dimension on each axis
  • Can use a Stacked Column chart in combination with a Line chart.
  • Revenue - Gross Margin trends

Bubble

Displays correlation between 2 sets of data with an additional dimension representing the size

  • Multiple Series
  • 2 dimensions on each axis
  • Apply data formatting independently on both axis
  • Data Labels, Values, Legend, Label Display, Display As, Display Absolute Values, and Number Format
  • Revenue by Product /Region
  • Gross Profit by Region

Gauge

Helpful visual indicators that use pointers to display information similar to reading a dial.

Only one member can be selected on each dimension.

Settings enable selection of Min, Breakpoint 1, Breakpoint 2, Max value, Low Range Color, Middle Range Color, and High Range Color.

Dashboard filters are applied when the selected dimension exists on the page or do not exist on the chart.

When a chart is run, the colors are applied as follows:

  1. Low Range Color - applied for the range between min to breakpoint 1
  2. Middle Range Color - applied between breakpoint 1 and 2
  3. High Range Color - applied beyond breakpoint 2

Scale is split based on the Min & Max values selected.

KPIs

Cash Flow

Adding Tables and Text to a Dashboard

In addition to charts, you can also add filters, tables and text as dashboard elements.

image1464.png

Tables are used to show financial data in column format.

To add a table to the dashboard:

  1. In Designer, drag and drop the table icon from the toolbar to the canvas.

  2. Add title and subtitle information.

  3. Complete dimension and member selections on each axis.

You can add up to 2 dimensions on each axis. Optionally, you can amend the default Settings for Display As & Number Format. Settings are common and applied uniformly across all columns in the table.

Text box is used to add descriptions or a list of items in the dashboard.

Note:
Column headers in all dashboard tables are centered and wrapped.

To save table columns widths:

Further customize the look and feel of a Dashboards table by resizing the column widths. Resizing of tables can be done in both Design and Edit modes. Column widths are retained when the Dashboard is accessed in Run or Edit mode, when the Dashboard is copied or duplicated, and when exported.

In Practice

  1. Access Dashboards.

  2. Open a Dashboard.

  3. Use the arrow to drag the column to the required size.

    image1492e2.png

  4. Save the Dashboard, which saves the column width.

To add a text box to the dashboard:

  1. In Designer, drag and drop the text icon from the toolbar to the canvas.

  2. Several types of alphanumeric values are allowed in the text box.

  3. Alter the default settings for text style and alignment.

Dashboard is Supported on iOS Mobile Devices

Dashboards have been certified for use on latest iOS devices with a resolution of 2160X1620 on Chrome and Safari browsers. You can seamlessly view dashboards with the ability to perform the following actions:

  • View Dashboards that are optimized for the resolution of your device.

  • Zoom In and Out on dashboard.

  • Scroll (Horizontal/Vertical) to view the content that is beyond the viewable portion of the screen.

  • View Data labels, Legends, X-axis labels.

  • Modify selections on filter dimensions - Global filters and Chart filters.

  • Click data to view Tooltip and Drill down.

  • Double click to view Drill down data.

  • Sort a column within the table.

  • Access toolbar options - Update Substitution Variable value, Refresh, Full Screen mode, Share, Duplicate, Delete, Export.

On the dashboard landing page, you can view the dashboard tiles along with search and sort options. You can perform various actions such as, Duplicate, Delete, Share, Upload Thumbnail, Mark as Favorite, and so on.

Note:
The actions associated with Read only access are certified. The actions associated with Edit access are not certified but are still available for use on iOS devices.

Was this article helpful?