Visão geral Charts Builder

Neste tutorial, você descobrirá tudo sobre  a funcionalidade de gráficos dinâmicos  do  plugin JetEngine  . Com os Gráficos Dinâmicos, você pode obter dinamicamente os dados da Consulta criada anteriormente e exibi-los em belos gráficos, como  Barras, Linhas, Pizza, Geo, Histograma e muitos outros. 

módulo de gráficos dinâmicos ativado na seção de módulos externos

Habilite o módulo Dynamic Charts Builder em JetEngine > JetEngine > Modules > External Modules .

Depois disso, você precisa criar uma consulta com o Query Builder .

Abra o bloco Charts Builder no painel do JetEngine e vamos dar uma olhada em todas as configurações.

Configurações Gerais

  • Nome . Aqui você pode adicionar o nome do gráfico;
  • Consulta de dados . Neste campo, você precisa escolher a consulta que você criou anteriormente com o Query Builder. Não se preocupe se você não o criou. Sempre existe a oportunidade de criar uma nova consulta ou editar a existente; 
  • Busque os dados . Busque uma amostra dos dados para encontrar todas as colunas possíveis e visualizar a tabela.

configurações gerais do construtor de gráficos

Coisas para saber

A busca novamente de dados não funcionará com WooCommerce.

Tipo de Gráfico

Neste bloco você pode escolher o tipo de gráfico. Aqui você pode ver muitos gráficos incríveis, como Barra, Linha, Área, Torta, Donut, Colunas e muitos outros. No nosso caso, escolheremos o tipo de gráfico Colunas . 

tipos de gráficos dinâmicos

Colunas

Aqui você pode adicionar os dados necessários para o seu gráfico. Funcionará de forma semelhante aos metacampos.

Coisas para saber

A primeira coluna é usada para rótulos de grupos de gráficos. Todas as colunas a seguir são usadas para dados do gráfico.

  • Nome da coluna . O nome da coluna é exibido no cabeçalho da tabela;
  • Fonte de dados . Aqui você pode escolher entre duas opções – “Coluna buscada” e “Campo de postagem/termo/usuário/objeto”. No nosso caso, temos apenas a opção “Post/Term/User/Object Field” porque “Fetched Column” não funciona com WooCommerce;

fonte de dados para colunas do gráfico

  • Selecione Campo . Selecione um campo do objeto atual a ser mostrado nesta coluna. Adicionamos campos de título, preço e resenhas para mostrar a relação preço-demanda dos livros;

criando colunas nas configurações do construtor de gráficos

  • Tipo de dados . Converte os dados da coluna no tipo selecionado. Você pode escolher entre “Padrão”, “Garantir número” e “Garantir string”. No nosso caso, escolhemos “Garantir número”.

lista suspensa de tipo de dados na guia de colunas do construtor de gráficos

Você pode clicar no botão “ Recarregar visualização” para verificar as alterações.

visualização do gráfico

Coisas para saber

Para ver a visualização, você precisará definir a largura do gráfico na seção Estilos de gráfico.

Além disso, se quiser exibir menos produtos no gráfico, você sempre pode usar o limite do Query Builder. Anteriormente, criamos uma consulta de produto WC. Agora precisamos voltar a ele, abrir a seção Paginação , habilitar a opção de paginação e definir a quantidade necessária de produtos por página no campo Limite . Por exemplo, quero exibir apenas 6. 

guia de paginação de consulta de produto wc

Como resultado, veremos apenas seis produtos na visualização.

recurso de visualização de recarga no construtor de gráficos

Configuração do gráfico 

  • Lenda . Defina a posição da legenda do gráfico ou desative-a;
  • Opções avançadas . Esta alternância permite definir mais opções de configuração manualmente. Depois de ativar esta opção, o campo Definir opções avançadas aparecerá. Aqui você pode definir opções avançadas para o gráfico no formato JSON. Verifique a lista de opções permitidas para ver o que você pode adicionar. Adicionaremos o seguinte:
{
"backgroundColor":"#EEEEEE",
"backgroundColor.strokeWidth":"20",
"animation":{

"duration":"5000",
"easing": "linear",
"startup":"true"
}
}

definir seção de opções avançadas na guia de configuração do gráfico

Agora vamos verificar o resultado.

Sem a Opção Avançada, o gráfico não seria animado.

Estilos de gráfico

Neste módulo, você pode ajustar a largura e definir a altura do gráfico em pixels. 

guia de estilos de gráfico

Widget de gráfico dinâmico no Elementor

Existe a oportunidade de exibir o gráfico em qualquer página com um widget de gráfico dinâmico . Vá para a página necessária e clique no botão Editar com Elementor . Procure o widget Gráfico Dinâmico e adicione-o à página.

widget de gráfico dinâmico no Elementor

No campo Gráfico , você pode escolher o gráfico criado anteriormente. 

selecionando a fonte do gráfico dinâmico no Elementor

Bloco de gráfico dinâmico em Gutenberg

Você também pode adicionar o widget Gráfico Dinâmico em Gutenberg . Abra a página necessária, clique no ícone de adição e procure o widget Gráfico Dinâmico. 

habilitando o construtor de tabelas

Depois disso, você pode simplesmente adicionar o widget à seção necessária. Nas configurações do widget, você precisará escolher o gráfico que criou anteriormente.

construção de gráfico dinâmico em Gutenberg

Vamos dar uma olhada no gráfico na frente. 

Agora você sabe como usar o Chart Builder do plugin JetEngine para exibir dados com a ajuda de belos gráficos. 

Índice