Creator

Creating visually appealing and relevant dashboards is an important way for a creator to engage with an audience to deliver insights. Customizable containers enable dashboard creators to edit and manage a selection of elements of a chart when added to a dashboard.

1. Add a container to your dashboard

You must be in edit mode to add a container to your dashboard page. You will find the edit icon at the top right of the dashboard page.

Selecting this icon opens the dashboard editing pane. Here, you will find the different container type options.

In the editing pane, you will find the four different container-type options you can include in your dashboard. Clicking each container type icon adds a container to the dashboard canvas.

2. Container Types

a. Text container

Adding text to a dashboard allows a story to be told alongside the data. This helps make dashboards more usable and shareable.

There are several ways you can use a text container in your dashboard. Some of these include:

Create headers to provide context
Sharing insights and information
Use as filter buttons and navigation links
Creating a "blank box" to use as a background for other items

To add Text to your Dashboard

Select the Text container.
This will open the text editor menu. It contains different options for you to edit your text.
Customize your text container. Learn more about container general settings.
Save.

The text editor becomes available as soon as you insert a text container. Options in this editor include font, color, size, etc. An HTML editor is also available. For more advanced styling advice, please get in touch with support@infotools.com.

b. Image container

Creating effective dashboards may require more than just the data presented. Images are an easy way to personalize your dashboard and make it stand out.

There are several ways you can use an image container in your dashboard. Some of these include:

Background for your dashboard
Branding
Use as filter buttons and navigation links

Image formats supported include .jpg, .png, .svg, and .gif. Animated GIFs will only show the first frame when exporting to PowerPoint.

Adding an Image

Select the Image container.
In the General settings menu, go to Content.
Browse to the location of your image.
Customize your image container. Learn more about container general settings.
Save.

c. Chart container

Dashboards are a way for you to organize previously saved stories and combine them with other contextual items.

Story views in your dashboard can be made of:

Tables
Heat Map
Graphs
Single Number

Adding a Chart (Story View)

Select the Chart container.
This will open STORIES menu. Navigate to the story where you have the view you are after.
Select the relevant view and drag it into the dashboard canvas.
Customize your chart container. Learn more about container general settings.
Save.

When adding charts to dashboards, controlling the visual and associated labeling layout can be integral to achieving the overall design. Harmoni has different options for you to customize the display of titles, chart axes, labels, and legends.

d. Embed container

Embed container allows adding embedded content into your dashboard. Some common scenarios include:

Embedding YouTube Videos.
Embedding PDF documents.

Embed a YouTube Video

You first must copy the embed code from the YouTube page and insert it into Infotools Harmoni.

In YouTube

Click "Share."
Select "Embed"
Find the embed code, and copy the code between the quotes after the "scr=". For example: scr="https://www.youtube.com/embed/WKjVgTE4CFc"

In Harmoni

Select the Embed container.
In the General settings, inside the Content section, paste the embed code into the Source field.
Make sure the content setting is on Web View.
Customize your container. Learn more about container general settings.
Save.

Embed a PDF document

Documents need to be uploaded through our hosting platform first. Don't hesitate to get in touch with support@infotools.com for more information. Once content is available:

Select the Embed container.
In the General settings, inside the Content section, add the link into the Source field.
Make sure the content setting is on Web View.
Customize your container. Learn more about container general settings.
Save.

The source field must include the site address, file location, and name. For example:

Adding a link is better if you want the content to open on a separate page.

3. Lock Display

Lock display allows holding the size dimensions of the containers. This ensures that when the screen size changes or the scaling of the browser is adjusted, the alignment and overall design aesthetics remain as intended.

Once you are happy with the size and position of the container, use Lock Display Size on the container to enable appropriate scaling.

Learn more about how to use Lock Display when adding single numbers to your Dashboard.

4. Container General Settings

The general settings menu is context-sensitive. Customization options differ depending on the container type you are using.

To help improve the efficiency when creating dashboards, container settings are "sticky," meaning that when a user changes them for one container, they will apply to the next container on the same dashboard they work on until the user changes that setting.

Settings	Container Type	Views from a Story
Content	Image Chart Embed	Image The option Source - Allows browsing to choose or replace an image. Chart Allow Zoom On/Off – removes icon to expand and suppresses click to expand, enabling the chart to become a link. Display more information On/Off – whether “i” should be shown in the bottom right of the analysis. Embed Web View - integrate content from external sources. Cube View
Title	Chart	Project title On/Off – whether the project name should be displayed. This is only applicable on sites where the *View.ProjectName.Enabled* personalization key is set to true. Across & down On/Off – whether the analysis title naming the across and down should be displayed. Filtered by On/Off – whether the analysis title naming the filter should be displayed. Base on On/Off – whether the analysis title naming the percentage base should be displayed.
Chart axes & labels	Chart	X-axis & associated labels On/Off – whether the labels across the bottom of the graph are displayed. Y-axis & associated labels On/Off – whether the scale down the side of the graph is displayed. Horizontal Bar Graph X-axis & associated labels width – alignment and display can be controlled to match the length of the labels. When long labels exist in horizontal charts, the width control allows for more/less space to be added to the left side of the horizontal bar(s) chart. X-axis & associated labels truncate - when you have entered a specific width, this option becomes available. You can indicate the number of lines required to truncate a label. Values are between 1 to 5 lines.
Legends	Chart	Display On/Off – whether the legend is displayed Width – the proportion of the container width consumed by the legend. Allowed values are between 10% and 40% inclusive. Space between legends & chart. i.e., Max 100 px. min 0 px. Spacing of legend items. i.e., Max 20 px. min 4px.
Image Placement	Image	Allows to control the image placement within the container; options include Centre, Full, Stretch, and Anchor.
Size and Position	All	While you can drag and resize containers by selecting the container and using the mouse pointer, the size and position options allow for the perfect placement of your container. Width and Height control the size of the container. X (from left) and Y (from top) control the horizontal and vertical placement of the container within the dashboard canvas (120/120 grid or coordinate space). Lock Display Size For Text and Single Number chart containers, there is an additional option to lock the display size. This option allows holding the size dimensions of the containers that hold the text and single number items. This ensures that when the screen size changes or the scaling of the browser is adjusted, the alignment and overall design aesthetics remains as intended. Tables in dashboards can be limiting as they would only display within the maximum confines of their container. Lock display size allows resizing the box to meet your aesthetic while retaining the columns and/or rows you want to display. The table will 'shrink' to fit the box size you select. Please note that the font's readability will be affected the smaller you go, so beware of maintaining a readable size.
Background Colour	All	Background color options allow setting a background color as well as the opacity. Using opacity is a way to create aesthetic brilliance and overall design control. To set the background color, enter the Hex value. You can control the % of transparency, where 0% is transparent and 100% is opaque. When using transparency, be careful on graphs that allow zoom.
Arrange	All	Containers within a dashboard can be stacked in layers. To bring a container to the front of a group, select Bring forward and click Bring to front. To move a container up one placement to the front in the stacking order, click Bring forward. To send a container to the back of a group, select Send backward and click Send to back. Click Send backward to move a container one placement to the back in the stacking order. Learn more about layering containers.
Paddings	All	Padding clears an area around a container's content (inside the border). You can select a container's top, Right, Bottom, and Left padding.
Link	All	Custom Link allows you to link to other dashboard pages, websites, and documents. In addition, an existing object can be connected to an available filter. If you want your container to open a project directly, enter the Project name under the Project Name field.

Arrange - Layering Containers

The order you add containers to your dashboard controls the order of the layering. Sometimes, you may find a container overlaps another and you need to change the ordering.

The z-index controls the position of the elements/containers on the page. It is added with each container you add to the dashboard. The higher the z-index, the closer the element is to the surface. The lower the z-index, the further back the element is.

To increase or decrease the z-index, you can use the following options:

Arrange with image3.png

In the example below, a background image has been added to the dashboard last and it sits on top with the highest z-index. To move the image right to the back of all the containers, we'll use Send to back which gives it the lowest z-index.

KB-Dashboards Send to back.gif

We also want to place a layer under the heading to make it stand out, but it currently sits on top of the heading and image. In this example, we can use Send backwards, clicking twice to move the container firstly under the image container, and then under the text container. The layer has had its z-index lowered by 2 points.

KB-Dashboards Send backwards.gif

If you have 100 or more containers on your dashboard and you are using charts that zoom in, you may find that other containers show over the top of a zoomed-in chart. Harmoni automatically sets the z-index for a zoom-in chart to 99 so any chart with a z-index higher than this will sit on top of the zoomed chart.

To move any overlapping containers backwards, click Send backwards enough times to change the z-index from over 99 to under 99. This will enable your zoomed-in chart with a z-index of 99 to sit on top.

Where to from here?

Learn more about adding links to your dashboards

Dashboard Containers

In this article

1. Add a container to your dashboard

2. Container Types