Facebook Pixel

AnyGantt Project Management Bundle

The Best Gantt, Resource and Timeline Extension Pack for Qlik Sense

Basics

Chart Types

AnyGantt Extension for Qlik provides the following chart types:

  • Project Gantt – a classic hierarchical Gantt chart that schedules projects over periods of time. It can display only one task or milestone in one row.
  • Resource Chart – a Gantt chart that schedules resources (e.g. equipment or employees) over periods of time. It can display multiple periods and milestones in one row.
  • Timeline chart – a visualization of events on an axis in chronological order. It can display both events occupying periods of time and events with zero duration.

This section explains how to create and configure Timeline charts.

Other chart types are available via AnyChart Extension and AnyStock Extension.

Downloading and Installing

Qlik Sense Desktop

To install AnyGantt Extension in Qlik Sense Desktop, do the following:

  1. Download AnyGantt Extension for Qlik Sense.
  2. Extract the archive.
  3. Open a Windows Explorer window and navigate to the Qlik Sense Extensions directory:
    ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
  4. Copy the anygantt-4x-project folder to the Extensions directory.
  5. Copy the anygantt-4x-resource folder to the Extensions directory.
  6. Copy the anygantt-4x-timeline folder to the Extensions directory.
  7. Relaunch Qlik Sense Desktop.
Qlik Sense Server

To install AnyGantt Extension on a Qlik Sense server,

  1. Download AnyGantt Extension for Qlik Sense.
  2. Open Qlik Management Console (QMC): https://<QPS server name>/qmc
  3. Select Extensions on the QMC start page or from the Start drop-down menu.
  4. Click Import in the action bar.
  5. In the dialog, select the downloaded archive. Leave the password area blank.
  6. Click Open in the file explorer window.
  7. Click Import.
Qlik Sense Cloud

To install AnyGantt Extension in Qlik Sense Cloud, do the following:

  1. Download AnyGantt Extension for Qlik Sense Cloud.
  2. Extract the archive.
  3. Access the Management Console:
    • add /console to your tenant address: https://<your tenant address>/console
    • or use the navigation link Administration under the user profile in the hub
  4. Go to the Extensions page and click Add.
  5. In the dialog, select the archive with the extension in the bundle – for example, anygantt-4x-timeline.zip.
  6. Click Add.
  7. Repeat the steps above to add other extensions.
  8. In the Management Console, go to the Content Security Policy section and click Add.
  9. In the dialog, give the Content Security Policy a name – for example, AnyChart.
  10. Type the address of the origin server: qlik.anychart.com
  11. Select the following directives:
    • connect-src
    • font-src
    • img-src
    • script-src
    • style-src
  12. Click Add.

Overview

The Timeline chart is a visualization of events in chronological order. It displays both events occupying periods of time (ranges) and events with zero duration (moments). Events and dates are shown on a long horizontal bar (axis).

The available settings of ranges and moments include: defaults / color by expression, labels, and tooltips. You can also add reference lines and reference ranges, configure the scale and axis, set the locale, etc.

An AnyGantt timeline chart with a reference line and labels configured

Quick Start

This quick tutorial explains how to create a basic Timeline chart.

First of all, add an empty chart to your sheet:

  1. Go to Custom objects > AnyGantt in the assets panel.
  2. Drag an empty AnyGantt Timeline chart to the sheet.

Then add a dimension representing events:

  1. Go to Dimensions in the properties panel.
  2. Click Add dimension and select a dimension.

Finally, add two measures – the start and end dates:

  1. Go to Measures in the properties panel.
  2. Click Add measure and select a measure.
  3. Click Add measure and select a measure.

Please note that you can also create dimensions and measures from fields or add them by clicking on buttons on the empty chart.

A basic timeline chart built with AnyGantt for Qlik Sense Extension

Dimensions and Measures

Dimensions

To add a dimension, do the following:

  1. Go to Dimensions in the properties panel.
  2. Click Add dimension and select a dimension.

The Timeline chart requires only one dimension, which represents events.

By default, the labels of events display the data field or expression you use as the dimension. But they can display a different text if needed. For example, you can use numeric identifiers of events as a dimension and at the same time display event names as labels. See the Labels section to learn more.

Measures

To add a measure, do the following:

  1. Go to Measures in the properties panel.
  2. Click Add measure and select a measure.

It is enough to add just one measure – the start date. However, in this case all events are shown as moments. To create ranges, you need to add a second measure – the end date.

Events

Events are the parts of the Timeline chart that represent time intervals or just moments on the timeline. Correspondingly, there are two types of events:

This section explains the difference between ranges and moments and how to add them. To learn how to configure events, read the following sections:

Ranges

Ranges show events that have duration.

A timeline chart with ranges

To add ranges, you need to add two measures – the start and end dates. Do the following:

  1. Go to Measures in the properties panel.
  2. Click Add measure and select a measure.
  3. Click Add measure and select a measure.
Moments

Moments show events with zero duration. They require only one measure (the date).

A timeline chart with ranges and moments

To add moments, just add ranges. If in your data there are items with only single dates, AnyGantt automatically displays them as moments.

Settings of Events

Defaults

Ranges

You can change the default appearance settings of ranges: the direction, height, fill color, and stroke thickness. The stroke color automatically adjusts to the fill color.

To set the defaults of ranges, go to Appearance > Defaults in the properties panel, click Ranges, and do the following:

  • To set the direction, select Up or Down from the Direction drop-down menu.
  • To set the height, use the Height opiton.
  • To configure the fill, go to Fill, set the fill Type, and use the available options below.
  • To configure the stroke, go to Stroke and use the Thickness option.

Please note that the direction of events affects their position relative to the axis and the position of the axis itself. For example, here the direction of ranges is set to Down:

A timeline chart with the ranges directed downwards

Ranges support the following fill types and settings:

Fill Type Description Settings
Solid You can set one color, which is applied to all ranges. Color
Palette You can select one of the built-in palettes. Ranges are colored in the order of their appearance. Palette selection

Solid Fill

A timeline chart with a solid fill applied to the ranges

Palette Fill

A timeline chart with a palette fill applied to the ranges

Moments

Moments are composed of two parts: pins and markers.

You can change the default appearance settings of moments: the direction, the colors of pins and markers, the shape and size of markers. Also, you can use custom images as markers.

To set the defaults of moments, go to Appearance > Defaults in the properties panel, click Moments, and do the following:

  • To set the direction, select Up or Down from the Direction drop-down menu.
  • To configure pins, go to Pins and use the Stroke, Stroke type, and Thickness options.
  • To configure markers, go to Markers and use the Type, Fill (avilable only for built-in shapes), Stroke, Thickness, and Size options.

Please note that the direction of events affects their position relative to the axis and the position of the axis itself. For example, here the direction of moments is set to Down:

A timeline chart with the moments directed downwards

Here is how you set the type of markers in Markers > Type:

A button in the menu of AnyGantt for Qlik Sense Extension for setting the markers of moments as built-in shapes Click the "icon" pictogram and select a built-in icon (shape) from the drop-down menu.
A button in the menu of AnyGantt for Qlik Sense Extension for setting the markers of moments as custom images Click the "image" pictogram and enter a link to a custom image in the Image URL input box.

A timeline chart with the markers of the moments set as one of the built-in shapes

Color by Expression

You can color ranges and moments as you like. Two options are available: default coloring, which is described above, and coloring by expression, described in this section.

Coloring by expression sets colors using a user-defined expression. When coloring by expression, you can define both what colors to use and which values to use them with, enabling more control over how colors are used in the visualization. For example, you might highlight values of particular interest, or differentiate between values within different value ranges. Coloring by expression can also be used to color a visualization by values not included within a visualization, such as coloring events by the country, importance, the number of participants, etc.

To color an event by expression, do the following:

  1. Go to Add-Ons > Data settings in the properties panel.
  2. Click Add setting.
  3. Select Ranges or Moments from the first drop-down menu.
  4. Select the Color string option from the second drop-down menu.
  5. Enter an expression in the input box.
Examples

Here are a few examples to show what you can do with expressions by color.

Example: Coloring by single measure value

If((Interval(finish_date) - Interval(start_date)) > 365 * 2, 'lightgreen', 'lightgray')

In this example, there is a condition. If the duration of ranges is greater than two years, they will be colored 'lightgreen', otherwise they will be colored 'lightgray'.

A timeline chart with the ranges colored by expression (a single measure value)

Example: Coloring by multiple measure values

If(group_name = 'Research & Development', 'lightgray',
If(group_name = 'Preclinical Studies', 'lightblue',
If(group_name = 'Clinical Trials', 'lightgreen',
If(group_name = 'Review & Approval', 'salmon'))))

In this example, there are multiple conditions: each event is assigned to one of four groups, and ranges belonging to different groups are colored different colors.

A timeline chart with the ranges colored by expression (multiple measure values)

Labels

Labels are text objects displaying the information about ranges and moments. Each of the two event types has its own label settings.

By default, labels show the data field or expression you use as the dimension, but you can customize the text. Also, you can adjust the font and character limit of ranges and moments and the background of moments.

Please note that it is possible to set the label text either as a string value or as an arbitrary string expression. Using expressions allows you to highlight values of particular interest, display values not included within a visualization or results of calculations, and so on.

In addition, you can use HTML in labels.

To access the settings of labels, go to Add-ons > Label settings in the properties panel and click Ranges or Moments.

To set the text,

  1. Select the Custom text option from the drop-down menu.
  2. Enter a string value or a string expression in the input box.

Use the options below to configure labels:

  • To configure the background (available only for moments), switch the Background slider and use the Fill, Opacity, Corner type, Border type, and Border radius options.
  • To configure the font, switch the Font slider and use the Style, Color, Size, Family, and Shadow options.
  • To set the character limit, switch the Character limit slider and enter a number in the input box.

In the example below, the labels of ranges and moments have different text, background, and font settings and display the following expressions:

Ranges

'<b>' & event_name & '</b>' &
'<br>' & Date(start_date, 'MM.YYYY') & ' – ' & Date(finish_date, 'MM.YYYY')

Moments

'<b>' & event_name & '</b>' &
'<br>' & Date(start_date, 'MM.YYYY')

A timeline chart with the labels of the ranges and moments customized

Tooltips

Tooltips are text boxes that appear when the user hovers over events. You can configure the background and font of tooltips and set a custom tooltip text and character limit separately for ranges and moments.

Please note that it is possible to set the tooltip text either as a string value or as an arbitrary string expression. Using expressions allows you to highlight values of particular interest, display values not included within a visualization or results of calculations, and so on.

Also, you can use HTML in tooltips.

To disable (or enable) tooltips, go to Interactivity in the properties panel and switch the Tooltips slider.

To open the settings of tooltips, go to Add-ons > Tooltip settings in the properties panel. Then configure them:

  • To configure the background, switch the Background slider and use the Fill and Opacity options.
  • To configure the font, switch the Font slider and use the Style, Color, Size, and Family options.

Here is how the background and font of tooltips may look like after configuration:

A timeline chart with a tooltip, its backgroud and font adjusted

To set the tooltip text and character limit of ranges or moments, do the following:

  1. Go to Add-ons > Tooltip settings in the properties panel.
  2. Click Add tooltip.
  3. Select Ranges or Moments from the drop-down menu.
  4. Enter a string value or a string expression in the input box.
  5. Switch the Character limit slider and enter a number in the input box below.
    (This option will be available only after setting the text.)

Here is an example of an expression for configuring the tooltip text of ranges:

'<b>' & event_name & '</b>' &
'<br><i>' & group_name & '</i>' &
'<br><br>Start Date: ' & Date(start_date, 'MM.DD.YYYY') &
'<br>Finish Date: ' & Date(finish_date, 'MM.DD.YYYY')

A timeline chart with a tooltip displaying a custom text

Other Features

Reference Lines

A reference line is a line intersecting a given point on the axis. You can add one or several reference lines to a chart to indicate a certain date or dates. The reference line is only drawn if it falls within the current display range.

Please note that it is possible to specify the value defining the position of a reference line either as a date value or as an arbitrary date expression.

To add a reference line, do the following:

  1. Go to Add-ons > Reference lines in the properties panel.
  2. Click Add reference line.
  3. Enter a date value or a date expression in the Date input box.

Then configure it:

  • To add a text label, enter a text string in the Label input box.
  • To configure the stroke, use the Stroke, Stroke type, and Thickness options.
  • To configure the position of the label, use the Label orientation and Label position options.
  • To configure the font, switch the Font slider and use the Style, Color, Size, Family, and Shadow options.

A timeline chart with a reference line enabled and customized

Reference Ranges

A reference range is an area intersecting a given range of points on the axis. You can add one or several reference ranges to a chart to indicate a certain period or periods of time. The reference range is only drawn if it falls within the current display range.

Please note that it is possible to specify the values defining the position of a reference range either as date values or as arbitrary date expressions.

To add a reference range, do the following:

  1. Go to Add-ons > Reference range in the properties panel.
  2. Click Add reference range.
  3. Enter a date value or a date expression in the From input box.
  4. Enter a date value or a date expression in the To input box.

Then configure it:

  • To add a text label, enter a text string in the Label input box.
  • To configure the fill, use the Color and Opacity options.
  • To configure the position of the label, use the Label orientation and Label position options.
  • To configure the font, switch the Font slider and use the Style, Color, Size, Family, and Shadow options.

A timeline chart with a reference range enabled and customized

Scale

AnyGantt Extension operates a scale, which you can configure. It is possible to set the range of dates the chart displays by default as well as the minimum and maximum of the scale.

Please note that you can specify all these dates either as date values or as arbitrary date expressions.

Default Display Range

By default, the chart is zoomed out to the maximum. It can also be zoomed in to a custom range of dates. However, users will be still able to zoom the chart out by using the mouse wheel (or other interactivity features) – if the minimum and maximum of the scale allow for it.

To set the default display range, do the following:

  1. Go to Appearance > Scale > Display range in the properties panel.
  2. Switch Display range from Auto to Custom.
  3. Enter a date value or a date expression in the From input box.
  4. Enter a date value or a date expression in the To input box.

In the following example, the default display range is set to January 1st 2012 and 2016:

  • Date#('01.01.2015', 'MM.DD.YYYY')
  • Date#('01.01.2018', 'MM.DD.YYYY')

Here is how the chart with these settings looks like by default:

A timeline chart with the default display range of the scale set to custom dates

Minimum and Maximum

When you zoom the chart out to the maximum by using the mouse wheel (or other interactivity features), you see the range of dates between the minimum and maximum of the scale. By default, AnyGantt adjusts them to display all the events of the chart.

To set the minimum date of the scale,

  1. Go to Appearance > Scale > Minimum in the properties panel.
  2. Switch Minimum from Auto to Custom.
  3. If necessary, check the Soft box to enable the soft mode.
  4. Enter a date value or a date expression in the input box.

To set the maximum date of the scale,

  1. Go to Appearance > Scale > Maximum in the properties panel.
  2. Switch Maximum from Auto to Custom.
  3. If necessary, check the Soft box to enable the soft mode.
  4. Enter a date value or a date expression in the input box.

In this example, the minimum is set to 5 years before the earliest start date, and the maximum is set to 10 years after the latest finish date:

  • Min(start_date) - 365 * 5
  • Max(finish_date) + 365 * 5

Here is how the chart with this settings looks like when it is zoomed out to the maximum:

A timeline chart with the minimum and maximum of the scale set to custom dates

Soft Mode

To enable the soft mode, check the Soft box when you set the minimum and maximum of the scale.

The soft mode adjusts the minimum and maximum to events. It matters when there are events or parts of events earlier than the minimum or later than the maximum.

For example, if you set the minimum to January 1st, 2015 and enable the soft mode, the chart will still show all the events and parts of events that are earlier than this date. Enabling the soft mode for both the minimum and maximum ensures that it is always possible to zoom the chart out to see all elements.

Below there is a Timeline chart with the minimum and maximum of the scale set to January 1st 2015 and 2018:

  • Date#('01.01.2015', 'MM.DD.YYYY')
  • Date#('01.01.2018', 'MM.DD.YYYY')

The soft mode is disabled for both the minimum and maximum:

A timeline chart with the minimum and maximum of the scale set to custom dates, the soft mode disabled for both

Here is the same chart with the soft mode enabled only for the minimum:

 A timeline chart with the minimum and maximum of the scale set to custom dates, the soft mode enabled for the minimum

Here the soft mode is enabled only for the maximum:

A timeline chart with the minimum and maximum of the scale set to custom dates, the soft mode enabled for the maximum

Axis

An axis is a long horizontal bar displaying dates. You can adjust its height, colors, and font. It is possible to apply different stroke settings to the axis itself and to its ticks. Also, the axis is affected by the locale.

To configure the axis, go to Appearance > Axis in the properties panel and do the following:

  • To set the height, use the Height option.
  • To configure the fill and stroke, use the Fill, Stroke, and Thickness options.
  • To configure ticks, go to Ticks and use the Stroke and Thickness options.
  • To configure the font of labels, go to Labels, switch the Font slider, and use the Style, Color, Size, Family, and Shadow options.

A timeline chart with the axis customized

Zoom Levels

At each zoom level, the axis displays certain time units. To set them,

  1. Go to Appearance > Timeline in the properties panel.
  2. Click Zoom levels to open the window with settings.
  3. Configure zoom levels.
  4. Click Save and Close.

Here is the window with the default settings of zoom levels:

The menu of AnyGantt for Qlik Sense Extension with the default settings of zoom levels

By default, there are 9 zoom levels. The maximum available number of levels is also 9. In the Zoom levels window, you can delete and duplicate levels by clicking on the buttons to the right of them. To restore the default settings, click Restore defaults.

For each zoom level, you can specify a time unit and a number of units. Levels are automatically arranged in the correct order after you close the menu.

In the example below, there is a chart with only one zoom level:

The menu of AnyGantt for Qlik Sense Extension with custom settings of zoom levels (all levels but one disabled)

A timeline chart with only one zoom level enabled

Locale

By default, AnyGantt reads the Qlik locale and applies it to date/time formats used in the labels of the axis and in tooltips. You can select another locale:

  1. Go to Appearance > Locale in the properties panel.
  2. Uncheck the Use Qlik locale box.
  3. Select a locale from the drop-down menu.

AnyGantt supports the following locales:

  • Chinese (Peoples Republic of China)
  • Chinese (Taiwan)
  • Dutch (Netherlands)
  • English (United States)
  • French (France)
  • German (Germany)
  • Italian (Italy)
  • Japanese (Japan)
  • Korean (Korea)
  • Polish (Poland)
  • Portuguese (Brazil)
  • Russian (Russia)
  • Spanish (Spain)
  • Swedish (Sweden)
  • Turkish (Turkey)

Here is a Timeline chart with the Chinese locale:

A timeline chart with the Chinese locale

Interactivity

By default, the following interactivity features are available: selection, snapshots, tooltips, and the ability to zoom the chart with the mouse wheel. You can also enable additional navigation tools that allow scrolling and zooming the chart: the scroller and zoom controls.

To disable or enable these features, go Interactivity in the properties panel and switch the following sliders:

  • Selection
  • Snapshots
  • Tooltips
  • Scroller
  • Zoom controls
  • Zoom with mouse wheel

In this screenshot, the scroller and zoom controls are enabled:

A timeline chart with the scroller and zoom controls enabled

Contact Our Sales Representatives

Our Sales Representatives will be happy to talk to you and answer any questions regarding our products, licensing, purchasing, and everything else.