You are here: Reporting > Working with the Chart Editor

Report Definitions
Working with the Chart Editor

Use the Chart Editor to add or edit a chart for a summarized report.

To define a chart, a report must have at least one numeric aggregated (or "summarized") column and one non-aggregated (or "group by") column. A summarized column contains data that is summarized using one of the following built-in functions:

Examples of summarized columns include counts of class instances (or record counts), total dollar amounts, average elapsed time between the start and resolution of a work item, the most recent (maximum) date value, and the earliest (minimum) date value.

Columns that do not contain summarized data are group by columns. The group by columns organize the summarized data. For example, you can display summarized values based on numeric properties.

You can access the Chart Editor from the Charts tab of a Report Definition rule form, or from the Report Editor.

Layout

The Chart Editor has three sections:

The Preview pane is only available when the Chart Editor is run from the Report Editor, and not from the Report Definition rule form.

Toolbar: Select chart type and subtype

Select from a wide range of charts by clicking the icon for the chart type and its subtype. To see the complete list of chart types, click the All Chart Types link.

Chart type Subtype
Map

Hundreds of maps are provided that you can use for displaying report data. You need to select an appropriate map and set default mappings for specific maps and the property values of specific classes on the Maps tab of the Reporting Settings landing page.

When you run the Chart Editor through the Report Editor, maps are not available because some configuration steps must be performed on the Reporting landing page. Open the Report Definition rule form in the Designer Studio and open the Chart Editor on the Chart tab to select map types and subtypes.
Combo Charts

Combo charts let you combine a column chart and a line chart in a single display. In a combo chart, the values for one aggregated numeric column appear as columns on the chart, and the values for another aggregated numeric column appear as lines. In Single Y-Axis combo charts the same scale applies to both columns and lines; in Dual Y-Axis charts different scales are used for the columns and lines.

  • Single Y-Axis Clustered — There is a single Y-Axis, and the columns on the chart are clustered.
  • Single Y-Axis Stacked —  There is a single Y-Axis, and the columns on the chart are stacked.
  • Dual Y-Axis Clustered — There is a Y-Axis on the left that applies to the columns and a Y-Axis on the right that applies to the lines, and the columns on the chart are clustered.
  • Dual Y-Axis Stacked —  There is a Y-Axis on the left that applies to the columns and a Y-Axis on the right that applies to the lines, and the columns on the chart are stacked.
Area
  • Overlaid — Values display as separate "mountain ranges", usually with the property with the lowest overall values in front.
  • Stacked — Values display as "layers" in the chart at each data point.
  • 100% —The total of all values at each data point equals 100% of the height of the chart.
Funnel
  • Normal — The segments of the funnel are touching.
  • Exploded — The segments are slightly separated from each other, to allow for easier interpretation.
Pyramid
  • Normal — The segments of the pyramid are touching.
  • Exploded — The segments are slightly separated from each other, to allow for easier interpretation.
Bubble

Use a bubble chart to show three interdependent numeric parameters. For example, an investments report could show, in a bubble chart, the age of each investment, the amount invested, and the instrument's ROI.

Only one bubble chart type is available.
Pie
  • Normal — The pie segments rest against each other.
  • Exploded — The pie segments are pushed outward slightly from the center, allowing some white space between segments for easier chart reading.
  • Doughnut — The center of the chart is uncolored. The segments form a circle, at a distance from the center of the chart, with the edges of contiguous segments touching.
Bar
  • Clustered — Bars are grouped together, for instance divisional sales could be grouped by quarter.
  • Stacked — The bars of a given group (divisional sales per quarter) are attached together so the resulting bar represents total sales for the quarter.
  • 100% — Each group's bars are attached together, but the total for each resulting bar is always 100% of the width of the chart.
Column
  • Clustered — Columns are grouped together, for instance divisional sales could be grouped by quarter.
  • Stacked — The columns of a given group (divisional sales per quarter) are stacked together so the resulting column represents total sales for the quarter.
  • 100% — Each group's columns are stacked together, but the total for each resulting column is always 100% of the height of the chart.
Line
  • Segment — Values over time (or some other factor) are represented by a line. Changes in value are indicated by sometimes-sharp changes in angle of the line.
  • Curved — Changes in value are represented by a curved line.
  • Step — Changes in value are represented as steps either higher or lower, with the first entry as a horizontal representing the first value.
  • Reverse Step — Changes in value are represented as steps either higher or lower, with the first entry as a vertical from the first to the second value.
  • Horizontal
Spark

Spark columns and spark lines are microcharts, typically displaying trend information, that can be embedded within a layout cell.

  • Line — The data appears as points on lines
  • Column — The data appears as columns
Gauge

Gauges can be very effective in displaying burn rate, throughput and other measurements of current state. The options range in visual layout from tachometers to LED displays to a thermometer.

  • Angular 1
  • Angular 2
  • Angular 3
  • Angular 4
  • Angular 5
  • Linear
  • Horizontal LED
  • Vertical LED
  • Cylinder
  • Thermometer

Toolbar: Other commands

To the right on the toolbar are a series of command links that let you specify general format settings for your chart:

Link Form
Title

Click to display the Chart Title form. Provide a title for the chart. Optionally, adjust the font size and font weight, using the drop-down menus to the right of the Title field.

Click OK to apply the title to the chart; click Cancel to abandon your edits and close the form.
Color Settings

Click to display the available color options for the currently-selected chart:

  • General color settings — You can define a background color for the chart by entering a color code as a hex value or by clicking and using the Color Picker tool. The square to the right of the field displays the color you have selected. A smaller square displays the nearest web-safe color, one that is most likely to display well across all browsers. Click the small square to pick that color.

    For 2D display of charts, you can have colors display as solid colors or as gradients. Check the Use solid colors in 2D Charts check box to have the colors display as solids; uncheck it to use color gradients. This feature is available for combo, area, pie, bar, and column charts

    The Define a Palette of Available Colors option lets you define a set of colors that will be applied to chart elements, such as pie slices or columns. If there are fewer colors in your palette than the chart needs, the chart selects additional colors from the standard palette.

    For maps, if you specify a custom color palette, the map uses only those colors for map regions or areas.

    Click "Add Color" to add a color to the palette, as described above. Click the garbage can at the right of any row to remove that row.
  • Conditional Colors — Here you can define colors that are conditionally applied to chart elements (such as pie slices or columns) based on either numeric values or Group By column values displayed on the chart. You can, for example, display columns in a column chart with a value over 100 as red. You may define conditional colors that are based on the numeric value associated with a chart element, or that are based on the Group By column value for the element.

    Click Add Conditional Color to add a new color. Each conditional color consists of a condition (e.g., Is Equal New, Is Greater or Equal 100), and a color code as a HEX value, as described above.

    Click the garbage can icon at the right of any row to remove that conditional color.

  • Threshold Colors — Here you can define colored lines or colored regions that to display on the chart grid. For example, on a line or column chart you can display a red line, parallel to the x-axis, at a value of 100 on the y-axis.

    Click Add Threshold Color to add a new color threshold. Each threshold color consists of a condition (e.g., Is Equal to display a colored line, Between to display a colored region), a value or range of values, a color code as a HEX value, as described above, and an optional label to be displayed next to the colored line or region.

    Click the garbage can icon at the right of any row to remove that conditional color.
General Settings

Click to display three options:

  • Format Options — You can specify:
    • The default font size and weight for all labels on the chart.
    • The default chart size (small, medium, large, or custom). If you choose custom, you can specify the chart height and width in pixels.
    • Whether to use Version 5 or Version 6 charts. If you select Version 6 charts, you can also choose whether to show a border or show the initial display in 3D.
    • Whether the chart displays in 3D or 2D, if the chart type supports 3D.
  • Legend Options — Select the "Show Legend" check box to have a legend (the explanation of the colors or shapes used) display with the chart. Use the drop-down menus to set the direction and location of the legend on the chart.
  • Enable User Commands in Viewer — Specify which commands are available to end users when the chart is displayed. These commands display above the chart in the Report Viewer; they do not display in the Preview Pane of the Chart Editor. The commands that are available depend on the chart type.
    • Switch Between 2D and 3D
    • Maximize Chart in Window
    • Show Detailed Data in Embedded Chart
Remove Chart Click to remove the existing chart from the report.

Return to top

Using the Design Pane

The Design pane on the left of the Chart Editor lets you quickly specify which report columns to include in the chart, and how the report uses them. At the top of the pane is a list of Available Columns. Columns already used in the chart are indicated with check marks.

The lower part of the pane is a static picture of the selected chart type and subtype, with one or more Drop Zones, dotted rectangular areas that represent, depending on the chart, where and how report columns can be used within the chart.

To include a column in the chart, drag and drop any column from the Available Columns list to a drop zone. A green check mark appears if the column is over a drop zone where it can be used. If a drop zone already has a column associated with it, dropping a different column there replaces the original column.

A small gear icon is available for each drop zone. Click the icon to display the Data Settings form. Here you can specify formatting and other options that are specific to the column in the drop zone. The available options depend on the chart type and the type of data in that column.

Field Chart types Details
Number Format All

Select from:

  • General
  • Decimal
  • Currency
  • Percent
  • Custom

Click the blue chevron to the right of the main field to display additional settings fields for refining the data settings. Your selection here governs some settings in the additional fields; conversely, if you change some of the settings in the additional fields, the main setting will change to Custom.

Click the chevron again to hide the optional fields.

Note: different optional fields appear depending on the number format selected

  • Scale — Select from None, Number, Time to specify the values along the axis against which the data will be plotted. Choose None to have no axis values display.
  • Decimal Places — select Auto or a number.
  • Force Decimals? — Check the check box to force 0 displays in the decimal fields, even if the number has no decimal value.
  • Prefix — Provide an optional prefix for the displayed data. For example, if you chose the Currency number format, make sure the
  • Suffix — Provide an optional suffice for the displayed data.
  • Separators — Specify, for numbers, whether to display using commas (1,000) or periods (1.000).
Axis Label All Provide a label to appear along the axis, or along the bar in a bar chart.
Bar Width Ratio Bar Set the percentage of the chart the bars can cover. "0.9" means "90%" of the area is bars, with the rest as background.
Show Low/High Values Spark line Check the check box to show the lowest and highest values for the chart.
Show Open/Close Values Spark line Check the check box to show the values at the start and end of the selected period.
Limit to Top Pie, Bar

For a pie chart, specify the maximum number of pie pieces, either "No Limit" or a specific number. 

For a bar or column chart, specify a maximum number of one of the values displayed in the chart.

 
Grid Lines Bar Check the check box to display grid lines.
Grid Labels Bar Check the check box to display grid line labels.
Data Tooltip Bar Check the check box to display a tooltip when the user hovers the mouse pointer over a chart value.
Treat blank as zero Bar Check to treat blank status values for a particular date/time as zero.
Show All Labels Pie

Check to show labels for all pie pieces. Click the chevron to show additional fields:

  • Data: Select to display data for each pie piece
  • Data Tooltip: Select to display a data tooltip when the user hovers the mouse over a pie piece.

If you select Data, additional label options are available:

  • Data Placement — Specify whether data appears outside the chart, or as a callout.
  • Include Value — Check the check box to have the value appear in the chart segment.
  • As Percent? — Check the check box to have it appear as a percentage of the total.
  • Include Name — Check the check box to have the data object's name appear.
  • Data Tooltip — Check the check box to enable a tooltip that displays information about the value.

 
Format Pie, Map, Combo Select a format for the axis label.
Series Format Bar, Column, Combo Select a format for the bar or column label.
Grid Labels Bar Select the check box to display labels for the grid lines.
Orientation Column Specify whether labels on the axis appear vertically or horizontally.
Line Weight Line Specify the width, in pixels of the data lines.
Minimum Label Gauge Specify the lowest labeled value on a gauge.
Maximum Label Gauge Specify the highest labeled value on a gauge.
Minimum value Gauge Specify the lowest measurement on a gauge.
Maximum value Gauge Specify the highest measurement on a gauge.
Tick Location Gauge Specify whether the ticks, or unit indicators, on a gauge appear inside or outside of the gauge.
Show Tick Values Gauge Check the check box to display the numeric value of each tick on the gauge.

A small x appears to the left of the name of any column in a drop zone. Click the x to remove the data for that column from the chart.

Related Topics Link IconRelated Information

Open topic with navigation