11. Dashboard Layout¶

Under the layouts tab in a page, the Dashboard option allows you to create custom dynamic layouts of your data using basic widgets like headings (1), data filters and aggregators (2) and charts (3).

^{Figure 1: Dashboard Layout}

Adding, Moving and Resizing Widgets¶

Drag-and-drop a widget anywhere on the canvas to get started.

Click on the row of dots icon at the top of the edit box or click outside of a widget on the canvas to see all available widgets again.

Hover over a widget box until you see the drag icon, then click-and-drag to move the widget around the canvas.

Hover over the bottom right corner a widget box until you see the sizing arrow icons, then click-and-drag to resize the widget width, length or both.

Basic Widgets¶

Basic widgets help with making your dashboard report oriented. Add a heading, a text box, an image or a divider. Let’s go over each.

Heading¶

Create custom titles for any part of your dashboard using the Headings widget. Drag-and-drop the widget anywhere onto the canvas to get started.

^{Figure 2: Drag-and-Drop Heading}

Edit the heading text in the first tab which includes basic text and paragraph formatting like weight, decoration and alignment.

^{Figure 3: Edit Tab}

Watch the following video to see how it’s done:

When widget is dragged and dropped onto the viz container and if Cancel button is clicked WITHOUT saving the widget, an alert now pops up asking the user to confirm cancellation.

Text Box¶

Add custom paragraphs or comments using the Text Box widget. Drag-and-drop the widget anywhere onto the canvas to get started.

^{Figure 4: Drag-and-Drop Text Box}

Edit the text in the first tab which includes basic text and paragraph formatting like weight, decoration and alignment.

^{Figure 5: Edit Tab}

Watch the following video to see how it’s done:

Image¶

Upload any image for your dashboard using the Image widget. Drag-and-drop the widget anywhere onto the canvas to get started.

^{Figure 6: Drag-and-Drop Image}

In the Edit tab, upload your own image or choose from the Simlytiks media library (click on the input box to view all).

^{Figure 7: Edit Tab}

Watch the following video to see how it’s done:

Divider¶

Place dividers into your dashboard to create sections for grouping elements. Drag-and-drop the widget anywhere onto the canvas to get started.

^{Figure 8: Drag-and-Drop Divider}

In the Edit tab, choose to view the divider as horizontal or vertical and specify the width and color of the line.

^{Figure 9: Edit Tab}

Watch the following video to see how it’s done:

We can clone widgets by maintaining their aspect ratio and styling as it is using the Clone option available in the widget context menu (1). Cloned widget (2) This applies to all the widgets in the list.

^{Figure 10: Clone Widget}

Watch the following video to see how it’s done:

Filters and Aggregators¶

The second section has three unique visualizers for filtering, highlighting and aggregating data.

^{Figure 11: Filters and Aggregators}

These options create dynamic dashboards by linking up with each other and other charts (skip to this section to learn more).

Data Filter¶

Data Filter allows us to filter out data in any of our dashboard charts. Here is how to set up the data filter widget.

Data Highlighter¶

Data Highlighter allows us to highlight data in any of our dashboard charts. Here is how to set up the data highlighter widget.

Carousel view type in Data highlighter in Dashboard now has carousel controls on left and right

:sup: Data Highlighter View

Data Aggregator¶

Data Aggregator shows key values based on the data column pick. For example, choosing a numerical column such as sepal length in the Iris dataset presents us with specifications about the sepal length in the dataset such as sepal length average and median.

^{Figure 12: Data Aggregator}

The Data Aggregator widget in Dashboard has new options such as Orientation, Wrap, Horizontal align, Vertical align in its Appearance tab.

Visualizers¶

Just like on normal Simlytiks page layouts we can add visualizers, we can also add them in our dashboard, just as widgets instead.

^{Figure 13: Widget Visualizers}

This way, we can customize them in accordance with our dashboard. The following is a video example of adding the parallel line chart widget.

For more detailed view of the desired widget, click “Enlarge” in the right context menu (1). To return back to dashboard view, click on “Compress” in the right context menu (2).

^{Figure 14: Enlarge Widget}

Watch the following video to see how it’s done:

We can hide or show widget titles based on user requirements. Click Hide Title in the right context menu to hide (1) and select Show Title to display it again (2).

^{Figure 15: Toggle Widget Title}

Watch the following video to see how it’s done:

To view all the highlighted values at the top of the data highlighter, set “Move Highlighted Items to Top” to “Yes.”

^{Figure 16: Show Highlighted Items at the Top}

You can view dashboard widgets in List, Carousel, Grid and Tab views.

^{Views for Widgets}

Watch the following video to see how it’s done:

Click here to review more visualizers (skip to this section to learn more).

Dynamic Data Linking¶

Once we’ve added our visualizers, we can use our data filters and highlighters as tools for dynamically showing aspects of our data.

In the following image, we’ve added a parallel line chart to the right showing the relationship between sepal and petal width and length with Iris flower class. The data filter widget to the left shows filtered sepal length which is reflected in the parallel line chart.

^{Figure 18: Sepal Length Dynamic Data Linking}

The following video shows how the dynamic linking looks for the sepal width in real time.

In the following image, we have the same parallel line chart filtered to reflect the chosen Iris classes in the data filter widget to the left.

^{Figure 19: Iris Class Dynamic Data Linking}

The following video shows how the dynamic linking looks for the Iris class in real time.

Guide Tour for Dashboard widgets¶

Guide Tour messages can be added to all the widgets in Dashboard in the Tour Guide tab, with a text area button on the widget top right or right click and Change Guide message option for Dashboard.

^{Guide Tour for Dashboard widgets}

We now have new option Guide me in Dashboard view which help us to guide the Dashboard widgets.

^{Guide me}

Dashboard Examples¶

The following are some examples of customized Simlytiks dashboards for different datasets.

Iris Class¶

This dashboard shows the relationship between Iris class and petal and sepal dimensions using data filter, image, heading, parallel line chart, donut chart and stacked area chart.

^{Figure 20: Iris Class Dashboard}

The following video demonstrates the dynamic linking for this dashboard example.

Auto MPG¶

This dashboard shows the relationship between Automobile MPG, horsepower and weight using data filter, image, heading, parallel line chart, and scatter plot.

^{Figure 21: Auto MPG Dashboard}

The following video demonstrates the dynamic linking for this dashboard example.

World Happiness¶

This dashboard shows how different standard of living determines the happiness score of countries using ranking table, histogram, data aggregator and data filter.

^{Figure 22: World Happiness Dashboard}

The following video demonstrates the dynamic linking for this dashboard example.

Beers¶

This dashboard shows how ABV values relate to different beers and beer styles using data filter, data highlighter and gauge.

^{Figure 23: Beers Dashboard}

The following video demonstrates the dynamic linking for this dashboard example.

The default view which is the modern view can be changed to dashboard view for viewing dashboards that were created for a given dataset. Click on Dashboard in the view dropdown menu (1) to view all the dashboards. To return to page view again, go to the view dropdown and select any desired view type (2).

^{Figure 24: Edit Dashboards View}

Watch the following video to see how it’s done:

The data highlighter display type can be changed from background color to colored bubble type by setting the color for the column and selecting “Colored Bubble” in the “Selection Display Type” field for the highlighter.

^{Figure 25: Data Highlighter Colored Bubble Display Type}

Watch the following video to see how it’s done:

Multiple sections can be added within a dashboard page by clicking on “Add Section” and the new section can be personalized with new widgets. These widgets can be deleted at any time by clicking on the “x” available towards the right top; also, scroll the page to view all the sections.

^{Figure 26: Multiple Sections in a Dashboard page}

Watch the following video to see how it’s done:

Image annotator selection display type can be changed from background color to colored bubble type by setting color for the column and selecting Colored Bubble as input for the “Select Annotation Display Type” field for the highlighter.