• Metric Reports for Web
  • Dashboard for Web

    Show / Hide Table of Contents
    • Web Dashboard - Designer Mode
      • Creating a Dashboard
      • Providing Data
        • Create a New Data Source
        • Connect to an Existing Data Source
        • Dashboard Data Source Wizard
          • Specify Data Source Settings (Database)
          • Specify Data Source Settings (JSON)
          • Specify Data Source Settings (OLAP)
        • Query Builder
        • Preview Data
        • Manage Data Sources
        • Working with SQL Data Sources
          • Manage SQL Queries
          • Filter Queries
          • Pass Query Parameters
          • Stored Procedures
        • Filter Data Sources
        • Calculated Fields
        • Data Inspector
      • Adding Dashboard Items
      • Binding Dashboard Items to Data
        • Binding Dashboard Items to Data in the Web Dashboard
        • Hidden Data Items
        • Binding Dashboard Items to Data in OLAP Mode
      • Designing Dashboard Items
        • Chart
          • Providing Data
          • Series
          • Panes
          • Interactivity
          • Legend
          • Axes
          • Orientation
        • Scatter Chart
          • Providing Data
          • Interactivity
          • Legend
          • Axes
          • Orientation
          • Labels
        • Grid
          • Providing Data
          • Columns
          • Interactivity
          • Conditional Formatting
          • Totals
          • Layout
        • Pies
          • Providing Data
          • Interactivity
          • Layout
          • Labels
          • Style
        • Cards
          • Providing Data
          • Layout
          • Delta
          • Sparkline
          • Formatting
          • Interactivity
          • Cards Arrangement
          • Conditional Formatting
        • Gauges
          • Providing Data
          • Delta
          • Gauge Scale
          • Interactivity
          • Layout
          • Style
        • Pivot
          • Providing Data
          • Interactivity
          • Conditional Formatting
          • Layout
          • Expanded State
        • Choropleth Map
          • Providing Maps
          • Providing Data
          • Delta
          • Map Navigation
          • Interactivity
          • Labels
          • Legend
        • Geo Point Maps
          • Map Types Overview
          • Providing Maps
          • Geo Point Map
            • Providing Data
          • Bubble Map
            • Providing Data
            • Legends
          • Pie Map
            • Providing Data
            • Pie Options
            • Coloring
            • Legends
          • Clustering
          • Map Navigation
          • Interactivity
          • Labels
        • Range Filter
          • Providing Data
          • Series
          • Interactivity
          • Predefined Periods
        • Date Filter
        • Images
          • Image Overview
          • Providing Images
          • Interactivity
          • Image Settings
        • Text Box
        • Treemap
          • Providing Data
          • Interactivity
          • Layout
          • Grouping
          • Coloring
          • Labels
        • Filter Elements
          • Filter Elements Overview
          • Providing Data
          • Interactivity
        • Dashboard Item Group
        • Tab Container
      • Data Shaping
        • Summarization
        • Grouping
        • Sorting
        • Filtering
        • Top N
        • Formatting Data
      • Interactivity
        • Master Filtering
        • Drill-Down
        • Neutral Filter Mode
      • Appearance Customization
        • Conditional Formatting
        • Coloring
        • Themes
      • Data Analysis
        • Aggregations
        • Calculations
        • Dashboard Parameters
          • Creating Parameters
          • Passing Parameter Values
          • Requesting Parameter Values
        • Expression Constants, Operators, and Functions
      • Converting Dashboard Items
      • Dashboard Layout
        • Dashboard Title
        • Dashboard Item Caption
        • Dashboard Items Layout
      • Undo and Redo Operations
      • Saving a Dashboard
      • Opening a Dashboard
      • Exporting
      • UI Elements
        • Toolbox
        • Dashboard Surface
        • Dashboard Menu
        • Dashboard Item Menu
        • Data Item Menu
    • Web Dashboard - Viewer Mode
      • Data Presentation
        • Data Presentation Basics
        • Master Filtering
        • Drill-Down
        • Dashboard Layout
      • Mobile Layout
      • Dashboard Parameters
        • Requesting Parameter Values
      • Exporting
      • Dashboard Items
        • Chart
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Scatter Chart
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Grid
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Pies
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Cards
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Gauges
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Pivot
          • Exporting
        • Choropleth Map
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Geo Point Maps
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Range Filter
          • Exporting
        • Image
          • Exporting
        • Text Box
          • Exporting
        • Treemap
          • Data Presentation Basics
          • Interactivity
          • Exporting
        • Filter Elements
        • Tab Container

    Dashboard Items Layout

    The Web Dashboard provides the capability to arrange and resize dashboard items and groups using simple drag-and-drop operations.

    • Layout Concepts
    • Item Resizing
    • Maximize and Restore Item
    • Item Positioning

    • Layout Concepts

    • Item Resizing
    • Maximize and Restore Item
    • Item Positioning

    Layout Concepts

    The dashboard arranges dashboard items and groups using layout items and layout groups. They are special containers that are used to present a dashboard layout as a hierarchical structure.

    • A layout item is used as a container that displays an individual dashboard item.
    • A layout group is used as a container that is used to arrange layout items (or other layout groups) either horizontally or vertically. At the same time, layout groups are used as containers that display dashboard item groups.

    Thus, a dashboard layout is hierarchically arranged from the root layout group to bottommost layout items, which display individual dashboard items.

    DashboardLayoutHierarchy

    Item Resizing

    You can resize individual items/groups of items by dragging their edges. For this, follow the steps below.

    1. In the area allowing you to resize items, cursor types will be changed to column resize / row resize.

      wdd-di-resize1

    2. Left-click and drag the cursor until you get the expected sizes and release the left mouse button.

      wdd-di-resize2

    3. The dashboard items change their sizes.

      wdd-di-resize3

    Maximize and Restore Item

    You can expand any dashboard item to fit the dashboard to examine data in greater detail. The expanded dashboard item size in this case is the same as the root layout group.

    1. Click the Maximize button in the dashboard item caption to maximize a dashboard item.

    2. Click Restore to restore the item's size.

    Item Positioning

    You can change the position of a dashboard item by using drag-and-drop and the dashboard item's Move button.

    Depending on the required dashboard item position, a new layout group is created (if required) to maintain the arrangement of items. Thus, the dashboard item can be inserted to the desired area of a new or existing dashboard layout group.

    The following steps illustrates how a dashboard item is dragged.

    1. Select a dashboard item and hover the Move button.

      wdd-move-dashboard-item

    2. Drag the dashboard item to the expected area and release the left mouse button when the drop indicator displays the required area.

      wdd-move-dashboard-item2

    3. The dashboard item is moved to a new position.

      wdd-di-new-position

    Back to top Copyright © 2020 Metric d.o.o. www.mymetric.net, metric@zg.t-com.hr