Creating an Area Chart Widget

Area charts are recommended for displaying absolute or relative values over a time period. An area chart is similar to a line chart except that the areas under each line are filled in and can be stacked.
To create an area chart:
  1. Click Dashboards tab, the Dashboards tab, and select a dashboard from the list.
  2. In the Widget library panel, click Create new widget button, the Create new widget button, to create a widget and open it in the Widget Designer.
    For more information, see Creating Widgets.
  3. In the Widget Designer, select Area Chart from the list of widget types in the top-left corner.
  4. In the data panel on the left, add data to the widget:
    1. In the X-Axis section, click Add button, the Add button, and select the field whose values you want to place on the x-axis.
      Usually, the x-axis in an area chart is used to represent time.

      You must add at least one item to the x-axis. You can add at most two items. When you add two x-axis items, the two x-axes are combined.

    2. In the Values section, click Add button, the Add button, and select the field whose values you want to place on the y-axis.
      Usually, the y-axis in an area chart is used to represent numeric data and determines the height of the area in the chart.

      You must add at least one field to the y-axis. When you add more than one field, each item is represented in the chart by its own color and area.

      Note: If one of the values uses a considerably different scale, you can add it to the right axis. Click Options button, the Options button, and select Show on Right Axis.
    3. In the Break by section, click Add button, the Add button, and select the field that you want to use to group the data represented in the chart.
      The field added in the Break by section is represented by its own area in the chart and is automatically added to the chart legend.

      You can use a Break by field under these conditions:

      • You can add only one Break by field.
      • The Break by option is available only when a single field is selected in the Values section.
      • If you used the Break by option, you can select only one field in the Values section.

  5. In the Design tab on the right, customize the appearance of the widget:
    1. Under Area Type, specify how the areas are represented in the widget.
      • Classic: Areas overlap and smaller areas appear on top of larger areas and cover them. The colors indicate the distribution between the values.
      • Stacked: Areas are stacked on top of each other and do not overlap. You can hover over the areas to see the percentage distribution among the values.
      • Stack 100: Areas are stacked on top of each other and do not overlap. The combined area is stretched to represent 100%. This option is most commonly used when the relative distribution of the values is more important than their aggregation.
    2. Under Line Type, select Straight or Smooth to specify how the line appears in the widget.
    3. Under Line Width, select Thin, Bold, or Thick.
    4. Under Legend, specify whether to show or hide the legend and set its position.
    5. Under Value Label, specify whether to show or hide labels with values and set their orientation.
    6. Under Markers, specify whether to show or hide markers over data points and set their appearance.
    7. Under X-Axis, specify whether to show or hide the x-axis and select the graphical elements that you want to include.
      These options are available:
      • Grid Lines: Displays grid lines on the x-axis.
      • Labels: Displays labels on the x-axis.
      • Title: Displays the x-axis title. You can use the default title or enter a different title in the text box.
    8. Under Y-Axis, specify whether to show or hide the y-axis and select the graphical elements that you want to include.
      These options are available:
      • Grid Lines: Displays grid lines on the y-axis.
      • Logarithmic: Displays the data using orders of magnitude.
      • Labels: Displays labels on the y-axis.
      • Title: Displays the y-axis title. You can use the default title or enter a different title in the text box.
      • Min, Max, Intervals: To change the default minimum, maximum, or interval values on the y-axis, enter new values in the text boxes. To restore any of the values to their default states, click Reset button, the Reset button.
    9. Under Auto Zoom, enable or disable the automatic zoom function.
      When a widget contains more data than can be displayed in the view, the Auto Zoom option resizes the chart automatically and, if necessary, displays a zoom bar. The zoom bar lets you scroll right and left or up and down and zoom in and out of different parts of the widget.
  6. Click Apply.
Parent topic: Creating Widgets