Como personalizar visualizações usando o editor de configuração de gráficos

Você pode usar o editor de configuração de gráficos para personalizar as opções de formatação nas visualizações do Looker que usam a API HighCharts. Isso inclui a maioria dos gráficos cartesianos, como o gráfico de colunas, o gráfico de barras e o gráfico de linhas, entre outros.

Pré-requisitos

Para acessar o editor de configuração de gráficos, você precisa ter a permissão can_override_vis_config.

Personalizar uma visualização

Para personalizar uma visualização com o editor de configuração de gráficos, siga estas etapas:

  1. Acessar uma visualização em uma Análise ou editar uma visualização em um Look ou painel.
  2. Abra o menu Editar na visualização.

  3. Clique no botão Edit Chart Config na guia Plot. O Looker mostra a caixa de diálogo Edit Chart Config.

    • O painel Configuração do gráfico (origem) contém o JSON original da sua visualização e não pode ser editado.

    • O painel Configuração do gráfico (substituir) contém o JSON que vai substituir o JSON de origem. Quando você abre a caixa de diálogo Edit Chart Config pela primeira vez, o Looker preenche o painel com um JSON padrão. Você pode começar com esse JSON ou excluí-lo e inserir qualquer JSON válido do HighCharts.

  4. Selecione a seção Configuração do gráfico (substituir) e insira um JSON válido do HighCharts. Os novos valores vão substituir todos os valores na seção Configuração do gráfico (origem).

    • Consulte a seção Exemplos deste artigo para conferir exemplos de JSON válido do HighCharts.
    • O Looker aceita qualquer valor JSON válido. O Looker não aceita funções, datas ou valores indefinidos.

  5. Clique em <> (Format code) para permitir que o Looker formate seu JSON corretamente.

  6. Clique em Visualizar para testar as mudanças.

  7. Clique em Aplicar para aplicar as mudanças. A visualização será mostrada usando os valores JSON personalizados.

Depois de personalizar a visualização, você pode salvá-la. Se você acessou a visualização em uma análise detalhada, salve a análise detalhada. Se você tiver editado um visual ou um painel, clique em Salvar.

Se você tentar visualizar um código com JSON inválido, o Looker vai mostrar uma mensagem de erro Invalid JSON detected . É possível limpar JSONs inválidos usando a opção Código de correção automática na parte de baixo do painel Configuração do gráfico (substituir).

Se você quiser editar as opções de visualização padrão, primeiro remova as alterações feitas no editor de configuração de gráficos e substitua-as mais tarde. Siga estas etapas:

  1. Clique no botão Edit Chart Config na guia Plot. O Looker mostra a caixa de diálogo Edit Chart Config.
  2. Copie o texto no painel Configuração do gráfico (substituir).
  3. Clique no botão Clear Chart Overrides para excluir todas as mudanças.
  4. Clique em Aplicar.
  5. Edite sua visualização usando as opções padrão.
  6. Clique no botão Edit Chart Config na guia Plot. O Looker mostra a caixa de diálogo Edit Chart Config.
  7. Insira um JSON válido do HighCharts no painel Configuração do gráfico (substituir). Você pode usar o texto copiado na etapa 2 como modelo, mas não se esqueça de testar as mudanças usando o botão Visualizar para garantir que não haja conflitos.
  8. Clique em Aplicar.

Formatação condicional com series formatters

O editor de configuração do gráfico aceita a maioria dos JSONs válidos do HighCharts. Ele também aceita o atributo series formatters, que só existe no Looker. Cada série pode ter vários formatadores para combinar regras de estilo diferentes.

O atributo series formatters aceita dois atributos: select e style.

  • Insira uma expressão lógica no atributo select para indicar quais valores de dados serão formatados.
  • Insira um JSON no atributo style para indicar como formatar os valores de dados.

Por exemplo, o JSON a seguir vai colorir cada valor de dados em laranja se for maior ou igual a 380:

{
  series: [{
    formatters: [{
      select: 'va>lue = 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

As seções a seguir descrevem os possíveis valores dos atributos select e style em mais detalhes.

O atributo select

É possível usar os seguintes valores em uma expressão select:

  • value: essa variável retorna o valor da série. Você pode usar esse valor em comparações, como nos exemplos a seguir:
  • max: use select: max para segmentar o valor da série que tem o valor máximo.
  • min: use select: min para segmentar o valor da série que tem o valor mínimo.
  • percent_rank: essa variável tem como alvo o valor da série com um percentil especificado. Por exemplo, é possível usar select: percent_rank >= 0.9 para segmentar valores de série no percentil 90.
  • name: essa variável retorna o valor da dimensão da série. Por exemplo, se você tiver um gráfico mostrando pedidos "Vendidos", "Cancelados" e "Devolvidos", use select: name = Sold para segmentar a série em que o valor da dimensão é "Vendido".
  • AND/OR Use AND e OR para combinar várias expressões lógicas.

Para conferir essas expressões implementadas no editor de configuração de gráficos, consulte o exemplo Colorir os valores máximos, mínimos e percentuais.

O atributo style

O atributo style pode ser usado para aplicar estilos compatíveis com o HighCharts. Por exemplo, é possível colorir os valores da série usando style.color, as bordas da série usando style.borderColor e definir a largura da borda da série usando style.borderWidth. Para conferir uma lista mais completa de opções de estilo, consulte as opções do Highcharts para series.column.data.

Para visualizações de linhas, use style.marker.fillColor e style.marker.lineColor em vez de style.color. Para conferir uma lista mais completa de opções de estilo de linha, consulte as opções do Highcharts para series.line.data.marker.

Para conferir a formatação de cores implementada no editor de configuração de gráficos, consulte o exemplo Colorir os valores máximos, mínimos e percentuais.

Examples

As seções a seguir apresentam exemplos de alguns casos de uso comuns do editor de configuração de gráficos. Para conferir uma lista completa dos atributos que podem ser editados, consulte a documentação da API HighCharts.

Mudar a cor do plano de fundo e do texto da linha

Para mudar a cor de fundo de uma visualização, use o atributo chart.backgroundColor.

Da mesma forma, para mudar a cor do texto dos eixos em uma visualização, use os seguintes atributos:

O JSON do HighCharts a seguir muda a cor de fundo da visualização para roxo e o texto dos títulos e rótulos do eixo para branco.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Personalizar a cor da dica

Para personalizar a cor da dica, use os seguintes atributos:

O JSON do HighCharts a seguir muda a cor de fundo da dica para ciano e a cor do texto da dica para preto.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Personalizar o conteúdo e os estilos da dica

Para personalizar o conteúdo da dica, use os seguintes atributos:

O JSON do HighCharts a seguir muda o formato da dica de ferramenta para que o valor do eixo x apareça na parte de cima da dica de ferramenta em uma fonte maior, seguido por uma lista de todos os valores da série nesse ponto.

Este exemplo usa as seguintes funções e variáveis do HighCharts:

  • {key} é uma variável que retorna o valor do eixo x do ponto selecionado. (neste exemplo, o mês e o ano).
  • {#each points}{/each} é uma função que repete o código fechado para cada série no gráfico.
  • {series.name} é uma variável que retorna o nome da série.
  • {y:.2f} é uma variável que retorna o valor do eixo y do ponto selecionado, arredondado para duas casas decimais. 
{
  tooltip: {
    format: &<#39;span style="font-siz>e: 1.<8em&q><uot>{;{key}/spanbr</#each points}span style="color:{color}; >font-weight: bold;&quo<t;\u2>5CF {se<rie>s.name}: /span{y:.2f}br/{/each}9;,
    shared: true
  },
}

Adicionar anotações e legendas a gráficos

Para adicionar uma anotação, use o atributo annotations. Para adicionar uma legenda ao gráfico, use o atributo caption.

Para conferir as coordenadas de um ponto, clique em Inspecionar metadados do ponto na parte de cima da caixa de diálogo Editar configuração do gráfico. Em seguida, mantenha o ponteiro sobre o ponto de dados que você quer anotar. O Looker mostra um ID de ponto, que pode ser usado no atributo annotations.labels.point.

O JSON do HighCharts a seguir adiciona duas anotações ao gráfico para explicar uma diminuição nos itens de inventário após determinados períodos. Ele também adiciona uma legenda na parte de baixo do gráfico para explicar as anotações com mais detalhes.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Adicionar bandas de referência verticais

Para adicionar uma banda de referência vertical, use o atributo xAxis.plotBands.

O JSON do HighCharts a seguir adiciona uma faixa de referência vertical entre 24 de novembro de 2022 e 29 de novembro de 2022 para indicar um período de venda. Ele também adiciona uma legenda na parte de baixo do gráfico para explicar o significado da faixa.

Os atributos to e from de xAxis.plotBands precisam corresponder aos valores de dados no gráfico. Neste exemplo, como os dados são baseados em tempo, os atributos aceitam valores de carimbo de data/hora do Unix (1669680000000 para 29 de novembro de 2022 e 1669248000000 para 24 de novembro de 2022). Formatos de data baseados em string, como MM/DD/YYYY e DD-MM-YY, não são aceitos nos atributos to e from do HighCharts.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Adicionar linhas pontilhadas e tracejadas

Para mudar linhas sólidas para linhas pontilhadas ou tracejadas, use o atributo series.dashStyle.

O JSON do HighCharts a seguir muda o atributo dashStyle da série Customers para uma linha pontilhada e o atributo dashStyle da série Sales para uma linha pontilhada.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

Colorir os valores máximo, mínimo e percentil

Consulte a página Como aproveitar ao máximo as visualizações do Looker: personalização da formatação condicional em gráficos cartesianos para conferir um exemplo detalhado sobre como colorir os valores máximos, mínimos e percentuais de uma visualização cartesiana.

Série de cores em comparação com outros valores de série

A partir do Looker 25.0, o parâmetro formatters.select oferece suporte à comparação do valor de dados atual com valores de outras séries.

Por exemplo, considere uma visualização que mostra o preço médio e mediano de venda para várias cidades. O JSON do HighCharts a seguir muda a cor do preço médio da venda para verde quando é maior ou igual ao preço médio da venda. Caso contrário, a cor muda para marrom:

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select:> 'value = order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },<
      {
        select: 'value  order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

Comparar os valores da série com o valor médio

A partir do Looker 25.0, o parâmetro formatters.select é compatível com a palavra-chave mean. Essas palavras-chave permitem comparar o valor dos dados atuais com a média aritmética da série.

Por exemplo, considere uma visualização que mostra o lucro do pedido em cada mês do ano passado. O JSON do HighCharts a seguir muda a cor de cada barra para cinza (representada pelo código hexadecimal #aaa) se o lucro do pedido for menor do que o lucro médio do pedido:

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select:< 'value  mean',
      style: {
        color: '#aaa';
      }
    }]
  }]
}

Criar novos tipos de visualização

Você pode usar o editor de configuração de gráficos para criar tipos de visualização que não estão incluídos nos tipos de visualização padrão do Looker. Os artigos a seguir fornecem exemplos de algumas das visualizações que você pode criar com o editor de configuração de gráficos: