Versions Compared

Old Version 1

changes.mady.by.user Nikita Kamai

Saved on

compared with

New Version Current

changes.mady.by.user Katerina Kovriga

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from space TFAC and version Draft
Section
Column
width820px

Overview

Section
Column
width560px

Rendered Chart

Image RemovedImage Added

Column
width30%

Parameters in Macro Browser

Image RemovedImage Added

TypeGantt
Labels column
  • Project Phase (project) *Phase
  • Step
  • Milestone (a star that is a key a key event of a particular projectphase)
  • Event (a vertical a vertical line that doesnthat doesn't belong to any projectphase)
  • Today
  • Description of Milestone
  • Description of Event
Values column
  • Start Date *
  • End Date *
  • Completion Ratio (the percentage of completed work)
  • Date

*  - Minimum required columns to build the Gantt chart

Info

See also a blog post: 5 Tips to Become a Gantt Chart Expert Using Atlassian Confluence to learn more about the completion ratio, events, and milestones on the Gantt chart.

Project
Column
width70%

Data Tables in Macro Placeholder

Image RemovedImage Added

Project

Phase

Phase

Step

Start Date

End Date

Completion Ratio

Project

Phase One

Planning and Research

01 Jan

2019

2025

30 Jan

2019

2025

95%

100%

Project

Phase One

Development

01 Feb

2019

2025

30 Apr

2019

2025

27%

86%

Project

Phase One

Testing

01 May 2019

15 Apr 2025

15 May

2019

2025

0%

20%

Project

Phase One

Deployment

16

12 May

2019

2025

15 Aug 2025

50%

Phase

22 May 2019

0%

Two

Planning and Research

15

Dec 2018

Jun 2025

15

Jan 2019

Jul 2025

95%

0%

Project

Phase Two

Development

16 Jan 2019

10 Jul 2025

15

Apr 2019

Oct 2025

27%

0%

Project

Phase Two

Testing

16 Apr 2019

3 Oct 2025

21

Apr 2019

Nov 2025

0%

Project

Phase Two

Deployment

22 Apr 2019

18 Nov 2025

15 Dec 2025

30 Apr 2019

0%

Project

Phase

Milestone

Description of Milestone

Text

Date

Project

Phase One

RC

Сompletion of development

something

7 May

2019 

2025 

Project

Phase Two

RC

Сompletion of development

19 Apr 2019 

EventDescription of

something

30 Oct 2025

Event

Date

Todaytoday

Demo 1

Release of Demo 1

12 May

2019

2025

Demo 2

Release of Demo 227 Apr 2019

10 Oct 2025

Today

Date

Today

today

Info

Here's the example on how to calculate the completion ratio in Table Transformer.

Settings Tab

Select the chart type

To select the chart type in the page view mode:

  1. Insert the Chart from Table macro.
  2. Hover over the chart controls on the right of the table.
  3. Locate the Type option and select the chart type.  The The chart will be automatically re-generatedregenerated.
  4. To save the modifications in the macro body, click the cogwheel icon and select Save changes.

To select the chart type in the macro browser:

  1. Switch the page to the edit mode.
  2. Insert the Chart from Table macro and paste the table within the macro body.
  3. Select the macro and click Edit.
  4. Locate the Type option in the Settings tab and select the chart type.
  5. Save the macro and the page.
Handy Carousel
delay10

Image Added

 Image AddedImage Removed Image Removed

Select data series

Labels column   - the column containing  labels   for data values.

Values column   - the column or columns containing  numerical values   for chart generation.

To select data series in the page view mode:

  1. Insert the Chart from Table macro.
  2. Hover over the chart controls on the right of the table.
  3. Locate the  Labels column   and  Values column   options and select the table columns containing data for chart generation. The chart will be automatically re-generatedregenerated.
  4. To save the modifications in the macro body, click the cogwheel icon and select Save changes.

To select data series in the macro browser:

  1. Switch the page to the edit mode.
  2. Insert the Chart from Table macro and paste the table within the macro body.
  3. Select the macro and click Edit.
  4. Locate  the  the Labels column  and  and Values column  options  options in the Settings tab and select the table columns containing data for chart generation.
  5. Save the macro and the page.
Handy Carousel

Image Removed Image Removed

Adjustments Tab

delay10

 Image Added

Image Added

Adjustments Tab

Set the decimal separator

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the Decimal separator option.
  5. Specify the correct decimal separator for numeric values in the source table (point or comma).
  6. Save the macro and the page.

Image Added

Set the table data orientation

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the Table data orientation option.
  5. Select the Vertical or Horizontal option.
  6. Save the macro and the page.

Image Removed

Image Added

Set the minimal and maximal values

Minimal value - the minimal value for showing only data values greater than the specified minimal value.

Maximal value - you can specify the maximal value for showing only data values not greater than the specified maximal value.

Set the decimal separator

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the Decimal separator option.Minimal and Maximal value options and set the values.
  5. Save the macro and the page.

Image Added

Set the scale step

Scale Step - the required scale step for showing the numeric values in the chart.

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the appropriate option depending on the chart type and set the scale stepSpecify the correct decimal separator for numeric values in the source table (point or comma).
  5. Save the macro and the page.
Image Removed

Image Added

Date & Worklog Tab

Set the date format

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments Date & Worklog tab.
  4. Locate the Date format option.
  5. Specify the correct date format for date values in the source table.
  6. Save the macro and the page.
Info
If the app detects the incorrect date format in the page view mode it presents you with the note panel where you canenter the correct date format. It is saved automatically if it is treated as the correct date format.

Image RemovedImage Added

Set the worklog settings

Info
Please ensure that the worklog parameters set in the macro are identical to parameters configured in Atlassian JIRA.
  1. Switch the page to the edit mode.
  2. Select the macro and click Edit .
  3. Switch to the Adjustments Date & Worklog tab.
  4. Click the Set worklog settings button.
  5. Locate the Worklog settings option.
  6. Define In the opened form, define the worklog parameters, as follows:
    1. Days in year - enter the number of days in a year.
    2. Days in week - enter the number of business days in a week.
    3. Hours in day - enter the number of working hours in one business day.
    4. Time format - select the used time format in worklog values.
    5. Year shortening - enter the shortening for the year time unit if you use any language different from English.
    6. Week shortening - enter the shortening for the week time unit if you use any language different from English.
    7. Day shortening - enter the shortening for the day time unit if you use any language different from English.
    8. Hour shortening - enter the shortening for the hour time unit if you use any language different from English.
    9. Minute shortening - enter the shortening for the minute time unit if you use any language different from English.
  7. Save the macro and the page.
Info
Worklog time units in different languages are denoted with different shortenings. Please adjust them according to your JIRA localization settings.

Image Removed

Set the minimal and maximal values

Minimal value  - the minimal value for showing only data values greater than the specified minimal value.

Maximal value  - You can specify the maximal value for showing only data values not greater than the specified maximal value.

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the Minimal  and  Maximal value  options and set the values.
  5. Save the macro and the page.

Image Removed

Set the scale step

Scale Step  - the required scale step for showing the numeric values in the chart.

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the Adjustments tab.
  4. Locate the appropriate option depending on the chart type and set the scale step.
  5. Save the macro and the page.

Image Removed

Image Added

Appearance

Look

Tab

Set the height and width of the chart

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the LookAppearance tab.
  4. Locate the Height and Width fields.
  5. Enter the appropriate dimensions of the chart.

  6. Save the macro and the page.

Info

To set the Height and Width of the chart in the page view mode:

  1. Hover over the chart controls on the right of the table.
  2. Locate the Height and Width fields.
  3. Enter the appropriate dimensions of the chart.
  4. To save the modifications in the macro body, click the cogwheel icon and select Save changes.
Info

 Add /bar after the height value to set the height of bars.

Handy Carousel
delay10

Image Removed Image Removed Image Removed

Set colors

 Image Added

Image Added

Image Added

Align chart

  1. Switch the page to the edit mode.
  2. Select the macro and click Edit.
  3. Switch to the 
Look
  1. Appearance tab.
  2. Locate the 
Select colors button and click it
  1. Align chart option.
  2. Select the appropriate
colors for each label.
  • To set individual column colors, locate the Color scheme option.
  • Select the Multicolor or Colors in the table columns option.
  • Select the appropriate colors for each column for the Multicolor option.
    • Select the corresponding columns with colors for the Colors in the table columns  option. You can use colors from  this list  or define your own HEX code colors.
    1. chart alignment, as follows:
      • Left
      • Center
      • Right
    2. Save the macro and the page.
    Info

    To set the colors in the page view mode:

    1. Hover over the chart controls on the right of the table.
    2. Click the cogwheel icon, locate the Select colors option. Select the Multicolor or Colors in the table columns option. Pick the colors or columns with colors and click Apply. The chart will be automatically re-generated.
    3. To save the modifications in the macro body, click the cogwheel icon and select Save changes .
    Handy Carousel
    delay10

    Image Removed Image Removed

    Image Removed

    Image Added

    Set the chart title

    Align chart

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the LookAppearance tab.
    4. Locate the Align chart option.
    5. Select the appropriate chart alignment, as follows:
      • Left
      • Center
      • Right
    6. Chart title option and enter the title.
    7. Save the macro and the page.

    Image Removed

    Image Added

    Set axis labels

    Show grid

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the LookAppearance tab.
    4. Locate and enable the Show grid optiontheRow axis label andDate axis label options and enter the labels.
    5. Save the macro and the page.

    Image RemovedImage Added

    Show/Hide source data

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the Appearance tab.
    4. Locate the Source data option and select the appropriate option, as follows:
      • Show all content
      • Hide tables
      • Hide all content
    5. Save the macro and the page.
    Info

    To show/hide source data in the page view mode:

    1. Hover over the chart controls on the right of the table.
    2. Click the cogwheel icon, select the the Show source content, Hide source content (Hide tables, Hide all content) option option.
    3. To save the modifications in the macro body, click the cogwheel icon and select Save changes.
    Handy Carousel
    delay10

    Image RemovedImage Added

    Image RemovedImage Added

    Image Removed

    Show grid

    Hide chart controls

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the LookAppearance tab.
    4. Locate and enable the Hide chart controlsShow grid option.
    5. Save the macro and the page.

    Image RemovedImage Added

    Set the

    Hide chart

    title

    controls

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the LookAppearance tab.
    4. Locate the Chart title option and enter the titleand enable the Hide chart controls option.
    5. Save the macro and the page.
    Image Removed

    Image Added

    Colors Tab

    Set

    axis labels

    colors

    1. Switch the page to the edit mode.
    2. Select the macro and click Edit.
    3. Switch to the 
    Look
    1. Colors tab.
    2. Locate the Color scheme field and choose the
      Row axis label  and  Value axis label  options and enter the labels.
    1. required option: Single color, Multicolor or Colors in the table columns option.
    2. Save the macro and the page.
    Info

    To set the colors in the page view mode:

    1. Hover over the chart controls on the right of the table.

    2. Click the cogwheel icon, locate the Select colors option. Select the Multicolor or Colors in the table columns option. Pick the colors or columns with colors and click Save. The chart will be automatically regenerated.

    3. To save the modifications in the macro body, click the cogwheel icon and select Save changes.
    Handy Tip
    id46843490414389644

    The Multicolor setting enables you to select the appropriate colors for each value of the Label column specified in the data series field of the chart.


    Handy Tip
    id03242417709555623

    The Colors in the table columns setting enables you to add colors as either its simple name (e.g. green, yellow) or a HEX code (e.g. #808080-> gray) in a new custom-added column to paint values of the Labels column(-s) specified in the data series field of the chart.

    Image Added


    Handy Carousel
    delay10

     Image AddedImage AddedImage Added

    Preview Option

    While working in the edit mode, use the Show/hide preview option to adjust the required settings before saving the macro and publishing the page.

    Handy Carousel
    delay10

    Image Added

    Image Added

    Image Added

    Image Added

    Filter the Source Table

  • Save the macro and the page.

    • Image Removed

    Filter the source table

    1. Select one or more chart columns/sectors/bars.
    2. Only the related rows of the source table are displayed.
    3. Deselect all the columns/sectors/bars to display the whole source table.

    Image RemovedImage Added

    Set

    dependencies

    Dependencies

    1. Open the page with the chart.
    2. Click the cogwheel icon and select the Set dependencies   option.
    3. Locate the arrows between tasks.
    4. To save the modifications, click the cogwheel icon and select Save changes.

    Image RemovedImage Added

    Zoom in Chart

    To zoom in the chart:

    1. Open the page with the chart you want to zoom in.
    2. Hover your mouse pointer over this chart.
    3. Hold down Ctrl and rotate the wheel button forward to zoom in the chart.

    To navigate across the chart:

    1. Hold down Ctrl (for Windows) or Alt (for MacOS) and drag the mouse pointer across the chart.

    Image RemovedImage Added