Tags:
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.
Insert a container
At the top right of the dashboard page, you will find the edit icon. Selecting this icon will open the dashboard editing pane. In here, you will find the different container type options.
In this article
1. 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
Adding Text
- 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 contact 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 GIF will only show the first frame when exporting to PowerPoint.
Adding an Image
- Selecting 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 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 the saved stories menu. Navigate to the story where you have the view you are after.
- Select the relevant view and drag into the dashboard canvas.
- Customize your chart container. Learn more about container general settings.
- Save.
When adding charts to dashboards, controlling the layout of the visual and associated labeling can be integral to achieving the overall design. There are different options available to customize the display of Titles, chart axes, and labels as well as legends.
d. Embed container
Embed container allows adding embedded content into your dashboard. Some common scenarios include:
-
Embedding PDF documents.
-
Embedding YouTube Videos.
Embed a PDF document
Documents need to be uploaded through our hosting platform first. Please contact 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 needs to include the site address and the file address. For example:
- https://connect.infotoolsonline.com/Sites/SiteName/itl_data/Resources/FileName
- https://connect.infotoolsonline.com/Sites/Infotools%20Harmoni%20Knowledge%20Base/itl_data/Resources/Infotools Insiders Guide.pdf
If you want the content to open in a separate page, adding a link is a better option.
Embed a YouTube Video
You first need to copy the embed code from the YouTube page and then insert into Infotools Harmoni.
YouTube
- Click "Share".
- Select "Embed"
- Find the embed code content on the right top corner. This is the scr="...".
- Copy the content within the quotes
Infotools 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.
2. 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, containers 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
Chart
Embed
|
Title |
Chart |
|
Chart axes & labels |
Chart |
Horizontal Bar Graph
|
Legends |
Chart |
|
Image Placement |
Image |
Allows to control the image Placement, 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 perfect placement of your container.
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 still retaining the columns and or rows you want to display. The table will 'shrink' to fit the box size you select. Please note that readability of font will be affected the smaller you go so beware to maintain 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.
When using transparency, be careful on graphs that allow zoom. |
Arrange |
All |
Containers within a dashboard can be stacked in layers.
|
Paddings |
All |
Padding clears an area around the content (inside the border) of a container. You can select the Top, Right, Bottom and Left padding for a container. |
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. |
Tagging |
All |
Adding tags to containers will enable global search – a feature that will be available in a future release. |
Where to from here?
Learn more about adding links to your dashboards
- Learn more about Navigation Paths - linking dashboard pages.
- Learn more about adding links to documents.
- Learn more about Interactive Filters.