Utilização de gráficos em Comunicações interativas using-charts-in-interactive-communications
Um gráfico é uma representação visual de dados. Ele condensa grandes quantidades de informações em um formato visual fácil de entender, permitindo que os recipients da Comunicação interativa visualizem, interpretem e analisem melhor dados complexos.
Ao criar uma Comunicação interativa, você pode adicionar gráficos para representar visualmente dados bidimensionais do modelo de dados de formulário da Comunicação interativa. O componente de Gráfico permite adicionar e configurar os seguintes tipos de gráficos: Pizza, Coluna, Rosca, Barra, Linha, Linha e Ponto, Ponto, Área e Quadrante.
Adicionar e configurar o gráfico em uma comunicação interativa add-and-configure-chart-in-an-interactive-communication
Execute as seguintes etapas para adicionar e configurar um gráfico em uma comunicação interativa:
-
Selecionar Componentes da comunicação interativa.
-
Arraste e solte a Gráfico componente a um dos seguintes componentes:
- Canal de impressão: área de destino ou campo de imagem
- Canal da Web: painel ou área de direcionamento
-
Selecione o componente do gráfico no editor de comunicação interativa e selecione Configurar ( ) na barra de ferramentas Componente.
As Propriedades do Gráfico são exibidas no painel esquerdo.
Propriedades básicas de um gráfico de tipo de linha no canal de impressão
Propriedades básicas de um gráfico de tipo de linha no canal da Web
-
Configure o propriedades do gráfico com base no tipo de canal.
-
(Somente canal de impressão) Na caixa Configurações do agente, especifique se é obrigatório que o agente use esse gráfico. Se i É Obrigatório Que O Agente Use Este Gráfico não estiver selecionada, o agente poderá selecionar o ícone de olho para o gráfico no Conteúdo guia da Interface do usuário do agente para mostrar ou ocultar o gráfico.
-
Selecionar para salvar as propriedades do gráfico.
Selecionar Visualizar para exibir a aparência e os dados associados ao gráfico. Selecionar Editar para reconfigurar as propriedades do gráfico.
Configurar propriedades do gráfico configure-chart-properties
Configure as seguintes propriedades ao criar gráficos para canais de impressão e da Web:
Usar funções no gráfico use-functions-in-chart
Você pode configurar um gráfico para usar funções estatísticas para calcular valores a partir dos dados de origem para plotar no gráfico. Ao aplicar funções em um gráfico, é possível plotar dados que não são fornecidos diretamente pelo modelo de dados de formulário.
Embora o componente de Gráfico venha com algumas funções integradas, você pode escrever funções personalizadas e disponibilizá-los para uso na configuração do gráfico no canal da web.
As seguintes funções estão disponíveis por padrão com o componente de Gráfico:
Média (Médio) Retorna a média dos valores no eixo X ou Y para um determinado valor no outro eixo.
Sum Retorna a soma de todos os valores no eixo X ou Y de um determinado valor no outro eixo.
Máximo Retorna o máximo dos valores no eixo X ou Y para um determinado valor no outro eixo.
Frequência Retorna o número de valores no eixo X ou Y para um determinado valor no outro eixo.
Intervalo Retorna a diferença entre o máximo e o mínimo dos valores no eixo X ou Y para um determinado valor no outro eixo.
Mediana Retorna o valor que separa valores mais altos e mais baixos na metade no eixo X ou Y para um determinado valor no outro eixo.
Mínimo Retorna o mínimo dos valores no eixo X ou Y para um determinado valor no outro eixo.
Modo Retorna o valor com mais ocorrências no eixo X ou Y para um determinado valor no outro eixo.
Para obter mais informações, consulte Exemplo 2: Aplicação das funções Soma e Frequência em um gráfico de linhas.
Funções personalizadas no canal da Web customfunctionsweb
Além de usar as funções padrão em gráficos, você pode escrever funções personalizadas em JavaScript™ e disponibilizá-las na lista de funções no componente Gráfico para canal da Web.
Uma função assume uma matriz ou valores e um nome de categoria como entradas e retorna um valor. Por exemplo:
Multiply(valueArray, category) {
var val = 1;
_.each(valueArray, function(value) {
val = val * value;
});
return val;
}
Depois de escrever uma função personalizada, faça o seguinte para disponibilizá-la para uso na configuração do gráfico:
-
Adicione a função personalizada na biblioteca do cliente associada à Comunicação interativa relevante. Para obter mais informações, consulte Configuração da ação Enviar e Uso de bibliotecas do lado do cliente.
-
Para exibir a função personalizada na lista suspensa Função, no CRXDe Lite, crie uma
nt:unstructured
na pasta aplicativos com as seguintes propriedades:-
Adicionar propriedade
guideComponentType
com valor comofd/af/reducer
. (obrigatório) -
Adicionar propriedade
value
para um nome totalmente qualificado da função personalizada do JavaScript™. (obrigatório) e defina seu valor como o nome da função personalizada, como Multiplicar. -
Adicionar propriedade
jcr:description
com o valor que você deseja exibir como o nome da função personalizada que aparece na lista suspensa Função. Por exemplo, Multiplicar. -
Adicionar propriedade
qtip
com um valor que será uma breve descrição da função personalizada. Ela aparece como uma dica de ferramenta ao passar o ponteiro sobre o nome da função na Função lista suspensa.
-
-
Clique em Salvar tudo para salvar a configuração.
A função agora está disponível para uso no gráfico.
Exemplo 1: saída de gráfico em impressão e Web chartoutputprintweb
Na guia Básico, defina o tipo de gráfico, as propriedades do modelo de dados do formulário de origem que contêm dados, os rótulos a serem plotados no eixo X e no eixo Y do gráfico e, opcionalmente, a função estatística para calcular os valores para plotagem no gráfico.
Vamos entender em detalhes sobre o mínimo necessário de informações em propriedades básicas, com a ajuda de uma instrução de cartão gerada usando uma Comunicação interativa. Considere que você deseja gerar um gráfico para descrever a quantia de despesas diferentes no demonstrativo. Você deseja usar diferentes tipos de gráficos para impressão e saída da Web da Comunicação Interativa.
Gráfico de colunas para impressão columnchartprint
Para fazer isso, especifique as seguintes propriedades:
- Nome - Especifique o nome do gráfico.
- Tipo de gráfico - Selecionar Coluna na lista suspensa.
- Título - Especificar Tipo de Despesa para o eixo X e Quantia da Transação para o eixo Y.
- Objetos do modelo de dados - Selecione as propriedades do objeto de modelo de dados para criar associações de dados para o eixo X (Tipo de Despesa) e o eixo Y (Valor da Transação).
Gráfico de colunas no canal de impressão de uma comunicação interativa
Gráfico de rosca para Web donutchartweb
Para fazer isso, especifique as seguintes propriedades:
- Nome - Especifique o nome do gráfico.
- Tipo de gráfico - Selecionar Rosca na lista suspensa.
- Objetos do modelo de dados - Selecione as propriedades do objeto de modelo de dados para criar associações de dados para o eixo X (Tipo de Despesa) e o eixo Y (Valor da Transação).
- Raio interno - Especifique o valor do Raio Interno como 150 para especificar o raio (em pixels) do círculo interno no gráfico.
- Dica de ferramenta - Use o ${x}(${y}) formato padrão para exibir a dica de ferramenta. A dica de ferramenta é exibida como: Tipo de Despesa (Valor da Transação). Exemplo: Débito para Bitcoin(10000).
Gráfico de rosca no canal da Web de uma comunicação interativa
Exemplo 2: Aplicação das funções Soma e Frequência em um gráfico de linhas applicationsumfrequency
Ao aplicar funções em um gráfico, é possível plotar dados que não são fornecidos diretamente pelo modelo de dados de formulário. Neste exemplo, usamos um exemplo de demonstrativo de cartão de crédito para entender como as funções Soma e Frequência podem ser aplicadas ao gráfico.
Gráfico de linhas sem uma função com duas transações "Débito para AirBnB"
Função Sum sum-function
Você pode aplicar a função sum para adicionar valores de várias instâncias da mesma propriedade de dados e mostrá-la apenas uma vez. Por exemplo, no gráfico a seguir, a função Sum é aplicada no eixo Y para somar o valor dos dois Débitos para transações AirBnB (2050 e 1050) e mostrar apenas uma transação (3100).
A função Sum pode tornar o gráfico mais útil quando você deseja agrupar e exibir a soma de muitas instâncias da mesma propriedade de dados.
Função de frequência frequency-function
A função Frequency retorna o número de valores do eixo Y para um determinado valor no outro eixo. Com a aplicação da função Frequência no eixo Y (Quantia da Transação), o gráfico mostra que houve duas ocorrências de Débito para transações AirBnB e uma ocorrência do resto dos tipos de transações.
Exemplo 3: gráfico Quadrante Multissérie na Web example-multi-series-quadrant-chart-in-web
O gráfico representa o valor das transações executadas em um determinado intervalo de datas. O gráfico de Quadrante oferece a capacidade de dividir a área do gráfico em quatro seções rotuladas. O gráfico usa um ponto de referência estático para o eixo X e o eixo Y. Use o recurso de várias séries para separar dados com base no nome do banco.
Para fazer isso, especifique as seguintes propriedades:
-
Nome: Especifique o nome do gráfico.
-
Tipo de gráfico: Selecionar Quadrante na lista suspensa.
-
Selecione o Várias séries caixa de seleção
-
Objeto de modelo de dados: especifique a propriedade do objeto de modelo de dados para a série. A propriedade do objeto de modelo de dados para o nome do banco é pai das propriedades do objeto de modelo de dados representadas no eixo X e no eixo Y.
-
Objetos do modelo de dados: Selecione as propriedades do objeto de modelo de dados para criar associações de dados para o eixo X (Data da Transação) e o eixo Y (Valor da Transação).
-
No Ponto de referência , selecione Estático como o Tipo de vínculo.
-
Especifique os valores para os pontos de referência do eixo X e do eixo Y.
-
Especifique os rótulos de quadrante dos quadrantes Superior Esquerdo, Superior Direito, Inferior Direito e Inferior Esquerdo.
-
Selecione o Mostrar legendas caixa de seleção para exibir os códigos de cor para os nomes dos bancos.