Build an infographic template

Infographics in Business Analyst Web App allow you to visualize key indicators and information for your sites. You can build and run custom infographic templates that contain elements such as charts, graphics, tables, images, and text.

License:

The Build Infographics workflow is available to users with a Business Analyst Web App Advanced license. To learn more about Business Analyst license types, see Licenses.

There are two ways to create a custom infographic template: modify an existing template or start with a blank template. Once you have chosen a template, you add elements and finalize the design. Optionally, you can organize elements in panels so you can move and modify them in groups. Once you have finalized the template's design, save it to the My templates tab.

Modifying an existing infographic template is useful when you need an infographic similar to another available template, such as a standard template or a template you previously saved. For example, consider the scenario in which the Key Facts template is mostly suitable for your use, except that you don't need the Business infographic panel in it. You can replace the Business panel with another panel to create your own Key Facts infographic template.

Starting with a blank template is useful when you need an infographic that isn't similar to any available template.

To build an infographic template, complete the following steps:

  1. On the Reports tab, click Build reports and click Build infographics.

    The infographic builder appears.

  2. Choose a template by hovering over it and clicking Open. Browse available templates in the following sections:
    • Standard templates—Ready-to-run templates that you can customize.
    • My templates—Templates that you added or created and saved.
    • Shared templates—Templates that others in your organization shared with you.
    • Blank templates—Blank templates with or without a layout, containing no elements. You can also create your own blank template.
    • Gallery—A curated collection of infographic templates. Click Filter Filter to filter the list by type. Use the toggle buttons to include or exclude categories of infographics in the list.

    The template opens in edit mode.

  3. Insert or edit elements and panels. Do any of the following:
    • To add or replace an element in a panel, hover over it and click Add Add or Replace Replace. Choose the type of element you want to add.
    • To edit an element or panel, hover over it and click Edit Edit. For example, if the panel contains a chart, you can modify the chart type and variables. For some panels, you can add multiple elements by clicking Add element when the panel is open in edit mode.
    • To move, remove, split, or merge a panel in a grid, hover over the panel to activate these options.
    • To use panel options, hover over the panel in the template and click Panel options Panel options.
  4. Customize the template by adding or replacing elements, applying a theme, modifying the layout, and adjusting the settings. Click Undo Undo to undo the most recent change and Redo Redo to restore the most recent undo. Do any of the following:
    • To apply a theme to the template, click Theme. You can choose a saved theme or create one. A theme includes color and font settings, background image, and additional options.
    • To add an element, click Add element Add element and choose the type of element to add. Alternatively, click Add panels from another template to choose a panel or multiple panels from another infographic template.
    • To align elements, expand the Align drop-down menu.
    • To show, hide, and reorder layers, click Layers.
    • To add a page to the template, click Add page.
    • To modify settings for the template, click General settings General settings.
  5. Click Save.

    The Save infographic template window appears.

  6. Optionally, edit the title. Click Show infographic metadata to view and edit the metadata for the template.

    The metadata fields provide information about the template: Data vintage, Data description, Author, and Keywords. Metadata fields are populated based on the variables included in the template.

  7. Click Save.

    The Infographic saved window appears and the template is saved under the My templates tab.

  8. Optionally, use the check box to set this infographic as the default infographic. Click OK to close the Infographic saved window.

Add an element

You can add an element to your template. In the Add element menu, click the type of panel you want to add:

  • Chart—Add a chart by selecting the variables to include. You can customize the chart style and data. To learn more, see Work with charts.
  • Image—Choose a shape or icon or upload an image. You can resize, rotate, and customize the placement of image elements. To learn more, see Work with images and text.
  • Text—Add a text box with plain text, text with styling, or a variable value. You can customize the content and visual style of the text element. To learn more, see Work with images and text.
  • Infographic—Add an infographic panel, such as Housing stats or Age pyramid. You can choose an infographic panel by browsing, by searching, or by clicking Create infographic panel to create your own. To learn more, see Work with infographic panels.
  • Table—Add a table with variables, a comparison table, or a custom table. To learn more, see Work with tables.
  • Map—Choose a basemap or a web map available in ArcGIS. To learn more, see Work with maps and Nearby panels.
  • Nearby—Add a table summarizing point locations near your sites. To learn more, see Work with maps and Nearby panels.
  • Interesting facts—Add a panel that reveals information about your sites that makes them distinctive compared to other selected areas. To learn more, see Work with interesting facts panels.

Align panels

You can align panels in your infographic template to achieve a symmetrical or regular layout.

Note:

Panels contained in grids have a predetermined layout. Manual aligning is disabled for these panels.

  1. Click a panel in the template to choose it or press Ctrl while clicking to select multiple panels.
  2. Click Align to expand the drop-down menu.
    Note:

    For some templates, selecting panels is disabled. When you click Align, such templates open in align mode. To learn about align mode, see Align elements.

  3. Choose Align to page or Align selected.

    If you choose Align to page, the panel or panels are aligned in the way you specify (such as to the left, center, or right). If you choose Align selected, the selected panels are aligned relative to each other.

  4. Use menu options to align the selected content in the template.

    You can align panels left, center, right, top, middle, or bottom. If multiple panels are selected, you can also specify the way they are distributed on the page.

Align elements

To align elements within a panel, you can edit the template in align mode. To align elements, complete the following steps:

  1. Click Align to expand the drop-down menu.
  2. Click Align elements with panels.

    The template opens in align mode.

  3. Select one or more elements and choose Align to parent or Align selected.

    If you choose Align to parent, the selected items are aligned in the way you specify (such as to the left, center, or right). If you choose Align selected, the selected panels are aligned relative to each other.

  4. Use menu options to align the selected content in the template.

    You can align panels left, center, right, top, middle, or bottom. If multiple panels are selected, you can also specify the way they are distributed on the page.

  5. Click Apply to apply your changes to the template.

Add a page

Additional pages allow you to include more information in your infographic template. To add a page to a template, do the following:

  1. Click Add page.
  2. To add a blank infographic page, on the Add page drop-down menu, choose Current layout or Select layout.
    • Choosing Current layout adds a page with the same layout as the current page. Depending on the template, this could be a blank page.
    • If you choose Select layout, the Choose new page layout window appears. Choose an available layout.

    A page with the chosen layout is added to the template.

  3. Alternatively, click Add panels from another template.

    The Add panels from another template window appears.

  4. Find a template by browsing, searching, or using the Sort by drop-down menu. Hover over a template and click Open.

    If you chose a single-page template, it is added as a new page. If you chose a multipage template, under Select a page to add to your template, choose one of the pages in the template. It is added as a new page.

    Note:

    When adding a page from another template, the background image of the current template is maintained.

Use panel options

Panel options include dimensions and border style and options to copy or move the panel. To use panel options, complete the following steps:

  1. Hover over a panel in the template and click Panel options Panel options.

    The Panel options window appears.

  2. Under Dimensions, modify the height and width of the panel. Optionally, when available, check the Preserve text size when resizing check box to prevent the text in the panel from being proportionately resized when the dimensions of the panel are modified.
  3. For free-floating panels, under Arrange & position, arrange the panel relative to other panels by clicking Bring to front, Send to back, Bring forward, or Send backward. Use the Left and Top fields to manually modify the position of the panel in the template.
  4. For panels in a grid, under Border, select the location and style for panel borders.
  5. Click Copy panel, Cut panel, and Paste panel to copy, remove, or move the panel using the clipboard. Click Duplicate panel to create a copy of the panel.

Preview layouts

Layouts in the infographic builder are views of the infographic in different formats, such as on different size screens or in a vertical stack. To preview layouts, do the following:

  1. Turn the Preview other layouts toggle button on to preview the template.
  2. To view how the template would look on different size screens, click any of the Device buttons.

    The screen sizes are large (computer size screen), medium (tablet size screen), and small (mobile phone size screen).

  3. To change the dimensions of the template, do either of the following:
    • Click the Dimension drop-down menu and select a different template size.
    • Manually enter a custom width and height.
  4. Click the Layout drop-down menu and select from the options:
    • Use Auto to view a responsive layout mode based on screen size.
    • Use Full page to view the full infographic in a single page.
    • Use Stack mode to view the infographic panels in a vertical stack. To adjust the order of the panels, do any of the following:
      • Hover over a panel and click Move up or Mode down to adjust the order of the panels in the infographic.
      • Click a panel and drag it to manually reorder the panels.
    • Use Slide mode to view the infographic panels one at a time as a slideshow.
    • Use Side by side comparison to view all analysis areas side by side. To modify the layout, click Comparison settings General settings and do any of the following:
      • Uncheck the Show background image and elements check box.
      • Check the Compare individual variables check box to show variables in infographic panels as separate panels when applicable.
      • Increase, decrease, or enter a manual value to adust the spacing around variables in the infographic panels. Click Reset to reset to the default zoom and spacing.
  5. Turn the Preview other layouts toggle button off to exit the Preview other layouts mode.

Modify template settings

You can modify settings for a template, such as page size, margins, and tooltip settings. To modify settings, complete the following steps:

  1. Click General settings General settings.

    The General settings window appears.

  2. Under Page size, expand the drop-down list to choose a different page size.

    For all page sizes except Custom, you can additionally choose either Portrait or Landscape orientation.

  3. Under Page margins, modify the page margins.
  4. Under Chart tooltips, use the check boxes to select the information shown in chart tooltips. Under Table tooltips, use the check boxes to select the information shown in table and infographic panel tooltips.

    When viewing an infographic, tooltips provide more information when hovering over an element.

Work with infographic layers

You can show, hide, and reorder panels and layers in an infographic. A panel appearing on top of other panels may obscure the ones below, depending on transparency settings. To work with layers, complete the following steps:

  1. Click Layers Layers.

    The Layers window appears. Panels are grouped into layers named Foreground and Background.

  2. Optionally, use the Sort by drop-down menu to do either of the following:
    • Click Back first for the elements in the back to be shown first in the list. If you use this option, the panels will appear in the order used for Stack, Slide, or Side by side comparison mode.
    • Click Front first for the elements in the front to be shown first in the list.
  3. To work with layers, do the following:
    • Expand or collapse a layer in the list to view the panels contained in it.
    • Click Show or Hide to change whether a panel is displayed in the infographic.
    • Click Options Options to adjust a layer's transparency, hide all panels contained in it, or show all panels.
  4. To work with individual panels, do the following:
    • Hover over a panel name in the Layers window to highlight it in the template.
    • Move a panel by clicking the up and down arrows, or by dragging the panel to a different order.
    • Click Show or Hide to change whether a panel is displayed in the infographic.
    • Click Edit Edit to open the panel for editing.
    • Check the Hide from stack and slides check box to hide the panel when the infographic is displayed in Stack, Slide, or Side by side comparison mode.

Apply a theme

Custom infographic templates use the default color and font settings. To customize the template's visual design, you can create your own theme or apply a saved theme. Once created and saved, a theme can be applied to any template. To apply a theme to your template, complete the following steps:

  1. Click Theme Theme.

    The Infographic template theme window appears.

  2. To use a previously saved theme, choose it from the Use saved themes drop-down menu.

    The template preview automatically updates to show how the chosen theme customizes the appearance of your infographic.

  3. Under Select a color theme for your template, choose a color theme or individually set the colors for the background, icons, and highlighted icons.
  4. Under Select a principal font for your template, set the color, style, and font for text in the template.
  5. Under Add a background image to the template, click Browse to upload an image.
    1. In the Confirmation required window, choose Remove background colors in tables and other panels to remove all panels' background colors. To preserve panels' background colors, choose Only change background image.
    2. Use the Transparency slider to adjust the transparency of the background image.
    3. Optionally, if the uploaded image is smaller than the page size, check the Repeat check box to tile the image across the background.
    4. Optionally, if the uploaded image is smaller or larger than the page size, check the Scale check box to resize the image to fit the page.
  6. Click Advanced options to set colors, styles, and fonts for individual infographic elements such as tables, charts, and ToolTips.
  7. Optionally, click Save theme.

    The Save theme window appears. Provide a name for the theme and click Save.

  8. Click Apply.

    The theme is applied to the template.

Add an interactive experience

When you run an infographic, an interactive experience is a pop-up panel that appears when you hover over an element and click Explore for more in the tooltip. Interactive experience pop-ups are available for panels that include variables. To add an interactive experience for a variable in your template, complete the following steps:

  1. Hover over the element and click Edit.

    The element opens in edit mode.

  2. Hover over the variable and click Add interactive experience Add interactive experience.
  3. Click Add interactive experience.

    The Choose an element to insert in this panel window appears.

  4. Click the type of element you want to add. See Add an element.
  5. When finished customizing the element, click Apply.

    The interactive experience panel is added for the variable.

  6. Hover over the interactive experience panel, click More options, and do any of the following:
    • Click Copy panel to copy the interactive experience.
    • Click Apply this panel to all variables to add the interactive experience to all variables on the panel.
    • Modify the width and height of the panel.
    • Check the Include this panel in export check box to include the interactive experience when the infographic is exported as a PDF. When enabled for one panel, this option must then be enabled for any other interactive experience panel that is to be included in an export.
      Note:

      This option restricts which panels are included in PDF exports for all users of your template.

  7. Click Save.

Set preferences

You can set preferences for Business Analyst Web App in the application preferences. For building infographics, you can select the units of measurement used and set preferences for interesting facts panels. Administrators can set preferences for the entire organization.

To set the workflow preferences, complete the following steps:

  1. On the app header, click My preferences Preferences.

    The Preferences window appears.

  2. Expand the Reports section, expand the Infographics section, and click Build infographics. Use the drop-down menu to select the units of measurement used when building infographics.
  3. In the Reports section, expand the Infographics section, and click Interesting facts. Set the following preferences:
    • Use the drop-down menu to choose the default geography level to compare with sites in interesting facts panels.
    • Click Table. Specify the number of facts to show in an interesting facts table and use the sliders to set thresholds for the analysis.
    • Click Word cloud. Specify the number of facts to show in an interesting facts word cloud and use the sliders to set thresholds for the analysis
  4. To restore the default settings, click Restore defaults.
  5. To save your changes, click Save or, optionally, click Save and close to close the Preferences window. To view your changes, refresh the app.

Workflow video