Временная шкала

Основные сведения

Загрузка и установка

Qlik Sense Desktop

Для установки Timeline Extension в Qlik Sense Desktop выполните следующие действия:

1. Скачайте Timeline Extension для Qlik Sense.
2. Распакуйте архив.
3. Откройте окно проводника Windows и перейдите в каталог Extensions Qlik Sense:
   ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
4. Скопируйте папку anygantt-4x-timeline в каталог Extensions.
5. Перезапустите Qlik Sense Desktop.

Qlik Sense Server

Для установки Timeline Extension на сервер Qlik Sense:

1. Скачайте Timeline Extension для Qlik Sense.
2. Откройте Qlik Management Console (QMC): https://<QPS server name>/qmc
3. Выберите Extensions на стартовой странице QMC или в выпадающем меню Start.
4. Нажмите Import на панели действий.
5. В диалоговом окне выберите загруженный архив. Оставьте поле пароля пустым.
6. Нажмите Open в окне проводника файлов.
7. Нажмите Import.

Qlik Sense Cloud

Для установки Timeline Extension в Qlik Sense Cloud выполните следующие действия:

1. Скачайте Timeline Extension для Qlik Sense Cloud.
2. Распакуйте архив.
3. Перейдите в Management Console:
   1. *добавьте /console к адресу вашего тенанта: https://<your tenant address>/console
   2. *или используйте навигационную ссылку Administration под профилем пользователя в хабе

1. Перейдите на страницу Extensions и нажмите Add.
2. В диалоговом окне выберите архив с расширением в бандле — например, anygantt-4x-timeline.zip.
3. Нажмите Add.
4. Повторите описанные выше шаги, чтобы добавить другие расширения.
5. В Management Console перейдите в раздел Content Security Policy и нажмите Add.
6. В диалоговом окне присвойте Content Security Policy имя — например, AnyChart.
7. Введите адрес исходного сервера: qlik.anychart.com
8. Выберите следующие директивы:
   1. connect-src
   2. font-src
   3. img-src
   4. script-src
   5. style-src

1. Нажмите Add.

Обзор

Timeline Chart — это визуализация событий в хронологическом порядке. Он отображает как события, занимающие периоды времени (ranges), так и события с нулевой длительностью (moments). События и даты отображаются на длинной горизонтальной полосе (axis).

Доступные настройки ranges и moments включают: defaults / color by expression, labels и tooltips. Вы также можете добавить reference lines и reference ranges, настроить scale и axis, установить locale и т. д.

Быстрый старт

Это краткое руководство объясняет, как создать базовый Timeline Chart.

Прежде всего, добавьте пустой график на лист:

1. Перейдите в Custom objects > AnyGantt на панели ресурсов.
2. Перетащите пустой график AnyGantt Timeline на лист.

Затем добавьте dimension, представляющее события:

1. Перейдите в Dimensions на панели свойств.
2. Нажмите Add dimension и выберите измерение.

Наконец, добавьте два measures — даты начала и окончания:

1. Перейдите в Measures на панели свойств.
2. Нажмите Add measure и выберите меру.
3. Нажмите Add measure и выберите меру.

Обратите внимание, что вы также можете создавать измерения и меры из полей или добавлять их, нажимая на кнопки на пустом графике.

Dimensions и Measures

Dimensions

Чтобы добавить измерение, выполните следующие действия:

1. Перейдите в Dimensions на панели свойств.
2. Нажмите Add dimension и выберите измерение.

Для Timeline Chart требуется только одно измерение, которое представляет события.

По умолчанию в метках событий отображается поле данных или выражение, которое вы используете в качестве измерения. Но при необходимости они могут отображать другой текст. Например, вы можете использовать числовые идентификаторы событий в качестве измерения и в то же время отображать названия событий в качестве меток. См. раздел Labels, чтобы узнать больше.

Measures

Чтобы добавить меру, выполните следующие действия:

1. Перейдите в Measures на панели свойств.
2. Нажмите Add measure и выберите меру.

Достаточно добавить всего одну меру — дату начала. Однако в этом случае все события отображаются как moments. Чтобы создать ranges, необходимо добавить вторую меру — дату окончания.

События

События — это части Timeline Chart, которые представляют временные интервалы или просто моменты на шкале времени. Соответственно, существует два типа событий:

• ranges
• moments

В этом разделе объясняется разница между ranges и moments и то, как их добавить. Чтобы узнать, как настраивать события, прочитайте следующие разделы:

Ranges

Ranges показывают события, имеющие длительность.

Чтобы добавить ranges, необходимо добавить две меры — даты начала и окончания. Выполните следующие действия:

1. Перейдите в Measures на панели свойств.
2. Нажмите Add measure и выберите меру.
3. Нажмите Add measure и выберите меру.

Moments

Moments показывают события с нулевой длительностью. Для них требуется только одна мера (дата).

Чтобы добавить moments, просто добавьте ranges. Если в ваших данных есть элементы только с одной датой, AnyGantt автоматически отображает их как moments.

Настройки событий

Defaults

Ranges

Вы можете изменить настройки внешнего вида по умолчанию для ranges: направление, высоту, цвет заливки и толщину обводки. Цвет обводки автоматически подстраивается под цвет заливки.

Чтобы установить значения по умолчанию для ranges, перейдите в Appearance > Defaults на панели свойств, нажмите Ranges и выполните следующие действия:

• Чтобы установить направление, выберите Up или Down в выпадающем меню Direction.
• Чтобы установить высоту, используйте параметр Height.
• Чтобы настроить заливку, перейдите в Fill, установите Type заливки и используйте доступные ниже параметры.
• Чтобы настроить обводку, перейдите в Stroke и используйте параметр Thickness.

Обратите внимание, что направление событий влияет на их положение относительно axis и на положение самой оси. Например, здесь для ranges установлено направление Down:

Ranges поддерживают следующие типы заливки и настройки:

Solid Fill

Palette Fill

Moments

Moments состоят из двух частей: пинов и маркеров.

Вы можете изменить настройки внешнего вида по умолчанию для moments: направление, цвета пинов и маркеров, форму и размер маркеров. Также в качестве маркеров можно использовать собственные изображения.

Чтобы установить значения по умолчанию для moments, перейдите в Appearance > Defaults на панели свойств, нажмите Moments и выполните следующие действия:

• Чтобы установить направление, выберите Up или Down в выпадающем меню Direction.
• Чтобы настроить пины, перейдите в Pins и используйте параметры Stroke, Stroke type и Thickness.
• Чтобы настроить маркеры, перейдите в Markers и используйте параметры Type, Fill (доступно только для встроенных фигур), Stroke, Thickness и Size.

Обратите внимание, что направление событий влияет на их положение относительно axis и на положение самой оси. Например, здесь для moments установлено направление Down:

Вот как устанавливается тип маркеров в Markers > Type:

	Нажмите на пиктограмму "icon" и выберите встроенный значок (фигуру) из выпадающего меню.
	Нажмите на пиктограмму "image" и введите ссылку на собственное изображение в поле ввода Image URL.

Color by Expression

Вы можете раскрашивать ranges и moments по своему усмотрению. Доступны два варианта: раскраска по умолчанию, описанная выше, и раскраска по выражению, описанная в этом разделе.

Раскраска по выражению задает цвета с помощью пользовательского выражения. При раскраске по выражению вы можете определить как используемые цвета, так и значения, для которых они применяются, что обеспечивает больший контроль над использованием цветов в визуализации. Например, вы можете выделить представляющие особый интерес значения или разграничить значения в разных диапазонах. Раскраску по выражению также можно использовать для раскраски визуализации по значениям, не включенным в нее, например, для раскраски событий по стране, важности, количеству участников и т. д.

Чтобы раскрасить событие по выражению, выполните следующие действия:

1. Перейдите в Add-Ons > Data settings на панели свойств.
2. Нажмите Add setting.
3. Выберите Ranges или Moments в первом выпадающем меню.
4. Выберите параметр Color string во втором выпадающем меню.
5. Введите выражение в поле ввода.

Примеры

Вот несколько примеров того, что можно сделать с выражениями для цвета.

Пример: Раскраска по значению одной меры

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

В этом примере есть условие. Если длительность ranges составляет > 2 лет, они будут окрашены в 'lightgreen', в противном случае — в 'lightgray'.

Пример: Раскраска по значениям нескольких мер

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

В этом примере несколько условий: каждое событие назначено одной из четырех групп, и ranges, принадлежащие разным группам, окрашиваются в разные цвета.

Labels

Labels — это текстовые объекты, отображающие информацию о ranges и moments. Для каждого из двух типов событий предусмотрены собственные настройки меток.

По умолчанию в метках отображается поле данных или выражение, используемое в качестве dimension, но вы можете настроить текст.

Обратите внимание, что текст метки можно задать либо как строковое значение, либо как произвольное строковое выражение. Использование выражений позволяет выделять представляющие особый интерес значения, отображать значения, не включенные в визуализацию, или результаты вычислений и т. д.

Также в метках можно использовать HTML.

Чтобы установить текст меток:

1. Перейдите в Add-ons > Label settings на панели свойств.
2. Нажмите Ranges или Moments.
3. Выберите параметр Custom text в выпадающем меню.
4. Введите строковое значение или строковое выражение в поле ввода.

Для их настройки используйте следующие параметры:

• Чтобы настроить фон (доступно только для moments), переключите ползунок Background и используйте параметры Fill, Opacity, Corner type, Border type и Border radius.
• Чтобы настроить шрифт, переключите ползунок Font и используйте параметры Style, Color, Size, Family и Shadow.
• Чтобы установить лимит символов, переключите ползунок Character limit и введите число в поле ввода.

В приведенном ниже примере метки ranges и moments имеют разные настройки текста, фона и шрифта и отображают следующие выражения:

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')

Tooltips

Tooltips — это текстовые блоки, которые появляются при наведении курсора на события. Вы можете задать собственный текст подсказки отдельно для ranges и moments.

Обратите внимание, что текст подсказки можно задать либо как строковое значение, либо как произвольное строковое выражение. Использование выражений позволяет выделять представляющие особый интерес значения, отображать значения, не включенные в визуализацию, или результаты вычислений и т. д.

Также в подсказках можно использовать HTML.

Чтобы включить или отключить подсказки, перейдите в Interactivity на панели свойств и переключите ползунок Tooltips.

Чтобы настроить подсказки, перейдите в Add-ons > Tooltip settings на панели свойств и выполните следующие действия:

• Чтобы настроить фон, переключите ползунок Background и используйте параметры Fill и Opacity.
• Чтобы настроить шрифт, переключите ползунок Font и используйте параметры Style, Color, Size и Family.

Вот как могут выглядеть фон и шрифт подсказок после настройки:

Чтобы установить текст подсказки и лимит символов для ranges или moments, выполните следующие действия:

1. Перейдите в Add-ons > Tooltip settings на панели свойств.
2. Нажмите Add tooltip.
3. Выберите Ranges или Moments в выпадающем меню.
4. Введите строковое значение или строковое выражение в поле ввода.
5. Переключите ползунок Character limit и введите число в поле ввода.
   (Этот параметр станет доступен только после установки текста.)

Вот пример выражения для настройки текста подсказки для 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')

Другие возможности

Reference Lines

Reference line — это линия, пересекающая заданную точку на axis.

Вы можете добавить на график одну или несколько опорных линий, чтобы указать определенную дату или даты. Опорная линия отрисовывается только в том случае, если она попадает в текущий диапазон отображения.

Обратите внимание, что значение, определяющее положение опорной линии, можно указать либо как значение даты, либо как произвольное выражение даты.

Чтобы добавить опорную линию, выполните следующие действия:

1. Перейдите в Add-ons > Reference lines на панели свойств.
2. Нажмите Add reference line.
3. Введите значение даты или выражение даты в поле ввода Date.

Затем настройте ее:

• Чтобы добавить текстовую метку, введите строку текста в поле ввода Label.
• Чтобы настроить обводку, используйте параметры Stroke, Stroke type и Thickness.
• Чтобы настроить положение метки, используйте параметры Label orientation и Label position.
• Чтобы настроить шрифт, переключите ползунок Font и используйте параметры Style, Color, Size, Family и Shadow.

Reference Ranges

Reference range — это область, пересекающая заданный диапазон точек на axis.

Вы можете добавить на график одну или несколько опорных областей, чтобы указать определенный период или периоды времени. Опорная область отрисовывается только в том случае, если она попадает в текущий диапазон отображения.

Обратите внимание, что значения, определяющие положение опорной области, можно указать либо как значения даты, либо как произвольные выражения даты.

Чтобы добавить опорную область, выполните следующие действия:

1. Перейдите в Add-ons > Reference range на панели свойств.
2. Нажмите Add reference range.
3. Введите значение даты или выражение даты в поле ввода From.
4. Введите значение даты или выражение даты в поле ввода To.

Затем настройте ее:

• Чтобы добавить текстовую метку, введите строку текста в поле ввода Label.
• Чтобы настроить заливку, используйте параметры Color и Opacity.
• Чтобы настроить положение метки, используйте параметры Label orientation и Label position.
• Чтобы настроить шрифт, переключите ползунок Font и используйте параметры Style, Color, Size, Family и Shadow.

Scale

AnyGantt Extension работает со шкалой, которую можно настраивать. Можно задать диапазон дат, который график отображает по умолчанию, а также минимум и максимум шкалы.

Обратите внимание, что все эти даты можно указать либо как значения даты, либо как произвольные выражения даты.

Default Display Range

По умолчанию масштаб графика уменьшен до максимума. Его также можно увеличить до произвольного диапазона дат. Тем не менее, пользователи по-прежнему смогут уменьшать масштаб графика с помощью колесика мыши (или других возможностей взаимодействия), если это позволяют minimum и maximum шкалы.

Чтобы установить диапазон отображения по умолчанию, выполните следующие действия:

1. Перейдите в Appearance > Scale > Display range на панели свойств.
2. Переключите Display range с Auto на Custom.
3. Введите значение даты или выражение даты в поле ввода From.
4. Введите значение даты или выражение даты в поле ввода To.

В следующем примере диапазон отображения по умолчанию установлен на 1 января 2012 и 2016 годов:

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

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

Вот как график с этими настройками выглядит по умолчанию:

Minimum и Maximum

Когда вы уменьшаете масштаб графика до максимума с помощью колесика мыши (или других возможностей взаимодействия), вы видите диапазон дат между минимумом и максимумом шкалы. По умолчанию AnyGantt подстраивает их так, чтобы отобразить все события графика.

Чтобы установить минимальную дату шкалы:

1. Перейдите в Appearance > Scale > Minimum на панели свойств.
2. Переключите Minimum с Auto на Custom.
3. При необходимости установите флажок Soft, чтобы включить soft mode.
4. Введите значение даты или выражение даты в поле ввода.

Чтобы установить максимальную дату шкалы:

1. Перейдите в Appearance > Scale > Maximum на панели свойств.
2. Переключите Maximum с Auto на Custom.
3. При необходимости установите флажок Soft, чтобы включить soft mode.
4. Введите значение даты или выражение даты в поле ввода.

В этом примере минимум установлен на 5 лет до самой ранней даты начала, а максимум — на 10 лет после самой поздней даты окончания:

Min(start_date) - 365 * 5

Max(finish_date) + 365 * 5

Вот как график с этими настройками выглядит при максимальном уменьшении масштаба:

Soft Mode

Чтобы включить мягкий режим, установите флажок Soft при настройке минимума и максимума шкалы.

Soft mode подстраивает минимум и максимум под события. Это важно, когда есть события или части событий, наступающие раньше минимума или позже максимума.

Например, если вы установите минимум на 1 января 2015 года и включите soft mode, график все равно будет показывать все события и их части, которые наступают раньше этой даты. Включение soft mode как для минимума, так и для максимума гарантирует, что всегда можно будет уменьшить масштаб графика, чтобы увидеть все элементы.

Ниже представлен Timeline Chart с минимумом и максимумом шкалы, установленными на 1 января 2015 и 2018 годов:

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

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

Soft mode отключен как для минимума, так и для максимума:

Вот тот же график с soft mode, включенным только для минимума:

Здесь soft mode включен только для максимума:

Axis

Axis — это длинная горизонтальная полоса, отображающая даты. Вы можете настроить ее высоту, цвета и шрифт. Можно применить разные настройки обводки к самой оси и к ее делениям. Также на ось влияет locale.

Чтобы настроить ось, перейдите в Appearance > Axis на панели свойств и выполните следующие действия:

• Чтобы установить высоту, используйте параметр Height.
• Чтобы настроить заливку и обводку, используйте параметры Fill, Stroke и Thickness.
• Чтобы настроить деления, перейдите в Ticks и используйте параметры Stroke и Thickness.
• Чтобы настроить шрифт меток, перейдите в Labels, переключите ползунок Font и используйте параметры Style, Color, Size, Family и Shadow.

Zoom Levels

На каждом уровне масштабирования ось отображает определенные единицы времени. Чтобы их установить:

1. Перейдите в Appearance > Timeline на панели свойств.
2. Нажмите Zoom levels, чтобы открыть окно с настройками.
3. Настройте уровни масштабирования.
4. Нажмите Save и Close.

Вот окно с настройками уровней масштабирования по умолчанию:

По умолчанию предусмотрено 9 уровней масштабирования. Максимально доступное количество уровней также равно 9. В окне Zoom levels вы можете удалять и дублировать уровни, нажимая на кнопки справа от них. Чтобы восстановить настройки по умолчанию, нажмите Restore defaults.

Для каждого уровня масштабирования вы можете указать единицу времени и количество единиц. Уровни автоматически выстраиваются в правильном порядке после закрытия меню.

В приведенном ниже примере показан график только с одним уровнем масштабирования:

Locale

По умолчанию AnyGantt считывает локаль Qlik и применяет ее к форматам даты/времени, используемым в метках axis и в подсказках. Вы можете выбрать другую локаль:

1. Перейдите в Appearance > Locale на панели свойств.
2. Снимите флажок Use Qlik locale.
3. Выберите локаль из выпадающего меню.

AnyGantt поддерживает следующие локали:

• Китайский (КНР)
• Китайский (Тайвань)
• Голландский (Нидерланды)
• Английский (США)
• Французский (Франция)
• Немецкий (Германия)
• Итальянский (Италия)
• Японский (Япония)
• Корейский (Корея)
• Польский (Польша)
• Португальский (Бразилия)
• Русский (Россия)
• Испанский (Испания)
• Шведский (Швеция)
• Турецкий (Турция)

Вот Timeline Chart с китайской локалью:

Interactivity

По умолчанию доступны следующие возможности взаимодействия: выделение, снимки (snapshots), tooltips и возможность масштабирования графика с помощью колесика мыши. Вы также можете включить дополнительные инструменты навигации, позволяющие прокручивать и масштабировать график: scroller и zoom controls.

Чтобы отключить или включить эти функции, перейдите в Interactivity на панели свойств и переключите следующие ползунки:

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

На этом скриншоте включены scroller и zoom controls: