基本事項

ダウンロードとインストール

Qlik Sense Desktop

Qlik Sense DesktopにTimeline Extensionをインストールするには、以下の手順を行ってください：

1. Qlik Sense用のTimeline Extensionをダウンロードします。
2. アーカイブを解凍します。
3. Windowsエクスプローラーを開き、Qlik SenseのExtensionsディレクトリに移動します：
   ..\Users\<UserName>\Documents\Qlik\Sense\Extensions
4. anygantt-4x-timelineフォルダをExtensionsディレクトリにコピーします。
5. Qlik Sense Desktopを再起動します。

Qlik Sense Server

Qlik SenseサーバーにTimeline Extensionをインストールするには、

1. Qlik Sense用のTimeline Extensionをダウンロードします。
2. Qlik Management Console (QMC)を開きます：https://<QPS server name>/qmc
3. QMCスタートページまたはStartドロップダウンメニューからExtensionsを選択します。
4. アクションバーのImportをクリックします。
5. ダイアログで、ダウンロードしたアーカイブを選択します。パスワード欄は空のままにします。
6. ファイルエクスプローラーウィンドウでOpenをクリックします。
7. Importをクリックします。

Qlik Sense Cloud

Qlik Sense CloudにTimeline Extensionをインストールするには、以下の手順を行ってください：

1. Qlik Sense Cloud用のTimeline Extensionをダウンロードします。
2. アーカイブを解凍します。
3. Management Consoleにアクセスします：
   1. *テナントアドレスに/consoleを追加します：https://<your tenant address>/console
   2. *または、ハブ内のユーザープロファイルの下にあるナビゲーションリンクAdministrationを使用します

1. Extensionsページに移動し、Addをクリックします。
2. ダイアログで、バンドル内のExtensionが含まれるアーカイブ（例：anygantt-4x-timeline.zip）を選択します。
3. Addをクリックします。
4. 上記の手順を繰り返して、他のExtensionを追加します。
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をクリックし、ディメンションを選択します。

最後に、2つのmeasures（開始日と終了日）を追加します：

1. プロパティパネルでMeasuresに移動します。
2. Add measureをクリックし、メジャーを選択します。
3. Add measureをクリックし、メジャーを選択します。

フィールドからディメンションやメジャーを作成したり、空のチャート上のボタンをクリックして追加したりすることも可能です。

Dimensions and Measures

Dimensions

ディメンションを追加するには、以下の手順を行います：

1. プロパティパネルでDimensionsに移動します。
2. Add dimensionをクリックし、ディメンションを選択します。

Timeline Chartには、イベントを表す1つのディメンションのみが必要です。

デフォルトでは、イベントのラベルにはディメンションとして使用しているデータフィールドまたは式が表示されます。しかし、必要に応じて別のテキストを表示することもできます。例えば、イベントの数値識別子をディメンションとして使用し、同時にイベント名をラベルとして表示することができます。詳細はLabelsセクションを参照してください。

Measures

メジャーを追加するには、以下の手順を行います：

1. プロパティパネルでMeasuresに移動します。
2. Add measureをクリックし、メジャーを選択します。

開始日の1つのメジャーを追加するだけで十分です。ただし、この場合、すべてのイベントはmomentsとして表示されます。rangesを作成するには、2つ目のメジャー（終了日）を追加する必要があります。

イベント

イベントは、タイムライン上の時間間隔または特定の瞬間を表すTimeline Chartの構成要素です。これに対応して、2種類のイベントがあります：

• ranges
• moments

このセクションでは、rangesとmomentsの違いと、それらの追加方法について説明します。イベントの設定方法については、以下のセクションを参照してください：

Ranges

Rangesは、期間を持つイベントを表示します。

Rangesを追加するには、開始日と終了日の2つのメジャーを追加する必要があります。以下の手順を行います：

1. プロパティパネルでMeasuresに移動します。
2. Add measureをクリックし、メジャーを選択します。
3. Add measureをクリックし、メジャーを選択します。

Moments

Momentsは、期間がゼロのイベントを表示します。これには1つのメジャー（日付）のみが必要です。

Momentsを追加するには、単にrangesを追加してください。データ内に単一の日付のみを持つアイテムがある場合、AnyGanttはそれらを自動的にmomentsとして表示します。

イベントの設定

Defaults

Ranges

rangesのデフォルトの外観設定（方向、高さ、塗りつぶしの色、線の太さ）を変更できます。線の色は塗りつぶしの色に合わせて自動的に調整されます。

rangesのデフォルトを設定するには、プロパティパネルのAppearance > Defaultsに移動し、Rangesをクリックして、以下の手順を行います：

• 方向を設定するには、DirectionドロップダウンメニューからUpまたはDownを選択します。
• 高さを設定するには、Heightオプションを使用します。
• 塗りつぶしを設定するには、Fillに移動し、塗りつぶしのTypeを設定して、以下のオプションを使用します。
• 線を設定するには、Strokeに移動し、Thicknessオプションを使用します。

イベントの方向は、axisに対する相対的な位置、および軸自体の位置に影響を与えることに注意してください。例えば、ここではrangesの方向がDownに設定されています：

Rangesは以下の塗りつぶしタイプと設定をサポートしています：

Solid塗りつぶし

Palette塗りつぶし

Moments

Momentsは、ピンとマーカーの2つの部分で構成されています。

momentsのデフォルトの外観設定（方向、ピンとマーカーの色、マーカーの形状とサイズ）を変更できます。また、カスタム画像をマーカーとして使用することもできます。

momentsのデフォルトを設定するには、プロパティパネルのAppearance > Defaultsに移動し、Momentsをクリックして、以下の手順を行います：

• 方向を設定するには、DirectionドロップダウンメニューからUpまたはDownを選択します。
• ピンを設定するには、Pinsに移動し、Stroke、Stroke type、Thicknessオプションを使用します。
• マーカーを設定するには、Markersに移動し、Type、Fill（組み込み形状のみ利用可能）、Stroke、Thickness、Sizeオプションを使用します。

イベントの方向は、axisに対する相対的な位置、および軸自体の位置に影響を与えることに注意してください。例えば、ここではmomentsの方向がDownに設定されています：

Markers > Typeでマーカーのタイプを設定する方法は以下の通りです：

Color by Expression

rangesとmomentsを自由に色分けできます。2つのオプションが利用可能です。上述のデフォルトの配色と、このセクションで説明する式による配色です。

式による配色は、ユーザー定義の式を使用して色を設定します。式による配色では、使用する色とそれを使用する値の両方を定義できるため、可視化での色の使用方法をより詳細に制御できます。例えば、特に関心のある値を強調したり、異なる値の範囲内で値を区別したりできます。また、国、重要度、参加者数など、可視化に含まれていない値によって可視化を色分けするためにも使用できます。

式によってイベントを色分けするには、以下の手順を行います：

1. プロパティパネルでAdd-Ons > Data settingsに移動します。
2. Add settingをクリックします。
3. 最初のドロップダウンメニューからRangesまたはMomentsを選択します。
4. 2番目のドロップダウンメニューから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'))))

この例には複数の条件があります。各イベントは4つのグループのいずれかに割り当てられ、異なるグループに属するrangesは異なる色で塗りつぶされます。

Labels

Labelsは、rangesとmomentsに関する情報を表示するテキストオブジェクトです。2つのイベントタイプにはそれぞれ独自のラベル設定があります。

デフォルトでは、ラベルには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つまたは複数のreference lineを追加して、特定の日付を示すことができます。reference lineは、現在の表示範囲内に収まる場合にのみ描画されます。

reference lineの位置を定義する値は、日付値または任意の計算式のいずれかとして指定できることに注意してください。

reference lineを追加するには、以下の手順を行います：

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つまたは複数のreference rangeを追加して、特定の期間を示すことができます。reference rangeは、現在の表示範囲内に収まる場合にのみ描画されます。

reference rangeの位置を定義する値は、日付値または任意の計算式のいずれかとして指定できることに注意してください。

reference rangeを追加するには、以下の手順を行います：

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

デフォルトでは、チャートは最大までズームアウトされています。特定の日付範囲にズームインすることも可能です。ただし、スケールの最小値と最大値が許容していれば、ユーザーはマウスホイール（またはその他のインタラクティブ機能）を使用してチャートをズームアウトすることができます。

デフォルトの表示範囲を設定するには、以下の手順を行います：

1. プロパティパネルでAppearance > Scale > Display rangeに移動します。
2. Display rangeをAutoからCustomに切り替えます。
3. From入力ボックスに日付値または日付式を入力します。
4. To入力ボックスに日付値または日付式を入力します。

以下の例では、デフォルトの表示範囲が2012年1月1日と2016年に設定されています：

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

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

これらの設定を適用したチャートは、デフォルトで以下のようになります：

Minimum and 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 modeを有効にするには、スケールの最小値と最大値を設定するときにSoftチェックボックスをオンにします。

soft modeは、最小値と最大値をイベントに合わせて調整します。これは、最小値より前、または最大値より後にイベントやイベントの一部がある場合に重要になります。

例えば、最小値を2015年1月1日に設定し、soft modeを有効にした場合、チャートにはその日付よりも早いすべてのイベントやイベントの一部が引き続き表示されます。最小値と最大値の両方でsoft modeを有効にすると、常にすべての要素が表示されるまでチャートをズームアウトできるようになります。

以下は、スケールの最小値と最大値が2015年1月1日と2018年に設定されたTimeline Chartです：

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

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

最小値と最大値の両方でsoft modeが無効になっています：

こちらは同じチャートで、最小値に対してのみsoft modeが有効になっています：

こちらは最大値に対してのみsoft modeが有効になっています：

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をクリックします。

各ズームレベルについて、時間単位と単位の数を指定できます。メニューを閉じると、レベルは自動的に正しい順序で配置されます。

以下の例では、ズームレベルが1つだけのチャートを示しています：

Locale

デフォルトでは、AnyGanttはQlikのロケールを読み取り、axisのラベルやtooltipsで使用される日付/時刻形式に適用します。別のロケールを選択することもできます：

1. プロパティパネルでAppearance > Localeに移動します。
2. Use Qlik localeチェックボックスをオフにします。
3. ドロップダウンメニューからロケールを選択します。

AnyGanttは以下のロケールをサポートしています：

• 中国語（中華人民共和国）
• 中国語（台湾）
• オランダ語（オランダ）
• 英語（米国）
• フランス語（フランス）
• ドイツ語（ドイツ）
• イタリア語（イタリア）
• 日本語（日本）
• 韓国語（韓国）
• ポーランド語（ポーランド）
• ポルトガル語（ブラジル）
• ロシア語（ロシア）
• スペイン語（スペイン）
• スウェーデン語（スウェーデン）
• トルコ語（トルコ）

こちらは中国語ロケールを適用したTimeline Chartです：

インタラクティブ機能

デフォルトでは、選択、スナップショット、tooltips、およびマウスホイールによるチャートのズーム機能が利用可能です。また、スクロールやズームを可能にする追加のナビゲーションツール（スクローラーおよびズームコントロール）を有効にすることもできます。

これらの機能を無効または有効にするには、プロパティパネルのInteractivityに移動し、以下のスライダーを切り替えます：

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

このスクリーンショットでは、スクローラーとズームコントロールが有効になっています：