Linha do tempo

Noções Básicas

Baixando e Instalando

Qlik Sense Desktop

Para instalar a Timeline Extension no Qlik Sense Desktop, faça o seguinte:

1. Baixe a Timeline Extension para Qlik Sense.
2. Extraia o arquivo.
3. Abra uma janela do Windows Explorer e navegue até o diretório de Extensions do Qlik Sense:
   ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
4. Copie a pasta anygantt-4x-timeline para o diretório Extensions.
5. Reinicie o Qlik Sense Desktop.

Qlik Sense Server

Para instalar a Timeline Extension em um servidor Qlik Sense,

1. Baixe a Timeline Extension para Qlik Sense.
2. Abra o Qlik Management Console (QMC): https://<QPS server name>/qmc
3. Selecione Extensions na página inicial do QMC ou no menu suspenso Start.
4. Clique em Import na barra de ações.
5. No diálogo, selecione o arquivo baixado. Deixe a área da senha em branco.
6. Clique em Open na janela do explorador de arquivos.
7. Clique em Import.

Qlik Sense Cloud

Para instalar a Timeline Extension no Qlik Sense Cloud, faça o seguinte:

1. Baixe a Timeline Extension para Qlik Sense Cloud.
2. Extraia o arquivo.
3. Acesse o Management Console:
   1. *adicione /console ao endereço do seu tenant: https://<your tenant address>/console
   2. *ou use o link de navegação Administration sob o perfil do usuário no hub

1. Vá para a página Extensions e clique em Add.
2. No diálogo, selecione o arquivo com a extension no pacote – por exemplo, anygantt-4x-timeline.zip.
3. Clique em Add.
4. Repita as etapas acima para adicionar outras extensions.
5. No Management Console, vá para a seção Content Security Policy e clique em Add.
6. No diálogo, dê um nome à Content Security Policy – por exemplo, AnyChart.
7. Digite o endereço do servidor de origem: qlik.anychart.com
8. Selecione as seguintes diretivas:
   1. connect-src
   2. font-src
   3. img-src
   4. script-src
   5. style-src

1. Clique em Add.

Visão Geral

O Timeline Chart é uma visualização de eventos em ordem cronológica. Ele exibe tanto eventos que ocupam períodos de tempo (ranges) quanto eventos com duração zero (moments). Eventos e datas são mostrados em uma longa barra horizontal (axis).

As configurações disponíveis de ranges e moments incluem: defaults / color by expression, labels e tooltips. Você também pode adicionar reference lines e reference ranges, configurar a scale e o axis, definir o locale, etc.

Início Rápido

Este tutorial rápido explica como criar um Timeline Chart básico.

Primeiro de tudo, adicione um gráfico vazio à sua pasta:

1. Vá para Custom objects > AnyGantt no painel de ativos.
2. Arraste um gráfico AnyGantt Timeline vazio para a pasta.

Em seguida, adicione uma dimension representando os eventos:

1. Vá para Dimensions no painel de propriedades.
2. Clique em Add dimension e selecione uma dimensão.

Finalmente, adicione duas measures – as datas de início e término:

1. Vá para Measures no painel de propriedades.
2. Clique em Add measure e selecione uma medida.
3. Clique em Add measure e selecione uma medida.

Observe que você também pode criar dimensões e medidas a partir de campos ou adicioná-las clicando nos botões no gráfico vazio.

Dimensões e Medidas

Dimensões

Para adicionar uma dimensão, faça o seguinte:

1. Vá para Dimensions no painel de propriedades.
2. Clique em Add dimension e selecione uma dimensão.

O Timeline Chart requer apenas uma dimensão, que representa os eventos.

Por padrão, as labels dos eventos exibem o campo de dados ou expressão que você usa como dimensão. Mas elas podem exibir um texto diferente, se necessário. Por exemplo, você pode usar identificadores numéricos de eventos como dimensão e, ao mesmo tempo, exibir os nomes dos eventos como labels. Consulte a seção Labels para saber mais.

Medidas

Para adicionar uma medida, faça o seguinte:

1. Vá para Measures no painel de propriedades.
2. Clique em Add measure e selecione uma medida.

Basta adicionar apenas uma medida – a data de início. No entanto, neste caso, todos os eventos são mostrados como moments. Para criar ranges, você precisa adicionar uma segunda medida – a data de término.

Eventos

Eventos são as partes do Timeline Chart que representam intervalos de tempo ou apenas momentos na linha do tempo. Correspondentemente, existem dois tipos de eventos:

• ranges
• moments

Esta seção explica a diferença entre ranges e moments e como adicioná-los. Para saber como configurar os eventos, leia as seguintes seções:

Ranges

Ranges mostram eventos que têm duração.

Para adicionar ranges, você precisa adicionar duas medidas – as datas de início e término. Faça o seguinte:

1. Vá para Measures no painel de propriedades.
2. Clique em Add measure e selecione uma medida.
3. Clique em Add measure e selecione uma medida.

Moments

Moments mostram eventos com duração zero. Eles requerem apenas uma medida (a data).

Para adicionar moments, basta adicionar ranges. Se em seus dados houver itens com apenas datas únicas, o AnyGantt os exibirá automaticamente como moments.

Configurações de Eventos

Padrões

Ranges

Você pode alterar as configurações de aparência padrão de ranges: a direção, altura, cor de preenchimento e espessura do traço. A cor do traço ajusta-se automaticamente à cor de preenchimento.

Para definir os padrões de ranges, vá para Appearance > Defaults no painel de propriedades, clique em Ranges e faça o seguinte:

• Para definir a direção, selecione Up ou Down no menu suspenso Direction.
• Para definir a altura, use a opção Height.
• Para configurar o preenchimento, vá para Fill, defina o preenchimento Type e use as opções disponíveis abaixo.
• Para configurar o traço, vá para Stroke e use a opção Thickness.

Observe que a direção dos eventos afeta sua posição em relação ao axis e a posição do próprio axis. Por exemplo, aqui a direção dos ranges está definida como Down:

Ranges suportam os seguintes tipos de preenchimento e configurações:

Preenchimento Sólido

Preenchimento de Paleta

Moments

Moments são compostos de duas partes: pins e markers.

Você pode alterar as configurações de aparência padrão de moments: a direção, as cores de pins e markers, a forma e o tamanho dos markers. Além disso, você pode usar imagens personalizadas como markers.

Para definir os padrões de moments, vá para Appearance > Defaults no painel de propriedades, clique em Moments e faça o seguinte:

• Para definir a direção, selecione Up ou Down no menu suspenso Direction.
• Para configurar pins, vá para Pins e use as opções Stroke, Stroke type e Thickness.
• Para configurar markers, vá para Markers e use as opções Type, Fill (disponível apenas para formas integradas), Stroke, Thickness e Size.

Observe que a direção dos eventos afeta sua posição em relação ao axis e a posição do próprio axis. Por exemplo, aqui a direção dos moments está definida como Down:

Veja como você define o tipo de markers em Markers > Type:

	Clique no pictograma "icon" e selecione um ícone (forma) integrado no menu suspenso.
	Clique no pictograma "image" e insira um link para uma imagem personalizada na caixa de entrada Image URL.

Cor por Expressão

Você pode colorir ranges e moments como desejar. Duas opções estão disponíveis: coloração padrão, que é descrita acima, e coloração por expressão, descrita nesta seção.

A coloração por expressão define cores usando uma expressão definida pelo usuário. Ao colorir por expressão, você pode definir quais cores usar e com quais valores usá-las, permitindo mais controle sobre como as cores são usadas na visualização. Por exemplo, você pode destacar valores de interesse particular ou diferenciar entre valores dentro de diferentes faixas de valores. A coloração por expressão também pode ser usada para colorir uma visualização por valores não incluídos na visualização, como colorir eventos por país, importância, número de participantes, etc.

Para colorir um evento por expressão, faça o seguinte:

1. Vá para Add-Ons > Data settings no painel de propriedades.
2. Clique em Add setting.
3. Selecione Ranges ou Moments no primeiro menu suspenso.
4. Selecione a opção Color string no segundo menu suspenso.
5. Insira uma expressão na caixa de entrada.

Exemplos

Aqui estão alguns exemplos para mostrar o que você pode fazer com expressões por cor.

Exemplo: Colorindo por um único valor de medida

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

Neste exemplo, existe uma condição. Se a duração dos ranges for > 2 anos, eles serão coloridos como 'lightgreen', caso contrário, serão coloridos como 'lightgray'.

Exemplo: Colorindo por múltiplos valores de medida

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

Neste exemplo, existem múltiplas condições: cada evento é atribuído a um dos quatro grupos, e os ranges pertencentes a diferentes grupos são coloridos com cores diferentes.

Labels

Labels são objetos de texto que exibem informações sobre ranges e moments. Cada um dos dois tipos de eventos possui suas próprias configurações de label.

Por padrão, as labels mostram o campo de dados ou expressão que você usa como dimension, mas você pode personalizar o texto.

Observe que é possível definir o texto da label como um valor de string ou como uma expressão de string arbitrária. O uso de expressões permite destacar valores de interesse particular, exibir valores não incluídos em uma visualização ou resultados de cálculos e assim por diante.

Além disso, você pode usar HTML nas labels.

Para definir o texto das labels,

1. Vá para Add-ons > Label settings no painel de propriedades.
2. Clique em Ranges ou Moments.
3. Selecione a opção Custom text no menu suspenso.
4. Insira um valor de string ou uma expressão de string na caixa de entrada.

Para configurá-los, use as opções abaixo:

• Para configurar o fundo (disponível apenas para moments), ative o controle deslizante Background e use as opções Fill, Opacity, Corner type, Border type e Border radius.
• Para configurar a fonte, ative o controle deslizante Font e use as opções Style, Color, Size, Family e Shadow.
• Para definir o limite de caracteres, ative o controle deslizante Character limit e insira um número na caixa de entrada.

No exemplo abaixo, as labels de ranges e moments têm diferentes configurações de texto, fundo e fonte e exibem as seguintes expressões:

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 são caixas de texto que aparecem quando o usuário passa o mouse sobre os eventos. Você pode definir um texto de tooltip personalizado separadamente para ranges e moments.

Observe que é possível definir o texto da tooltip como um valor de string ou como uma expressão de string arbitrária. O uso de expressões permite destacar valores de interesse particular, exibir valores não incluídos em uma visualização ou resultados de cálculos e assim por diante.

Além disso, você pode usar HTML nas tooltips.

Para desativar ou ativar as tooltips, vá para Interactivity no painel de propriedades e ative o controle deslizante Tooltips.

Para configurar as tooltips, vá para Add-ons > Tooltip settings no painel de propriedades e faça o seguinte:

• Para configurar o fundo, ative o controle deslizante Background e use as opções Fill e Opacity.
• Para configurar a fonte, ative o controle deslizante Font e use as opções Style, Color, Size e Family.

Veja como o fundo e a fonte das tooltips podem ficar após a configuração:

Para definir o texto da tooltip e o limite de caracteres de ranges ou moments, faça o seguinte:

1. Vá para Add-ons > Tooltip settings no painel de propriedades.
2. Clique em Add tooltip.
3. Selecione Ranges ou Moments no menu suspenso.
4. Insira um valor de string ou uma expressão de string na caixa de entrada.
5. Ative o controle deslizante Character limit e insira um número na caixa de entrada.
   (Esta opção estará disponível apenas após a definição do texto.)

Aqui está um exemplo de uma expressão para configurar o texto da tooltip de 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')

Outros Recursos

Reference Lines

Uma reference line é uma linha que intercepta um determinado ponto no axis.

Você pode adicionar uma ou várias reference lines a um gráfico para indicar uma determinada data ou datas. A reference line é desenhada apenas se cair dentro do intervalo de exibição atual.

Observe que é possível especificar o valor que define a posição de uma reference line como um valor de data ou como uma expressão de data arbitrária.

Para adicionar uma reference line, faça o seguinte:

1. Vá para Add-ons > Reference lines no painel de propriedades.
2. Clique em Add reference line.
3. Insira um valor de data ou uma expressão de data na caixa de entrada Date.

Em seguida, configure-a:

• Para adicionar uma etiqueta de texto, insira uma string de texto na caixa de entrada Label.
• Para configurar o traço, use as opções Stroke, Stroke type e Thickness.
• Para configurar a posição da etiqueta, use as opções Label orientation e Label position.
• Para configurar a fonte, ative o controle deslizante Font e use as opções Style, Color, Size, Family e Shadow.

Reference Ranges

Um reference range é uma área que intercepta um determinado intervalo de pontos no axis.

Você pode adicionar um ou vários reference ranges a um gráfico para indicar um determinado período ou períodos de tempo. O reference range é desenhado apenas se cair dentro do intervalo de exibição atual.

Observe que é possível especificar os valores que definem a posição de um reference range como valores de data ou como expressões de data arbitrárias.

Para adicionar um reference range, faça o seguinte:

1. Vá para Add-ons > Reference range no painel de propriedades.
2. Clique em Add reference range.
3. Insira um valor de data ou uma expressão de data na caixa de entrada From.
4. Insira um valor de data ou uma expressão de data na caixa de entrada To.

Em seguida, configure-o:

• Para adicionar uma etiqueta de texto, insira uma string de texto na caixa de entrada Label.
• Para configurar o preenchimento, use as opções Color e Opacity.
• Para configurar a posição da etiqueta, use as opções Label orientation e Label position.
• Para configurar a fonte, ative o controle deslizante Font e use as opções Style, Color, Size, Family e Shadow.

Scale

A AnyGantt Extension opera uma scale, que você pode configurar. É possível definir o intervalo de datas que o gráfico exibe por padrão, bem como o mínimo e o máximo da scale.

Observe que você pode especificar todas essas datas como valores de data ou como expressões de data arbitrárias.

Intervalo de Exibição Padrão

Por padrão, o gráfico é reduzido ao máximo. Ele também pode ser ampliado para um intervalo de datas personalizado. No entanto, os usuários ainda poderão reduzir o gráfico usando a roda do mouse (ou outros recursos de interatividade) – se o mínimo e o máximo da scale permitirem.

Para definir o intervalo de exibição padrão, faça o seguinte:

1. Vá para Appearance > Scale > Display range no painel de propriedades.
2. Altere Display range de Auto para Custom.
3. Insira um valor de data ou uma expressão de data na caixa de entrada From.
4. Insira um valor de data ou uma expressão de data na caixa de entrada To.

No seguinte exemplo, o intervalo de exibição padrão é definido como 1º de janeiro de 2012 e 2016:

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

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

Aqui está como o gráfico com essas configurações aparece por padrão:

Mínimo e Máximo

Quando você reduz o gráfico ao máximo usando a roda do mouse (ou outros recursos de interatividade), você vê o intervalo de datas entre o mínimo e o máximo da scale. Por padrão, o AnyGantt os ajusta para exibir todos os eventos do gráfico.

Para definir a data mínima da scale,

1. Vá para Appearance > Scale > Minimum no painel de propriedades.
2. Altere Minimum de Auto para Custom.
3. Se necessário, marque a caixa Soft para ativar o modo soft.
4. Insira um valor de data ou uma expressão de data na caixa de entrada.

Para definir a data máxima da scale,

1. Vá para Appearance > Scale > Maximum no painel de propriedades.
2. Altere Maximum de Auto para Custom.
3. Se necessário, marque a caixa Soft para ativar o modo soft.
4. Insira um valor de data ou uma expressão de data na caixa de entrada.

Neste exemplo, o mínimo é definido como 5 anos antes da data de início mais recente, e o máximo é definido como 10 anos após a data de término mais recente:

Min(start_date) - 365 * 5

Max(finish_date) + 365 * 5

Aqui está como o gráfico com essas configurações aparece quando é reduzido ao máximo:

Modo Soft

Para ativar o modo soft, marque a caixa Soft ao definir o mínimo e o máximo da scale.

O modo soft ajusta o mínimo e o máximo aos eventos. Isso é importante quando há eventos ou partes de eventos antes do mínimo ou depois do máximo.

Por exemplo, se você definir o mínimo como 1º de janeiro de 2015 e ativar o modo soft, o gráfico ainda mostrará todos os eventos e partes de eventos que são anteriores a esta data. Ativar o modo soft tanto para o mínimo quanto para o máximo garante que seja sempre possível reduzir o gráfico para ver todos os elementos.

Abaixo está um Timeline Chart com o mínimo e o máximo da scale definidos para 1º de janeiro de 2015 e 2018:

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

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

O modo soft está desativado tanto para o mínimo quanto para o máximo:

Aqui está o mesmo gráfico com o modo soft ativado apenas para o mínimo:

Aqui o modo soft está ativado apenas para o máximo:

Axis

Um axis é uma longa barra horizontal que exibe datas. Você pode ajustar sua altura, cores e fonte. É possível aplicar diferentes configurações de traço ao próprio axis e aos seus ticks. Além disso, o axis é afetado pelo locale.

Para configurar o axis, vá para Appearance > Axis no painel de propriedades e faça o seguinte:

• Para definir a altura, use a opção Height.
• Para configurar o preenchimento e o traço, use as opções Fill, Stroke e Thickness.
• Para configurar os ticks, vá para Ticks e use as opções Stroke e Thickness.
• Para configurar a fonte das labels, vá para Labels, ative o controle deslizante Font e use as opções Style, Color, Size, Family e Shadow.

Níveis de Zoom

Em cada nível de zoom, o axis exibe certas unidades de tempo. Para defini-los,

1. Vá para Appearance > Timeline no painel de propriedades.
2. Clique em Zoom levels para abrir a janela com as configurações.
3. Configure os níveis de zoom.
4. Clique em Save e Close.

Aqui está a janela com as configurações padrão dos níveis de zoom:

Por padrão, existem 9 níveis de zoom. O número máximo disponível de níveis também é 9. Na janela Zoom levels, você pode excluir e duplicar níveis clicando nos botões à direita deles. Para restaurar as configurações padrão, clique em Restore defaults.

Para cada nível de zoom, você pode especificar uma unidade de tempo e um número de unidades. Os níveis são organizados automaticamente na ordem correta após você fechar o menu.

No exemplo abaixo, há um gráfico com apenas um nível de zoom:

Locale

Por padrão, o AnyChart lê o locale do Qlik e o aplica aos formatos de data/hora usados nas labels do axis e nas tooltips. Você pode selecionar outro locale:

1. Vá para Appearance > Locale no painel de propriedades.
2. Desmarque a caixa Use Qlik locale.
3. Selecione um locale no menu suspenso.

O AnyChart suporta os seguintes 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)

Aqui está um Timeline Chart com o locale chinês:

Interatividade

Por padrão, os seguintes recursos de interatividade estão disponíveis: seleção, snapshots, tooltips e a capacidade de ampliar o gráfico com a roda do mouse. Você também pode ativar ferramentas de navegação adicionais que permitem rolar e ampliar o gráfico: o scroller e o zoom controls.

Para desativar ou ativar esses recursos, vá para Interactivity no painel de propriedades e alterne os seguintes controles deslizantes:

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

Nesta captura de tela, o scroller e o zoom controls estão ativados: