Gráfico de alvo

Fundamentos

Download e Instalação

Qlik Sense Desktop

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

1. Baixe a AnyChart Bullseye 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 anychart-4x-bullseye para o diretório de Extensions.
5. Reinicie o Qlik Sense Desktop.

Qlik Sense Server

Para instalar a AnyChart Bullseye Extension em um servidor Qlik Sense,

1. Baixe a AnyChart Bullseye 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 de senha em branco.
6. Clique em Open na janela do explorador de arquivos.
7. Clique em Import.

Qlik Sense Cloud

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

1. Baixe a AnyChart Bullseye Extension para Qlik Sense Cloud.
2. Acesse o Management Console:
   • adicione /console ao endereço do seu inquilino: https://<your tenant address>/console
   • ou use the 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 baixado.
3. Clique em Add.
4. No Management Console, vá para a seção Content Security Policy e clique em Add.
5. No diálogo, dê um nome à Content Security Policy – por exemplo, AnyChart.
6. Digite o endereço do servidor de origem: qlik.anychart.com
7. Selecione as seguintes diretivas:
   • connect-src
   • font-src
   • img-src
   • script-src
   • style-src

1. Clique em Add.

Visão Geral

O gráfico Bullseye é uma ferramenta que exibe pontos de dados como marcadores espalhados por um conjunto de anéis concêntricos, que representam categorias ordinais ou intervalos de valores numéricos.

Você pode configurar a aparência do gráfico: definir as cores, ajustar os marcadores, legenda, eixos e grades, definir o ângulo inicial e o raio interno, ativar e configurar os rótulos e definir o texto das tooltips.

Além disso, as seguintes opções estão disponíveis: interatividade e condições de cálculo.

Início Rápido

Este tutorial rápido explica como criar um gráfico Bullseye básico.

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

1. Vá para Custom objects > AnyChart no painel de ativos.
2. Arraste um gráfico AnyChart Bullseye vazio para a planilha.

Em seguida, adicione três dimensões, a primeira representando categorias nominais (os grupos de pontos de dados), a segunda categorias ordinais (os nomes dos anéis) e a terceira os IDs dos pontos:

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

Alternativamente, é possível adicionar duas dimensões e uma medida se a estrutura dos seus dados exigir isso.

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.

Dependendo da estrutura de dados, você pode adicionar duas ou três dimensões.

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.

Dependendo da estrutura de dados, você pode adicionar uma medida ou criar um gráfico sem medidas.

Estruturas de Dados

O gráfico Bullseye suporta duas maneiras diferentes de configurar os dados (estruturas de dados). Você deve selecionar a que melhor se adapta aos seus dados.

3 Dimensões

Se você deseja que o eixo Y exiba categorias ordinais (os nomes dos anéis), adicione três dimensões:

• A primeira dimensão (Categories) representa os nomes das categorias nominais, que são mostradas no eixo X.
• A segunda dimensão (Rings) representa os nomes dos anéis, que são mostrados no eixo Y.
• A terceira dimensão (ID) representa os IDs dos pontos de dados.

Lembre-se de que a ordem das categorias no eixo Y é definida pelas configurações de classificação da segunda dimensão.

2 Dimensões + 1 Medida

Se você deseja que o eixo Y exiba valores numéricos, adicione duas dimensões e uma medida:

• A primeira dimensão (Categories) representa os nomes das categorias nominais, que são mostradas no eixo X.
• A segunda dimensão (ID) representa os IDs dos pontos de dados.
• A medida (Rings) representa valores numéricos, que são mostrados no eixo Y.

Observe que quando o eixo Y exibe valores numéricos, é possível definir o tipo de escala (linear ou logarítmica).

Aparência

Cores

O AnyChart Bullseye suporta diferentes maneiras de colorir os marcadores do gráfico.

Um dos modos de cor (By dimension) também afeta a legenda. Além disso, dependendo do modo, a legenda está disponível ou não.

Para selecionar um modo de cor,

1. Vá para Appearance > Colors and legend no painel de propriedades.
2. Acione o controle deslizante Colors.
3. Selecione um modo de cor no menu suspenso.

A tabela a seguir explica a diferença entre os diferentes modos e lista as configurações disponíveis para cada um deles:

Cor Única

Você pode definir uma cor, que é aplicada a todos os marcadores:

1. Vá para Appearance > Colors and legend no painel de propriedades.
2. Acione o controle deslizante Colors.
3. Selecione Single color no menu suspenso.
4. Use as opções Color e Opacity.

Neste modo, a legenda não está disponível.

Colorir por Dimensão

Você pode usar as paletas integradas para colorir os marcadores por qualquer dimensão (dependendo da estrutura de dados, existem duas ou três dimensões):

1. Vá para Appearance > Colors and legend no painel de propriedades.
2. Acione o controle deslizante Colors.
3. Selecione By dimension no menu suspenso.
4. Selecione uma dimensão no menu suspenso Select dimension.
5. Selecione uma paleta e use as opções Reverse colors e Opacity.

A legenda é gerada e colorida automaticamente. No entanto, você sempre pode desativá-la ou personalizá-la, se necessário.

Nesta captura de tela, os marcadores e a legenda são coloridos pela primeira dimensão:

Aqui os marcadores e a legenda são coloridos pela segunda dimensão:

Colorir por Expressão

Se a estrutura de dados do gráfico incluir uma medida, você poderá colorir seus marcadores por expressão:

1. Vá para Appearance > Colors and legend no painel de propriedades.
2. Acione o controle deslizante Colors.
3. Selecione By expression no menu suspenso.
4. Insira uma expressão na caixa de entrada Expression.

Além disso, a forma dos marcadores também pode ser definida condicionalmente. A legenda está disponível, mas você deve adicionar e colorir manualmente cada item.

A coloração por expressão define cores usando uma expressão definida pelo usuário. Ao colorir por expressão, você pode definir as cores a serem usadas e com quais valores usá-las, permitindo maior controle sobre como as cores são usadas na visualização. Por exemplo, você pode destacar valores de interesse particular ou diferenciar 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 em uma visualização, como colorir marcadores por medidas ou dimensões alternativas.

Exemplos

Aqui estão alguns exemplos para mostrar o que você pode fazer com expressões por cor. Observe que as expressões não afetam a legenda, portanto, nestes exemplos, ela é configurada manualmente.

Exemplo: Colorir por Medida

If(Price < 1, 'green',
If(Price < 100, 'gold',
If(Price < 1000, 'orange', 
If(Price >= 1000, 'red'))))

Neste exemplo, 4 cores indicam 4 faixas da medida mostrada no eixo Y (preço).

Exemplo: Colorir por medida alternativa

If(EstimatedCompletionTime < 4, 'red',
If(EstimatedCompletionTime < 8, 'orange',
If(EstimatedCompletionTime >= 8, 'green')))

Neste exemplo, 3 cores indicam 3 faixas do tempo estimado de conclusão. O eixo Y, no entanto, exibe outra medida – o preço.

Exemplo: Colorir por dimensão alternativa

If(Type = 'Antibiotic', 'green',
If(Type = 'Antiviral', 'orange',
If(Type = 'Analgesic', 'blue',
If(Type = 'Anticancer', 'red'))))

Neste exemplo, 4 cores distinguem marcadores pertencentes a 4 grupos diferentes (tipos de medicamentos). O eixo X exibe outros grupos (países).

Marcadores

Tipo e Tamanho

Para configurar marcadores, vá para Appearance > Colors and legend no painel de propriedades, acione o controle deslizante Colors e faça o seguinte:

• Para definir o tamanho, use a opção Size.
• Para definir o tipo, acione o controle deslizante Marker shape e selecione um ícone integrado (forma) no menu suspenso abaixo.
• Para definir os marcadores como uma imagem personalizada, insira um link para the imagem na caixa de entrada Image URL.

Aqui está um dos ícones integrados:

Tipo por Expressão

Você pode adicionar uma expressão definida pelo usuário atribuindo diferentes ícones integrados a diferentes marcadores. Esta opção está disponível quando os marcadores são coloridos por expressão. Para usá-la,

1. Vá para Appearance > Colors and legend no painel de propriedades.
2. Acione o controle deslizante Marker shape.
3. Insira uma expressão na caixa de entrada Marker shape expression.

Na expressão, você deve se referir aos ícones pelos seus nomes:

'circle'

'cross'

'diamond'

'diagonal-cross'

'square'

'star4'

'line'

'star5'

'trapezium'

'star6'

'pentagon'

'star7'

'arrowhead'

'star10'

'triangle-down'

'arrow-down'

'triangle-up'

'arrow-up'

'triangle-left'

'arrow-left'

'triangle-right'

'arrow-right'

No exemplo abaixo, as cores e formas representam diferentes faixas da medida mostrada no eixo Y (preço). A seguinte expressão é usada para definir as formas:

If(Price < 1, 'triangle-up',
If(Price < 100, 'diamond',
If(Price < 1000, 'cross', 
If(Price >= 1000, 'star4'))))

A expressão que define as formas não precisa ser semelhante à expressão que define as cores. Por exemplo, aqui as cores representam a medida mostrada no eixo Y (preço), mas as formas representam a dimensão mostrada no eixo X (país):

If(Country = 'China', 'triangle-up',
If(Country = 'Germany', 'cross',
If(Country = 'USA', 'star4')))

Legenda

Quando o gráfico é colorido por dimensão, a legenda é gerada e colorida automaticamente. No entanto, você pode desativá-la ou personalizá-la.

Quando o gráfico é colorido por expressão, a legenda está disponível, mas você deve adicionar e colorir manualmente cada item.

Para configurar a legenda, vá para Appearance > Colors and legend no painel de propriedades e faça o seguinte:

• Para ativar ou desativar, acione o controle deslizante Legend.
• Para definir a posição, selecione Top, Right, Bottom ou Left no menu suspenso Position.
• Para definir o alinhamento, selecione uma das opções disponíveis no menu suspenso Alignment.
• Para definir o título, vá para Title e insira seu texto na caixa de entrada Title.
• Para configurar a fonte do título, use as opções Style, Color, Size, Family e Shadow.

Para adicionar um novo item de legenda,

1. Vá para Items e acione o controle deslizante Items (se presente).
2. Clique em Add legend item.
3. Insira o nome do item na caixa de entrada Label.
4. Para definir a cor, use a opção Color.

Itens personalizados substituem os gerados automaticamente.

Nesta captura de tela, o gráfico é colorido pela segunda dimensão e a legenda gerada automaticamente é mostrada, com sua posição e título personalizados:

Aqui o gráfico é colorido por expressão e a legenda exibe itens personalizados, com sua posição e título personalizados:

Eixos

Eixo X

O eixo X exibe os nomes das categorias nominais (a primeira dimensão em qualquer estrutura de dados).

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

• Para desativar ou ativar os rótulos, acione o controle deslizante Labels.
• Para configurar o traço, vá para Line e use as opções Line, Color e Style.
• Para configurar a grade X, acione o controle deslizante Grid e use as opções abaixo.

Eixo Y

Dependendo da estrutura de dados, o eixo Y exibe categorias ordinais (os nomes dos anéis) ou valores numéricos (correspondentes à medida).

A posição do eixo Y é afetada pelo ângulo inicial do gráfico.

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

• Para desativar ou ativar os rótulos, acione o controle deslizante Labels.
• Para configurar o traço, vá para Line e use as opções Line, Color e Style.
• Para configurar a grade Y, acione o controle deslizante Grid e use as opções abaixo.

Além disso, para definir o tipo da escala Y,

1. Vá para Scale type.
2. Selecione Linear ou Logarithmic no menu suspenso.

Lembre-se de que esta opção está disponível apenas quando o eixo Y exibe valores numéricos. Pode ser necessário usar o tipo de escala Logarithmic se a faixa de valores for muito ampla.

Grades

O gráfico Bullseye possui duas grades:

• A grade X cruza o eixo X e divide o gráfico em setores.
• A grade Y cruza o eixo Y e divide o gráfico em anéis.

Para configurar uma grade, vá para Appearance > X-axis ou Y-axis no painel de propriedades, acione o controle deslizante Grid e faça o seguinte:

• Para configurar o traço, vá para Line e use as opções Line, Color e Style.
• Para configurar o preenchimento, desça, selecione um tipo de preenchimento no menu suspenso e use as opções disponíveis abaixo.

As grades X e Y suportam diferentes esquemas e configurações de preenchimento:

É possível combinar tipos de preenchimento aplicando diferentes esquemas a diferentes grades. As capturas de tela abaixo mostram a maioria dos preenchimentos e suas combinações:

Ângulo Inicial

Você pode ajustar o ângulo inicial do gráfico, o que afeta a orientação do gráfico e a posição do eixo Y:

1. Vá para Appearance > Presentation no painel de propriedades.
2. Use a opção Start angle.

By default, o ângulo inicial é 0°.

Raio Interno

Você pode ajustar o raio interno do gráfico para definir o tamanho do espaço aberto no centro:

1. Vá para Appearance > Presentation no painel de propriedades.
2. Use a opção Inner radius.

By default, o raio interno é 0%: o centro é ocupado pelo anel interno e não sobra espaço extra.

Rótulos

Rótulos são objetos de texto vinculados a marcadores e exibem informações adicionais sobre os pontos de dados que representam.

By default, não há rótulos no gráfico, mas você pode ativá-los e configurá-los. Vá para Appearance > Labels no painel de propriedades e faça o seguinte:

• Para ativar ou desativar, acione o controle deslizante Labels.
• Para definir o texto, acione o controle deslizante Text e insira um valor de string ou uma expressão de string na caixa de entrada.
• Para configurar o fundo, acione o controle deslizante Background e use as opções Fill, Opacity, Corner type, Border type e Border radius.
• Para configurar a fonte, acione o controle deslizante Font e use as opções Style, Color, Size, Family e Shadow.
• Para definir o limite de caracteres, acione o controle deslizante Character limit e insira um número na caixa de entrada.

No exemplo abaixo, os rótulos exibem a seguinte expressão:

If(Price >= 1000, Drug & Chr(10) & '$' & Round(Price), ' ')

Tooltips

Tooltips são caixas de texto que aparecem quando o usuário passa o mouse sobre os marcadores. Você pode definir um texto de tooltip personalizado.

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 em tooltips.

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

Para configurar o texto da tooltip,

1. Vá para Appearance > Tooltips no painel de propriedades.
2. Acione o controle deslizante Tooltip text.
3. Insira um valor de string ou uma expressão de string na caixa de entrada.

Aqui está um exemplo de uma expressão para configurar o texto da tooltip:

'<b>' & Upper(Drug) & '</b>'&
'<br><i>' & Type & '</i>' &
'<hr>Stage: ' & Phase &
'<br>Estimated Price: $' & Price

Outros Recursos

Interatividade

By default, os seguintes recursos de interatividade estão disponíveis: seleção, snapshots e tooltips. Para desativá-los ou ativá-los, vá para Interactivity no painel de propriedades e acione os seguintes controles deslizantes:

• Selection
• Snapshots
• Tooltips

Condições de Cálculo

O AnyChart suporta condições de cálculo: você pode definir uma condição que precisa ser preenchida (true) para que o objeto seja exibido. Se a condição não for preenchida, uma mensagem personalizada será exibida.

Uma condição de cálculo é útil quando um gráfico ou tabela é muito grande e torna a visualização lenta para responder. Uma condição de cálculo pode ajudar para que, por exemplo, um objeto não seja exibido até que o usuário tenha filtrado os dados para um nível mais gerenciável aplicando seleções.

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

1. Vá para Add-ons > Data handling no painel de propriedades.
2. Insira uma expressão na caixa de entrada Calculation condition.
3. Insira um valor de string ou uma expressão de string na caixa de entrada Displayed message.

Por exemplo, a seguinte expressão permite mostrar o gráfico apenas quando o usuário seleciona menos de 10 itens de dados:

If(Count(Drug) < 10, 1, 0)

Se houver muitos itens, o AnyChart exibirá esta mensagem:

'There are too many items (' & Count(Drug) & ').'