.. image:: /_images/icons/app_simlytiks.png :width: 5% :align: right :target: index.html .. |Pages| image:: /_images/icons/icon_Pages.png :width: 4% :target: Pages.html .. _Dashboard: ################################ 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). .. thumbnail:: /_images/Images/Pages/Dashboard_Layout.png :title: Dashboard Layout .. centered:: :sup:`Figure 1: Dashboard Layout` | Adding, Moving and Resizing Widgets ===================================== Drag-and-drop a widget anywhere on the canvas to get started. .. video:: _static/movies/Pages/SLK_CreateDashboard_176_VO.mp4 :width: 100% | | 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. .. video:: _static/movies/Pages/SLK_Widgets_CorrespondingEdit_173_VO.mp4 :width: 100% | | Hover over a widget box until you see the drag icon, then click-and-drag to move the widget around the canvas. .. video:: _static/movies/Pages/SLK_MoveWidgets_170_VO.mp4 :width: 100% | | 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. .. video:: _static/movies/Pages/SLK_ResizeWidgets_177_VO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/Drop_Heading_Widget.png :title: Drag-and-Drop Heading .. centered:: :sup:`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. .. thumbnail:: /_images/Images/Pages/EditHeadingWidget.png :title: Edit Tab .. centered:: :sup:`Figure 3: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HeadingWidget_167_VO.mp4 :width: 100% | .. _widgetdrag: 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. ​ .. video:: _static/movies/widgetdrag.mp4 :width: 100% | | Text Box --------- Add custom paragraphs or comments using the Text Box widget. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/Drop_Text_Widget.png :title: Drag-and-Drop Text Box .. centered:: :sup:`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. .. thumbnail:: /_images/Images/Pages/EditTextWidget.png :title: Edit Tab .. centered:: :sup:`Figure 5: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_TextWidget_175_VO.mp4 :width: 100% | | Image --------- Upload any image for your dashboard using the Image widget. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/Drop_Image_Widget.png :title: Drag-and-Drop Image .. centered:: :sup:`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). .. thumbnail:: /_images/Images/Pages/Edit_ImageWidget.png :title: Edit Tab .. centered:: :sup:`Figure 7: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ImageWidget_179_VO.mp4 :width: 100% | | Divider --------- Place dividers into your dashboard to create sections for grouping elements. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/Drop_DividerWidget.png :title: Drag-and-Drop Divider .. centered:: :sup:`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. .. thumbnail:: /_images/Images/Pages/EditDividerWidget.png :title: Edit Tab .. centered:: :sup:`Figure 9: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_DividerWidget_166_VO.mp4 :width: 100% | 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. .. thumbnail:: /_images/Images/Pages/CloneWidget.png :title: Clone Widget .. centered:: :sup:`Figure 10: Clone Widget` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_CloneWidget_230_VO.mp4 :width: 100% | | Filters and Aggregators ======================== The second section has three unique visualizers for filtering, highlighting and aggregating data. .. thumbnail:: /_images/Images/Pages/Data_Filter_Agg_Highlighter.png :title: Filters and Aggregators .. centered:: :sup:`Figure 11: Filters and Aggregators` | These options create dynamic dashboards by linking up with each other and other charts :ref:`(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. .. video:: _static/movies/Pages/SLK_DataFilterWidget_172_VO.mp4 :width: 100% | | 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. .. video:: _static/movies/Pages/SLK_DataHighlighterWidget_168_VO.mp4 :width: 100% | Carousel view type in Data highlighter in Dashboard now has carousel controls on left and right .. thumbnail:: /_images/Images/Pages/datacarousel.png :title: Data Highlighter View .. centered:: :sup: Data Highlighter View | | .. _dataaggregator: 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. .. thumbnail:: /_images/Images/Pages/DataAggregator.png :title: Data Aggregator .. centered:: :sup:`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. .. video:: _static/movies/dataagrregatoroptions.mp4 :width: 100% | Visualizers ======================== Just like on normal Simlytiks page layouts we can add visualizers, we can also add them in our dashboard, just as widgets instead. .. thumbnail:: /_images/Images/Pages/Dashboardvisualizers.png :title: Widget Visualizers .. centered:: :sup:`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. .. video:: _static/movies/Pages/SLK_ParallelWidgetVO.mp4 :width: 100% | 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). .. thumbnail:: /_images/Images/Pages/Enlarged_View.png :title: Enlarge Widget .. centered:: :sup:`Figure 14: Enlarge Widget` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_EnlargeWidgetVO.mp4 :width: 100% | 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). .. thumbnail:: /_images/Images/Pages/Hidetitle.png :title: Hide and Show Widget Title .. centered:: :sup:`Figure 15: Toggle Widget Title` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HideTitleVO.mp4 :width: 100% | To view all the highlighted values at the top of the data highlighter, set "Move Highlighted Items to Top" to "Yes." .. thumbnail:: /_images/Images/Pages/Show_Highlighted_at_the_top.png :title: Show Highlighted Items at the Top .. centered:: :sup:`Figure 16: Show Highlighted Items at the Top` | You can view dashboard widgets in List, Carousel, Grid and Tab views. .. thumbnail:: /_images/Images/Pages/gridlistview.png :title: Views for Widgets .. centered:: :sup:`Views for Widgets` Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ShowHighlightedatTopVO.mp4 :width: 100% | | Click here to review more visualizers :ref:`(skip to this section to learn more) `. Editing Widget Style ====================== All widgets can be styled similarly in the second tab called "Widget Style". .. thumbnail:: /_images/Images/Pages/Widget_Style.png :title: Edit Widget Style .. centered:: :sup:`Figure 17: Edit Widget Style` | Alter the appearance of the text and box such as changing the box shadow, background color or text color. .. video:: _static/movies/Pages/SLK_WidgetStyleVO.mp4 :width: 100% | | .. _DashDynDataLink: 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. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris_Sepallength.png :title: Sepal Length Dynamic Data Linking .. centered:: :sup:`Figure 18: Sepal Length Dynamic Data Linking` | The following video shows how the dynamic linking looks for the sepal width in real time. .. video:: _static/movies/Pages/SLK_DynamicLink_Iris_SepalLengthVO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris_Class.png :title: Iris Class Dynamic Data Linking .. centered:: :sup:`Figure 19: Iris Class Dynamic Data Linking` | The following video shows how the dynamic linking looks for the Iris class in real time. .. video:: _static/movies/Pages/SLK_DynamicLink_Iris_ClassVO.mp4 :width: 100% .. _guidedashboard: 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. .. thumbnail:: /_images/Images/Pages/tourmessages.png :title: Guide Tour for Dashboard widgets .. centered:: :sup:`Guide Tour for Dashboard widgets` | We now have new option Guide me in Dashboard view which help us to guide the Dashboard widgets. .. thumbnail:: /_images/Images/Pages/guideme.png :title: Guide me .. centered:: :sup:`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. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris.png :title: Iris Class Dashboard .. centered:: :sup:`Figure 20: Iris Class Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_IrisVO.mp4 :width: 100% | | Auto MPG ----------- This dashboard shows the relationship between Automobile MPG, horsepower and weight using data filter, image, heading, parallel line chart, and scatter plot. .. thumbnail:: /_images/Images/Pages/DynamicLink_AutoMPG.png :title: Auto MPG Dashboard .. centered:: :sup:`Figure 21: Auto MPG Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_AutoMPGVO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/DynamicLink_WorldHappiness.png :title: World Happiness Dashboard .. centered:: :sup:`Figure 22: World Happiness Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_WorldHappinessVO.mp4 :width: 100% | | Beers ---------------- This dashboard shows how ABV values relate to different beers and beer styles using data filter, data highlighter and gauge. .. thumbnail:: /_images/Images/Pages/DynamicLink_BeerData.png :title: Beers Dashboard .. centered:: :sup:`Figure 23: Beers Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_BeerVO.mp4 :width: 100% | | 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). .. thumbnail:: /_images/Images/Pages/Dashboard_view.png :title: Dashboards View .. centered:: :sup:`Figure 24: Edit Dashboards View` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_DashboardView_232_VO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/DataHighlighterDisplayType.png :title: Dashboards View .. centered:: :sup:`Figure 25: Data Highlighter Colored Bubble Display Type` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HighlighterDisplayType_SLK-237_VO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/MultipleSections.png :title: Multiple Sections .. centered:: :sup:`Figure 26: Multiple Sections in a Dashboard page` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_Dashboard_MultipleSections_246_VO.mp4 :width: 100% | | 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. .. thumbnail:: /_images/Images/Pages/Select_AnnotationDiapType.png :title: Annotation Diaplay Type .. centered:: :sup:`Figure 27: Annotation Display Type` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ImageAnnotator_ColoredBubbleDisp_245_VO.mp4 :width: 100% | | Widgets list view type in dashboard page can be changes based on user requirement. To do this, click on the eye icon and switch to the desired view. .. thumbnail:: /_images/Images/Pages/Widgets_ViewTypes.png :title: Widghets List View Types .. centered:: :sup:`Figure 28: Widgets List View Types` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_WidgetsViewTypes_249_VO.mp4 :width: 100% | | "Show Only Selected Data" and "Move Highlighted Items to Top" are enabled by default to show only filtered data and move them to the top. .. thumbnail:: /_images/Images/Pages/Data_Highlighter_ShowOnlyFiltered.png :title: Show only selected data at the top in Data Highlighter .. centered:: :sup:`Figure : Show only selected data at the top in Data Highlighter` | To facilitate data interaction across multiple pages of visualization, it is now converted from a stand-alone to an interactive visualizer. .. thumbnail:: /_images/Images/Pages/Dashboard_Viz.png :title: Dashboard Visualization .. centered:: :sup:`Figure 29: Dashboard Visualization` | Added Built-in margin for dashboard widgets to separate them out. .. thumbnail:: /_images/Images/Pages/builtin.png :title: Built-in margin .. centered:: :sup:`Built-in margin` | Filter Data within data to make it act like a filter to show only highlighted data and set Show only Highlighted to Yes by default. .. thumbnail:: /_images/Images/Pages/filterdatadash.png :title: Show only Highlighted .. centered:: :sup:`Show only Highlighted` | Count is updated when a delimiter is used in Data highlighter. .. thumbnail:: /_images/Images/Pages/delimiter.png :title: Delimiter .. centered:: :sup:`Delimiter` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_Dashboard_Viz_253_VO.mp4 :width: 100%