1. User’s Guide for Oracle Analytics Desktop
  2. Visualize and Analyze Data
  3. Design Canvas Layouts for Different Screen Sizes

Design Canvas Layouts for Different Screen Sizes

You can design canvas layouts to respond to different sized devices optimizing the content to fit in the browser for each screen size.

Topics:

About Designing Canvas Layouts to Display on Devices with Different Screen Sizes

You can design canvas layouts to fit different sized devices optimizing content in the browser, for example on a mobile, a tablet, or a laptop.

Optimize canvas layouts for different screen sizes

When you open a workbook on different sized devices, the canvas screen size scales to the browser screen size using the browser's defaults. Resizing the browser by decreasing its size can impact your ability to see the details in visualizations. For example, the data in a scattergraph, a heatmap, or most of the measure data in a tile visualization may become hard to read, making it impossible to see crucial information.

When you reduce the canvas size in a browser, visualizations can become too small to display data properly.
This image shows a reduced canvas screen size viewed in a browser where some visualizations have become too small to see the data properly.

As an author you can design canvas breakpoints so that when the canvas screen size reduces in size, the rendering of visualizations changes to fit the new screen size. For example, if the available screen size is too small to display a complete visualization, you can rearrange or hide the visualization to work better with the smaller screen size. You specify different canvas screen sizes and layouts using canvas breakpoints, where each breakpoint represents a different arrangement of visualizations displayed for each screen size.

An optimized canvas for a smaller screen size breakpoint contains visualizations that are rearranged to make viewing easier on the smaller device.
This image shows an optimized visualization created using a breakpoint for a device with a smaller screen size.

You use a slider to define screen sizes for when consumer users display canvases on different sized devices. For example, you can change how the visualizations display by rearranging their location, size, or visibility on the canvas.

When you add a breakpoint to a canvas, the breakpoint screen size determine how visualizations display when viewed at that screen size. You can reposition, resize, or remove visualizations for a canvas breakpoint to optimize how users see visualizations. You can specify different visualization configurations for each breakpoint, and the differences for each breakpoint are only displayed to the consumer user when the browser screen size resolution matches the breakpoint screen size for which the changes are made.

Design Canvas Layouts to View on Different Devices

You can create canvas breakpoints to determine how visualizations display to consumer users on devices with different screen sizes. For example, you can set different breakpoints to optimize viewing on a mobile device browser, a tablet, or a laptop.

Tutorial icon Tutorial

  1. On the Home page, hover over a workbook, click Actions Actions icon, then select Open.
  2. Click Edit to display the workbook for editing.
  3. Expand the canvas to maximum size and in Canvas Properties, set the Layout to Autofit, and click OK.
  4. On the footer click Responsive Canvas Editor to open the editor where you can define breakpoints to view the canvas on different devices.
    Responsive Canvas Editor

  5. Set a canvas breakpoint:
    • Add a breakpoint at the current slider position - Click and drag the slider to the value in pixels for the screen size that you want to use for this breakpoint,
      Drag the slider to the required width shown in pixels.

      then click Add Breakpoint Click the Add Breakpoint icon to add a breakpoint where the slider is locatedto add the breakpoint at the current slider location.
    • Manually enter a value for a breakpoint - Click Open the Responsive Canvas Editor Menu, click Add Breakpoint and enter a number in the Position field for where you want this breakpoint.
      Enter a position manually to add a breakpoint

  6. Repeat the previous step to define additional canvas breakpoints.
  7. Include or exclude visualizations for each canvas breakpoint:
    • Right-click the canvas breakpoint that you want to manage (A canvas breakpoint and its marker) and click Manage Breakpoint.
      Use the Manage Breakpoint dialog to include or exclude visualizations from this canvas breakpoint.

    • Click a visualization from the list to exclude or include in the canvas for this canvas breakpoint, then click OK.
      Use the Manage Breakpoint dialog to exclude or include visualizations and dashboard filters from the canvas for this breakpoint.

  8. Optional: Create a visualization and add it to a breakpoint by selecting data from the Data panel, and adding it to the canvas.
    The new visualization is added to the current breakpoint only, however you can add the visualization to other breakpoints on the canvas by selecting the visualization from the list in the Manage Breakpoint dialog for that breakpoint.
  9. Optional: Optimize the display of visualizations for a canvas breakpoint.
    You might want to optimize the content to display on a smaller device, such as a mobile.
    • Rearrange visualizations - Click and drag visualizations to a new position.
    • Optimize visualizations - Use the Properties panel to hide unnecessary content, such as the title, or the legend.
    When you optimize visualizations for a breakpoint those changes don't apply to other breakpoints in the canvas.
  10. Click Save.