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:

  1. Selecione Componentes no sidekick da Comunicação interativa.

  2. Arraste e solte o componente Gráfico para um dos seguintes componentes:

    • Canal de impressão: área de destino ou campo de imagem
    • Canal da Web: painel ou área de direcionamento
  3. Selecione o componente de gráfico no editor de Comunicação Interativa e selecione Configurar ( configure_icon ) 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 de impressão

    Propriedades básicas de um gráfico de tipo de linha no canal da Web

    Propriedades básicas de um gráfico de tipo de linha no canal da Web

  4. Configure as propriedades do gráfico com base no tipo de canal.

  5. (Somente canal de impressão) Em Configurações do agente, especifique se é obrigatório que o agente use este gráfico. Se a opção t É Obrigatório para o Agente Usar Este Gráfico não estiver selecionada, o agente poderá selecionar o ícone de olho para o gráfico na guia Conteúdo da Interface do Usuário do Agente para mostrar ou ocultar o gráfico.

    propriedades_do_gráfico

  6. Selecione done_icon para salvar as propriedades do gráfico.

    Selecione Visualizar para exibir a aparência e os dados associados ao gráfico. Selecione 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:

Texto
Descrição
Tipo de Canal
Nome
Identificador do elemento do gráfico. O nome do gráfico especificado neste campo não está visível no gráfico. É usado ao fazer referência ao elemento de outros componentes, scripts e expressões SOM.
Impressão e Web
Tipo de gráfico
Tipo de gráfico que você deseja gerar. As opções disponíveis são Pizza, Coluna, Rosca, Barra, Linha, Linha e Ponto, Ponto e Área.
Impressão e Web
Séries > Várias séries
Selecione para adicionar várias séries para os itens de coleção de modelo de dados de formulário representados no eixo X e no eixo Y.
Impressão e Web
Série > Objeto de modelo de dados
Nome do item de coleção de modelo de dados de formulário para adicionar várias séries ao gráfico.
Escolha uma propriedade de objeto de modelo de dados de formulário pai para as propriedades representadas no eixo X e no eixo Y para formar uma série significativa. O objeto de modelo de dados vinculado deve ser do tipo Number, String ou Date.
Impressão e Web
Mostrar empilhado
Opte por empilhar os valores de cada séria, um sobre o outro.
Impressão e Web
Eixo X > Título
Título para o eixo X.
Impressão e Web
Eixo X > Objeto do modelo de dados

Nome do item de coleção de modelo de dados de formulário a ser representado no eixo X.

Escolha duas propriedades de tipo de coleção/matriz do mesmo objeto de modelo de dados pai que sejam significativas em relação umas às outras para plotar no eixo X e Y de um gráfico. O objeto de modelo de dados vinculado deve ser do tipo Number, String ou Date.

Impressão e Web
Eixo Y > Título
Título para o eixo Y.
Impressão e Web
Eixo Y > Objeto do modelo de dados

Item de coleção de modelo de dados de formulário a ser representado no eixo Y. No canal de impressão, o objeto de modelo de dados para o eixo Y deve ser do tipo Number.

Escolha duas propriedades de tipo de coleção/matriz do mesmo objeto de modelo de dados pai que sejam significativas em relação umas às outras para plotar no eixo X e Y de um gráfico.

Impressão e Web
Eixo Y > Função
Função estatística/personalizada para usar para calcular os valores no eixo y.
Impressão e Web
Ocultar objeto
Selecione para ocultar o gráfico na saída final.
Impressão e Web
Título
Título do gráfico.
Imprimir
Altura
Altura do gráfico em pixels.
Imprimir
Largura
Largura do gráfico em pixels. É possível controlar a largura do gráfico no canal da Web usando a camada de estilo ou aplicando um tema.
Imprimir
Quebra de página obrigatória antes de
Selecione para adicionar uma quebra de página obrigatória antes do gráfico e colocar o gráfico na parte superior de uma nova página.
Imprimir
Quebra de página obrigatória depois de
Selecione para adicionar uma quebra de página obrigatória após o gráfico e colocar o conteúdo após o gráfico na parte superior de uma nova página.
Imprimir
Recuo
Recuo do gráfico à esquerda da página.
Imprimir
Dica

Formato no qual a dica de ferramenta aparece ao passar o mouse em um ponto de dados no gráfico no canal da Web. O valor padrão é ${x}(${y}). Dependendo do tipo de gráfico, quando você aponta o mouse em um ponto, barra ou fatia no gráfico, as variáveis ${x} e ${y} são substituídas dinamicamente pelos valores correspondentes no eixo X e no eixo Y e exibidas na dica de ferramenta.

Para desabilitar a dica de ferramenta, deixe a dica campo em branco. Essa opção não é aplicável para gráficos de linha e de área. Por exemplo, consulte Exemplo 1: saída de gráfico em impressão e Web.

Web
Configurações específicas do gráfico

Além das configurações comuns, as seguintes configurações específicas do gráfico estão disponíveis:

  • Mostrar legenda: Mostra uma legenda para o gráfico de pizza ou rosca quando habilitado.
  • Posição da legenda: Especifica a posição da legenda em relação ao gráfico. As opções disponíveis são Direita, Esquerda, Superior e Inferior. Use a legenda do lado direito no canal de impressão.
  • Raio interno: Disponível para gráficos de rosca para especificar o raio (em pixels) do círculo interno no gráfico.
  • Cor da linha: Disponível para gráficos de Linha, Linha e Ponto e Área para especificar a cor da linha no gráfico.
  • Cor do ponto: disponível para gráficos de Ponto e Linha e Ponto para especificar a cor dos pontos no gráfico.
  • Cor da área: disponível para gráficos de área para especificar a cor da área abaixo da linha do gráfico.
  • Ponto de Referência > Tipo de Associação: Disponível para gráficos de Quadrante para especificar o tipo de associação para o ponto de referência. Use texto estático ou a propriedade do objeto de modelo de dados para definir o valor do ponto de referência.
  • Ponto de Referência > Eixo X: Disponível para gráficos do Quadrante se você selecionar Estático na lista suspensa Tipo de vinculação para especificar o valor do eixo X para o ponto de referência.
  • Ponto de Referência > Eixo Y: Disponível para gráficos do Quadrante se você selecionar Estático na lista suspensa Tipo de vinculação para especificar o valor do eixo Y para o ponto de referência.
  • Ponto de Referência > Objeto de Modelo de Dados para Série: Disponível para vários gráficos de Quadrante de série se você selecionar Objeto de Modelo de Dados na lista suspensa Tipo de vínculo. Defina a propriedade do objeto de modelo de dados de formulário para identificar a série do ponto de referência.
  • Ponto de Referência > Valor do Objeto de Modelo de Dados para Série: Disponível para vários gráficos de Quadrante de série se você selecionar Objeto de Modelo de Dados na lista suspensa Tipo de vínculo. Use a propriedade do objeto de modelo de dados de formulário para a série e o valor definido neste campo para identificar a série do ponto de referência.
  • Ponto de Referência > Objeto de Modelo de Dados do Ponto de Referência: Disponível para gráficos do Quadrante se você selecionar Objeto de Modelo de Dados na lista suspensa Tipo de vínculo. Defina uma propriedade do objeto de modelo de dados de formulário que seja semelhante às propriedades representadas no eixo X e no eixo Y. Além disso, para várias séries, defina uma propriedade do objeto de modelo de dados que seja uma entidade secundária da propriedade do objeto de modelo de dados definida para a série.
  • Ponto de Referência > Valor do Objeto de Modelo de Dados para o Ponto de Referência: Disponível para gráficos do Quadrante se você selecionar Objeto de Modelo de Dados na lista suspensa Tipo de vínculo. Use a propriedade do objeto de modelo de dados de formulário para o ponto de referência e o valor definido neste campo para identificar o ponto de referência do gráfico.
    Rótulos do quadrante > Parte superior esquerda: Disponível para gráficos do quadrante para especificar o nome do quadrante superior esquerdo.
  • Rótulos do quadrante > Parte superior direita: Disponível para gráficos do quadrante para especificar o nome do quadrante Parte superior direita.
  • Rótulos do quadrante > Parte Inferior Direita: Disponível para gráficos do quadrante para especificar o nome do quadrante Inferior Direito.
  • Rótulos do quadrante > Parte Inferior Esquerda: Disponível para gráficos do quadrante para especificar o nome do quadrante Inferior Esquerdo.
Impressão e 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.

Funções em gráficos

Embora o componente de Gráfico venha com algumas funções integradas, você pode gravar funções personalizadas e disponibilizá-las para uso na configuração de 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édia) Retorna a média dos valores no eixo X ou Y de 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 nos eixos X ou Y de 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.

Mode 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 Sum e Frequency 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 no 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:

  1. Adicione a função personalizada na biblioteca do cliente associada à Comunicação interativa relevante. Para obter mais informações, consulte Configurando a ação Enviar e Usando Bibliotecas do Lado do Cliente.

  2. Para exibir a função personalizada na lista suspensa Função, no CRXDe Lite, crie um nó nt:unstructured na pasta de aplicativos com as seguintes propriedades:

    • Adicionar propriedade guideComponentType com valor como fd/af/reducer. (obrigatório)

    • Adicione a propriedade value a um nome totalmente qualificado da função JavaScript™ personalizada. (obrigatório) e defina seu valor como o nome da função personalizada, como Multiplicar.

    • Adicione a propriedade jcr:description com o valor que você deseja exibir como o nome da função personalizada que aparece no menu suspenso Função. Por exemplo, Multiplicar.

    • Adicione a 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 cursor sobre o nome da função na lista suspensa Função.

  3. 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 - Selecione Coluna na lista suspensa.
  • Título - Especifique o Tipo de Despesa para o eixo X e o Valor 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 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 - Selecione 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 formato padrão ${x}(${y}) 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 Web de uma Comunicação Interativa

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

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.

Soma do gráfico de linhas

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.

Frequência do gráfico de linha

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: Selecione Quadrante na lista suspensa.

  • Marque a caixa de seleção Várias Séries.

  • 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).

  • Na seção Ponto de Referência, selecione Estático como o Tipo de Associação.

  • 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.

  • Marque a caixa de seleção Mostrar legendas para exibir os códigos de cor para os nomes dos bancos.

Gráficos de quadrante

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2