Olá, seja bem-vindo(a) ao procedimento que irá te auxiliar em possíveis dúvidas e na gestão dos conteúdos dos Widgets de Indicadores / KPI's / Gráficos.


Primeiramente, com estes Widgets, é possível realizar a exibição de dados em uma forma visual, com representação em gráficos. Abaixo, podemos identificar os respectivos Widgets deste pacote. Temos as opções:



ÍNDICE



Caminho dos widgets: Widgets grátis > Dashboard e Gráficos



























Ah, fique tranquilo com respeito a orientação ( Horizontal / Vertical ) dos Widgets, as funcionalidades de uma para o outra são iguais. Apenas o posicionamento das informações é diferente, para melhor leitura dos conteúdos de acordo com a posição de seu Monitor. Os widgets que possuem o sufixo "Responsivo", se adequam aos dois tipos de orientação, portando, pode usá-lo nos dois formatos de tela, horizontal e vertical.


Todas as imagens abaixo são meramente ilustrativas para auxiliar nas ilustrações e destaques do conteúdo escrito.

O conteúdo e cores são definidos para fins de demonstração dos respectivos Widgets



Gráfico geral:


Aba config


1) - Acesse as configurações do widget (configurações avançadas) e clique em "Config"



2) - Nos primeiros campos, preecha o titulo e subtitulo do seu grafico:



3) - Em seguida você irá configurar o tipo de abertura


Este conjunto de configurações, define como será a abertura/entrada do seu widget.


  • Shapes introdução - Caso esteja ativado, a animação de início terá shapes (formas geométricas) para fazer abertura e encerramento. Caso seja desativado, haverá animação de abertura, porém, sem shapes/formas.

    Exemplo de abertura/encerramento sem shape (Meramente ilustrativo):



  • Shapes introdução (seleção) - Uma vez ativado, você poderá selecionar 3 opções de formas para a abertura/encerramento:

    Redondo:Quadrado:Triangulo:


  • Introdução - Caso desabilite, não haverá nenhuma animação de abertura ou encerramento. O widget iniciará direto nas imagens selecionadas

    Exemplo:


3) - Na sequência, configure as cores do seu widget:


4) - Por último nesta aba, configure as opções da animação:




Aba CHARTS CONFIG



1) - Na sequência temos o "Chats config" 

Nesta aba temos algumas configurações visuais do gráfico, por exemplo a cor das linhas do gráfico. 


Configure de acordo com as cores da sua empresa.


Também temos a opção de mostrar as labels, o eixo X e Y, escala, etc;



Aba DATASETS CONFIG



1) - A proxima aba é a "Datasets config". Nesta aba você irá configurar o tipo de gráfico e outras variações relacionadas ao estilo do gráfico que ira montar.


Este widget pode exibir até 4 gráficos de uma vez, portanto, nesta aba aparecerá 4 conjuntos de configuração, cada um destinado a um dos 4 possiveis gréficos.


Obs: Caso queira mostrar apenas 1 gráfico, basta não precher as demais páginas.


Exemplo de 4 graficos preenchidos:


Cada conjunto terá as seguintes configurações:

Opções:


  • Titulo =  Nome do gráfico
  • Tipo = Estilo do grafico (linha, barra, circulo, pizza e rosca)
  • Orientação (Apenas grafico de barra) = Orientação do grafico
  • Cor = Cor do texto principal
  • Borda = Largura do desenho
  • Preencher = Determina se o desenho fica vazado com preenchido
  • Range de escala = determina se o valor maximo e minimo do gráfico é predefinido ou variavel de acordo com os dados. É possivel escolher a predefinição
  • Valor = Valor total aquele grafico (para automatizar, basta marcar a caixinha para usar o último valor do grafico)
  • Valores de referencia = procentagem de crescimento e queda do grafico (manual)
  • Cor acima e cor abaixo = Cores dos valores que não atigiem o limite máximo e minimo.




Aba DATASETS 1, 2, 3 E 4



1) - Por último, temos os "Dataset 1, 2, 3 e 4" 


Nessas abas voce irá inserir os dados dos graficos. Cada Dataset 1 é responsável por alimentar um gráfico, ou seja, como mencionamos antes, caso não queria usar os 4 de uma vez, basta deixa-los em branco, preenchendo somente a quantidade de graficos que deseja que apareça silmultaneamente na tela.



2) - Em cada Dataset, você terá este menu para adicionar itens, cada item é um valor no gráfico:

Obs: Cuidado, ao remover todos, você apagará todos os itens, de todos os dataset.



3) - Na página em si, ao adicionar um item, temos que preencher apenas 2 itens, o rótulo e o valor relacionado. Segue um exemplo:



4) - Também é possível adicionar esses dados via planilha, basta criar uma planilha com duas colunas, sendo elas Rótulo e Valor. Você pode inseri os dados desejados nesta planilha e clicar no botão "Importação do Excell"


Pronto! Agora basta acompanhar o preview do lado esquerdo. No meu caso, ficou desta forma:







Indicadores:



Aba config


Acesse as configurações do widget (configurações avançadas) e clique em "Config"


1) - Primeiro você irá configurar o tipo de abertura


Este conjunto de configurações, define como será a abertura/entrada do seu widget.


  • Shapes introdução - Caso esteja ativado, a animação de início terá shapes (formas geométricas) para fazer abertura e encerramento. Caso seja desativado, haverá animação de abertura, porém, sem shapes/formas.

    Exemplo de abertura/encerramento sem shape (Meramente ilustrativo):



  • Shapes introdução (seleção) - Uma vez ativado, você poderá selecionar 3 opções de formas para a abertura/encerramento:

    Redondo:Quadrado:Triangulo:


  • Introdução - Caso desabilite, não haverá nenhuma animação de abertura ou encerramento. O widget iniciará direto nas imagens selecionadas

    Exemplo:



2) - Na sequência persoanlize as cores do seu widget



3) - Depois escolha a linguagem do texto de abertura:




Aba configuração de indicadores



1) - Na sequência temos a aba "Indicators config ou Configuração de indicadores", onde será ajustado a aparência do indicador em si. Temos as seguintes opções:



Ajuste dos modelos de indicador:


Nestes campos você irá configurar alguns ajustes de animações dos indicadores. Temos algumas variações de indicadores, então você pode ajustar coisas como angulo da animação, ativar ou não o ponteiro, etc. Os ajustes são opcionais, portanto, você pode ir ajustando para ver o resultado.





Aba indicadores



1) - A próxima aba é a "Indicators". Nesta aba vamos configurar os dados do indicador. Lembrando que é possível inserir vários indicadores, pois o widget trabalha com itens, possibilitando criar vários itens e geri-los, basta usar as opções no topo do menu:


opções do item:

  • Tipo = Estilo do indicador. Temos as opções:
    Gauge (medidor)
    Card (Cartão)
    Bullet ("Bala")
    Semaphore (semáforo)

  • Rótulo = nome do indicador

  • Valores:

    Valor = Valor atual do indicador
    Valor Mínimo e Máximo = Determina o início e fim do indicador
    Valor vermelho = Onde começa a marcação vermelha do indicador
    Valor amarelo = Onde começa a marcação amarela do indicador
    Valor verde = Onde começa a marcação verde do indicador 
     
  • Unidade = Unidade de medida do valor ($,%,etc)

Os valores do exemplo mostrar o seguinte indicador:



OBS: Lembre-se: após cada alteração, se não precisar efetivar ainda, mas gostaria de pre-visualizar o resultado, basta clicar no botão "Preview", localizado na área inferior do formulário. Mas, se já terminou as edições que gostaria de realizar, é só clicar no botão "Save" à esquerda de "Preview".




O que achou? Estes Widgets de cortesia te auxiliaram no que precisava?

Em caso de quaisquer dúvidas, saiba que sempre pode contar conosco! :)


Nós estamos disponíveis através do nosso e-mail suporte@b2midia.com.br