416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Designing Dashboards and Tiles for HTML Viewing

Hide navigation
RSS
Modified on Wed, 05 Mar 2014 10:31 AM Categorized as Design, HTML, Mobile
Click to return to: Documentation | Designing Dashboards | Dundas Dashboard for Mobiles


Overview

This article provides tips and best practices for designing dashboards and tiles for HTML viewing.

Designing dashboards

Resizable dashboards

Below are some notes regarding the design of resizable dashboards for HTML viewing:

  • If your target display device is primarily a tablet such as iPad, or a smartphone like the iPhone, you can choose the size and/or aspect ratio of your dashboards based on the native screen resolution of the device. For example:
    • The iPad 2 has a screen resolution of 1024 by 768 pixels.
    • The iPad Air has a screen resolution of 2048 by 1536 pixels.
    • The iPhone 4 has a screen resolution of 960 by 640 pixels.
    • The iPhone 5 has a screen resolution of 1136 by 640 pixels.
  • Using the HTML Viewer / Explorer to view a dashboard with Re-Size Mode = Scale is a good option if your target display device is primarily tablets/mobile instead of desktops. This is because of the way the mobile browser does zooming and the use of SVG.
  • When using the HTML Viewer / Explorer to view a dashboard with Re-Size Mode = Resize, note that individual elements (e.g. charts) do not resize like they do in the Silverlight dashboard viewer. Currently, the elements are simply stretched (but maintain a fixed aspect ratio) as the dashboard is resized in the HTML Viewer. For example, this means that elements such as charts do not automatically show more or fewer data points upon resizing as they do in the Silverlight viewer.

For more details, see Designing Resizable Dashboards.

Hiding dashboards from navigation

Dashboard designers can hide dashblocks and dashboards from being visible in the HTML Explorer as follows:

  1. Edit the dashblock or dashboard in the Dashboard Designer.
  2. Click the dashboard canvas to see its properties displayed in the Properties grid.
  3. Set the Hide From Navigation property to True.
  4. Save, and then check-in the dashblock or dashboard.

Now, when you use the HTML Explorer to navigate your projects, you won't see the hidden dashblock or dashboard anymore. This option is useful for hiding unnecessary details from dashboard viewers. For example, you may have a dashboard that is used in a hover-over or a pop-up, but it doesn't make sense for users to view this dashboard just by itself.

Hide From Navigation property.

Hide From Navigation property.


Design recommendations

Various dashboard design tips and workarounds for known issues:

  • Gradients:
    • When using gradient coloring, you may see a difference in the appearance or quality of the gradient in HTML if the origin point is outside of the center circle of the radial gradient. The workaround is to replace the gradient with an image background, or ensure that the origin is positioned inside of the center circle.
  • Interactions and scripting:
    • Avoid combining Mouse Enter/Leave interactions with Click interactions as the results may be different in HTML. In many situations, you can do this without loss of functionality. For example, the button control already supports color changes on hover-over; therefore, there is no need to use mouse enter/leave interactions to achieve the same effect.
    • When using transparent elements to capture mouse events, note that there may be differences in behavior across browsers and between Silverlight and HTML. For example, in IE 9, mouse events on transparent elements are ignored and passed onto the elements beneath it. But in Firefox and Chrome for both Silverlight and HTML, mouse interactions on transparent elements work fine. To avoid these differences, it is recommended to set a solid fill (⪚ white) and set opacity to 0 for elements that have mouse interactions, or set mouse interactions only on non-transparent elements.
    • There are other differences or limitations regarding scripting support in HTML. See HTML Viewing Limitations for details.
  • Controls:
    • If you are using a legend control and setting its size smaller than the space required by its legend items, scrollbars will appear. However, in Firefox, these scrollbars may not show up unless the the legend is resized a bit larger.

Designing tiles

The HTML Home screen displays two kinds of items:

  • Previews (&ie; thumbnails) of dashboards - These are automatically generated, 1x1-sized icons which can be clicked to view the full dashboard.
  • Tiles - A tile is just a dashboard or dashblock that has a defined tile size and click target. Usually, you click on a tile to view the target dashboard that it is linked to.

A dashboard shows up as a preview by default when you add it to the home screen. If you want to have something more customized, create a corresponding tile which will basically replace the preview on the home screen. A tile is just a separate dashboard/dashblock for which you have set the following advanced properties:

  • Tile Column Span - The number of columns the tile will occupy. Changing this property will automatically resize the dashboard to the appropriate tile size.
  • Tile Row Span - The number of rows the tile will occupy. Changing this property will automatically resize the dashboard to the appropriate tile size.
  • Tile Click Target - The target dashboard or dashblock that the tile will show when clicked.
  • Is Tile Interactive - Indicates whether the tile is interactive. If set to True, the tile responds to parameter changes and script interactions. If set to False (which is the default setting), the tile responds only to clicking which results in navigation to the click target.
  • Is Tile Protected - Indicates whether the tile is protected. If set to True, and the administrator has selected this tile in HTML Home Screen Settings, users won't be able to remove this tile from their home screens. If set to False (which is the default setting), the tile can be removed by users from their home screens as long as they have the necessary privilege for customizing their home screens.

The size of the dashboard canvas adapts automatically whenever you change the tile row or column span. The figure below shows an example of creating a new dashboard to act as a 2x2-sized tile. The tile is linked to the Executive dashboard from the Sonatica sample project.

Setting the tile size and click target at design-time.

Setting the tile size and click target at design-time.


Once the click target of a tile is set, the tile will no longer appear in the explorer view. This is because the tile is now linked to the target dashboard and only the target dashboard will be displayed in the explorer view.

When users add the target dashboard (⪚ Executive dashboard from the Sonatica project) to their home screen, the corresponding tile will be displayed in the home screen instead of the regular preview of the actual dashboard. For example, in the HTML Home screen below, the Executive dashboard has been added, but its corresponding tile is displayed instead of the regular preview icon. Clicking the 2x2-sized tile will result in navigation to the actual Executive dashboard (the click target).

HTML home screen with a 2x2 tile.

HTML home screen with a 2x2 tile.


Multiple tiles linked to the same dashboard

Dashboard designers can choose to create multiple tiles and set their click targets to point to the exact same dashboard. This allows users to choose the tile they want to appear on their home screen. The figure below shows an example of creating a second tile that also points to the Executive dashboard.

Designing a 1x1 tile that links to the same dashboard.

Designing a 1x1 tile that links to the same dashboard.


Now, when a user tries to add the Executive dashboard to their home screen from the explorer view, a popup window appears, giving the user the option of selecting the tile to use.

Choose the tile to appear on the home screen.

Choose the tile to appear on the home screen.


Tip: Suppose you have designed two tiles linked to the same dashboard. Tile 1 shows a summary view of KPI 1, and Tile 2 shows a summary view of KPI 2. When multiple tiles are linked to the same dashboard, users can only choose one of the tiles to appear on their home screen. But what if they would like both summary views to appear on their home screen? One solution in this case is to design a third tile for your users that displays the summary information for both KPIs. Your users then have the flexibility of choosing the amount of information they want to see on their home screen.

Live tiles

A live tile is like a miniature dashboard. It usually displays a small number of data controls which are linked to KPI data in a compact arrangement. You can create a live tile that shows a summary or subset of a full dashboard, and then set the click target of the tile to point to the full dashboard.

Live tiles from the Sonatica project on the home screen. Clicking on a tile loads the full dashboard.

Live tiles from the Sonatica project on the home screen. Clicking on a tile loads the full dashboard.


Interactive tiles

The Is Tile Interactive property of a dashboard or dashblock indicates whether the corresponding tile is interactive or not. By default, this property is set to False, which means the tile is non-interactive. In this case, the tile itself will not respond to clicks or other user interaction the way a normal dashboard would. Clicking on the tile simply results in navigation to the Tile Click Target dashboard.

However, if you set Is Tile Interactive to True, the tile will respond to user interactions normally instead of navigating to itself (the full dashboard), or navigating to the click target. This basically overrides the default click target behavior and allows you to achieve results such as:

  • Having tiles on the home screen that function like mini-dashboards which respond to parameter/filter changes, button clicks, and drilldown.
  • Creating static views of dashboards on the home screen that don't require any user interaction. This can be achieved by using only non-interactive elements to design your tile, or by placing a transparent rectangle element over the tile.
  • Run a script to perform custom behavior when the tile is clicked. For example, the following script can be placed in the Click interaction of an interactive tile in order to navigate to the current dashboard.

// Get the base URL of your Dundas Dashboard instance. string url = services.ServerUri;

// Append the view dashboard link (explorer or viewer, explorer in this case). url = string.Format("{0}HtmlExplorer.ashx?Dd_ContentId={1}", url, services.CurrentDashboard.DashboardId);

// Build the javascript to navigate to the new link (must be set on the parent window). string js = string.Format("window.parent.location = '{0}'", url);

// Execute the javascript. services.EvalJavaScript(js);


Protected tiles

In Dundas Dashboard 5.0.2 or later, administrators can designate dashboard tiles as being protected to prevent users from removing them from their HTML Home screens. Here are the steps to do this:

  1. Set the dashboard property, Is Tile Protected, to true for your tile(s).
  2. Go to HTML Home Screen Settings and remove any existing selected dashboards.
  3. Add the protected tile(s) along with any unprotected tiles, and then click Save.
    Protected tiles in HTML Home Screen Settings.
  4. Click Reset HTML Home Screen for ALL users to propagate the changes to all users.

Best practices for tile design

As a dashboard designer, you are free to design your tiles however you like. You can add text labels, image backgrounds, or even data controls (⪚ live tiles). However, for performance reasons, it is best to keep your designs clean and simple. Here are some ways to do this:

  • Avoid using transparencies or gradients in your tiles.
  • Stick to using solid colors, text, simple shapes, and static images.
  • If you must have transparent or gradient effects, create a static image with the desired graphics instead.

When using live tiles, you may experience performance problems on low-powered or older devices. For example, you may see scrolling problems on a smartphone or other issues. Here are some ways to deal with this:

  • Use fewer live tiles; this will help with the display of thumbnails.
  • Reduce the number of dashboard elements (⪚ controls) in your tiles.
  • Reduce the number of data points displayed in a tile.
  • Avoid using gradient effects; replace with static images instead.
  • In some cases, upgrading your device (such as moving from iOS 4 to iOS 5) can help.

Related topics


Click to return to: Documentation | Designing Dashboards | Dundas Dashboard for Mobiles

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.