Uso de gráficos em Comunicações interativas using-charts-in-interactive-communications

Usando gráficos em uma Comunicação Interativa, você pode condensar grandes quantidades de informações em um formato visual fácil de analisar e entender

Um gráfico ou um gráfico é uma representação visual de dados. Ela 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 os dados complexos.

Ao criar uma Comunicação interativa, é possível adicionar gráficos para representar visualmente dados bidimensionais a partir do modelo de dados de formulário da Comunicação interativa. O componente Gráfico permite adicionar e configurar os seguintes tipos de gráficos:

Adicionar e configurar um gráfico em uma comunicação interativa add-and-configure-chart-in-an-interactive-communication

Complete as etapas a seguir para adicionar um gráfico a uma Comunicação interativa:

Exemplo 1: Saída do gráfico na impressão e na Web chartoutputprintweb

Na guia Básico , é possível definir 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 representados no eixo x e no eixo y do gráfico e, como opção, a função estatística para calcular os valores para plotamento no gráfico.

Vamos entender em detalhes as informações mínimas necessárias nas propriedades básicas, com a ajuda de uma declaração de cartão de crédito gerada por meio de uma Comunicação interativa. Considere que você deseja gerar um gráfico para descrever a quantidade de diferentes despesas na instrução. Você deseja usar diferentes tipos de gráficos para impressão e saída da Web da Comunicação interativa.

Para fazer isso, você precisa especificar:

Figura: Gráfico de colunas na saída de impressão de uma comunicação interativa

A. Eixo Y - Valor obtido da propriedade do modelo de dados de formulário e da propriedade Título definida como Valor ($) B. Rótulo Direção do eixo X definida como Inclinação para a Esquerda C. Eixo X - Descrição de despesa obtida da propriedade do modelo de dados de formulário e da propriedade Título definida como Despesa

Figura: Gráfico de rosca na saída da Web de uma Comunicação Interativa

A. A propriedade Raio interno da rosca está definida B. A propriedade Mostrar legenda é selecionada e a propriedade Posição da legenda é definida como Direita C. A dica de ferramenta exibe o detalhe do item ao passar o mouse - A dica de ferramenta está definida como ${x}: $

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 do formulário. Neste exemplo, usamos um exemplo de declaração de cartão de crédito para entender como as funções Soma e Frequência podem ser aplicadas ao gráfico.

Figura: Gráfico de linhas sem uma função com três transações "Bed and Breakfast"

Função de soma sum-function

É possível aplicar a função sum para adicionar valores de várias instâncias da mesma propriedade de dados e exibi-la apenas uma vez. Por exemplo, no gráfico a seguir, a função Sum é aplicada no eixo Y para somar a quantia das três transações Bed e Breakfast (US$ 99,45, US$ 78 e US$ 12) e mostrar apenas uma transação (US$ 189,45).

A função Sum pode tornar o gráfico mais útil quando você deseja comparar e exibir a soma de várias instâncias da mesma propriedade de dados.

Função de frequência frequency-function

A função Frequency retorna o número de valores no eixo X ou Y para um determinado valor no outro eixo. Com a aplicação da função Frequency no eixo y (Quantia/Quantia Trans), o gráfico exibe que houve três ocorrências de transações do Bed e do Breakfast e uma ocorrência do restante dos tipos de transações.

Propriedades básicas em gráficos basicpropertiescharts

Na guia Básico , é possível configurar as seguintes propriedades:

Nome Um identificador para o elemento do gráfico. O nome não está visível no gráfico, mas ajuda a consultar o elemento de outros componentes, scripts e expressões SOM.

Título (somente canal de impressão) Especifica o título do gráfico.

Tipo de gráfico Especifica o tipo de gráfico que você deseja gerar. As opções disponíveis são Pizza, Coluna, Rosca, Barra (somente canal da Web), Linha, Linha e Ponto, Ponto e Área. Para obter mais informações, consulte o Exemplo 1: Saída do gráfico na impressão e na Web.

Eixo X > Título Especifica o título para o eixo x.

Eixo X > Objeto do Data Model * Especifique o nome do item de coleção do modelo de dados de formulário a ser plotado no eixo x.

Eixo X > Função Especifica a função estatística/personalizada a ser usada para calcular os valores no eixo x. Para obter mais informações sobre funções, consulte Usar funções no gráfico e Exemplo 2: Aplicação de funções de soma e média em um gráfico de linhas.

Eixo X > Direção do rótulo Direção do rótulo no gráfico no canal de impressão. Se você escolher a direção do rótulo como Rotação personalizada, o campo Ângulo de rotação personalizado (graus) será exibido. No campo Ângulo de rotação personalizado (graus), é possível escolher o ângulo de rotação em etapas de 15 graus.

Eixo Y > Título Especifica o título para o eixo y.

Eixo Y > &Atraso do objeto do modelo de dados; Especifica o item de coleção do modelo de dados de formulário a ser plotado no eixo y. No canal Impressão, o objeto do modelo de dados para o eixo Y deve ser do tipo Número.

Eixo Y > Função Especifica a função estatística/personalizada a ser usada para calcular os valores no eixo y. Para obter mais informações sobre funções, consulte Usar funções no gráfico e Exemplo 2: Aplicação de funções de soma e média em um gráfico de linhas.

Mostrar legenda Mostra uma legenda para o gráfico de pizza ou rosca quando ativado.

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.

Altura (somente canal de impressão) Altura do gráfico em pixels.

Largura (somente canal de impressão) Largura do gráfico em pixels.

Dica de ferramenta (somente canal da Web) Especifica o formato no qual a dica de ferramenta aparece ao passar o mouse sobre 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 para 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 desativar a dica de ferramenta, deixe o campo Dica de ferramenta em branco. Essa opção não é aplicável para gráficos de linha e de área. Por exemplo, consulte Exemplo 1: Saída do gráfico na impressão e na Web.

Classe CSS (somente canal da Web) Especifique o nome de uma classe CSS no campo CSS class para aplicar estilo personalizado ao gráfico.

Quebra de página obrigatória antes (somente canal de impressão) Selecione para adicionar uma quebra de página obrigatória antes do gráfico e coloque o gráfico na parte superior de uma nova página.

Quebra de página obrigatória após (somente canal de impressão) Selecione para adicionar uma quebra de página obrigatória após o gráfico e coloque o conteúdo após o gráfico na parte superior de uma nova página.

Recuo (somente canal de impressão) Especifique o recuo do gráfico à esquerda da página.

Configurações específicas do gráfico Além de configurações comuns, a seguinte configuração específica do gráfico está disponível:

Usar funções no gráfico usefunction

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 do formulário.

Embora o componente Gráfico venha com algumas funções incorporadas, você pode gravar suas próprias funções e disponibilizá-las para uso na configuração do gráfico no canal da Web.

Funções padrão default-functions

As seguintes funções estão disponíveis por padrão com o componente Gráfico :

Média (Média) Retorna a média dos valores no eixo X ou Y para um determinado valor no outro eixo.

Soma Retorna a soma de todos os valores no eixo X ou Y para 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 em 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 a maioria das ocorrências no eixo X ou Y para um determinado valor no outro eixo

Funções personalizadas no canal da Web custom-functions-in-web-channel

Além de usar as funções padrão em gráficos, você pode gravar funções personalizadas no JavaScript™ e disponibilizá-las na lista de funções no componente Gráfico do canal da Web.

Uma função pega 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 gravar uma função personalizada, faça o seguinte para disponibilizá-la para uso na configuração do gráfico:

A função agora está disponível para uso no Gráfico.