Graph widget

The Graph widget allows you to choose from multiple graph types to visualize a filtered group of records. You can select the visualization type that best suits your data, including bar, line, area, step, and pie. This can be helpful for easily identifying how many tasks are left in a Project or in a department’s pipeline steps.

In this step-by-step tutorial, we will cover how to create a graph to show which Tasks are overdue. We will also provide examples of other common graphs, such as the duration of Tasks that are left to do in a Project and which Tasks are left to do per department.

Graph dashboard

Note: Graphs display a subset of the entity you choose to graph. For example, the below graph shows the number of Tasks that are final per Pipeline Step.
Final Tasks per Pipeline Step

Step 1: Add a Graph widget.

To add a Graph widget to a page, create a new page from the + page button and select Canvas as the type.

Create page

You can also choose Design Page under Page Settings, and then create a New View and select Canvas under View Type, for existing pages.

Step 2: Drag and drop the Graph widget onto the View.

Wdigets tab

Step 3: Choose an entity to graph.

Use the dropdown list to select the entity you want to graph by. For this tutorial, we’ll be selecting Task.

If you need to change the entity to graph, you can do so within the widget, in the Entity Type dropdown.

Task

Step 4: Give the graph a name.

Widget name

Step 5: Determine what to graph.

  1. To see overdue Tasks by Pipeline Step, choose Pipeline Step under “Graph.”
  2. The “Display” setting will determine what appears next to the bars.

Overdue Tasks per Pipeline Step

Step 6: [Optional] Design your graph.

You have several options on how to display your graph, starting with the graph type:

  • Legacy
  • Horizontal
  • Vertical
  • Pie

In this tutorial, we’ve selected the horizontal type.

The legacy type will display a horizontal bar chart, with each bar the same color (you can choose a custom bar color). This type has the least number of options for configuration.

Note: The legacy type is in place so as not to disrupt any existing graphs you may have. However, the legacy type will eventually be deprecated, and you can continue to display horizontal graphs with the horizontal type.

The horizontal type displays horizontal graphs. You can choose from the following options:

  • Bar
  • Line
  • Smoothed Line
  • Area
  • Step

Hover over the data points to see the percentage of each. You can also click on the the graph data points to see the source data.

The vertical type displays graphs as a vertical bar chart. This type of graph has the same options and features as the horizontal type.

Note: Both the horizontal and vertical types can display a negative value. There’s an option to choose a custom “Negative Color.”

The pie type displays graphs as a pie chart. You can turn your pie chart into a donut shape using the “Inner Radius (%)” option.

Note: Graphs are responsive to your screen size, though if you resize your browser you may need to refresh your page to see the changes.

Additional options

  • Show the total number of items in the graph by checking the “Display Total” box.
  • Limit the number of graph categories, such as a status, by entering a number in the “Max Categories” box.
    Max categories
  • Group data in your graph, such as by Pipeline Step, by choosing a value under “Group.” You can turn the display of groupings on and off by clicking on the legend. Note that this is only valid in your session and will not be saved. If you want to save your display, use filtering.
    • Hover over the graph to see a tooltip with the number of items in your group and the number of total items in your category.
    • Choose whether or not to stack your graph. You can stack in “Regular” mode or “100%” mode. The 100% mode is useful in showing the ratio of groups in the same category. In that case, the stack will take the whole height or width, and display the groups based on the proportion against the category total.
Note: If you are graphing statuses, you can choose to use the default set of colors, or use your own color scheme. To use your own color scheme, go to the Status List page and change the status background color. Note that the background color you choose will also appear in the status field’s cell.
Status list Status background color
  • Sort your graph by either Status Order or Pipeline Step Order.
    Sort pipeline order
    Learn more about editing your pipeline step order or your status order to get the best results.

Step 7: Include all projects.

For this graph, unselect Project so that the graph includes all projects.

No project

Step 8: Add filters to the graph.

Add Status is not final and Due Date is before Today.

Filters

And that’s it!

Sorty by order

Additional graphs

Below are examples of two other common, useful graphs.

Left to Do by Project (Task count)

For this graph, you will need to:

1. Graph by Project

Graph by project

2. Display Count

display count

3. Filter by Status is not final

Filters status

Left_to_do_per_Project__Task_Count_.png

Left to do by Pipeline Step

For this graph, you will need to:

1. Graph by Pipeline Step

Graph by step

2. Display Count

display count

3. Filter by Status is not final

Filters status

Left_to_do_per_Pipeline_Step_-_Pie.png

Presets

There are four preset graphs, which come pre-configured to get you started with some common visualizations:

  • Tasks Status: A pie chart showing statuses of Tasks.
  • Tasks Per Department: A vertical bar graph showing the number of Tasks per department.
  • Versions Per Entity: A vertical bar graph showing iterations—the number of Versions per entity.
  • Versions Status: A pie chart showing statuses of Versions.

You can use these preset graphs as-is, or as a starting point for your own custom graph. The Tasks Per Department and Versions Per Entity graphs have been pre-configured to be grouped by status and use status colors.

Pro tip: Make sure to optimize your graph’s filters, so as not to slow down your site.
Follow

1 Comments

  • 0
    Avatar
    Lisa Kapitsas (Hangar 13 Games)

    Is it possible to create a burn-down chart with this or another widget? If so, is there a guide for burn-down? All I can find is an image of a sprint burn-down in this video... https://www.youtube.com/watch?v=EIkTBTZiAUc 

    Edited by Lisa Kapitsas (Hangar 13 Games)
Please sign in to leave a comment.