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:


- Gráfico geral

- Indicadores

- Gráfico de Barras

- Gráfico de Linhas

- Gráfico de Pizza



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:


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



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



Na sequencia, configure as cores do seu widget:


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



2) - Na sequencia temos o "Chats config" 

Nesta aba temos algumas configurações visuais do grafico, por exemplo a cord das linhas do grefico. 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;




3) - 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 graficos de uma fez, portanto, nesta aba aparecerá 4 conjuntos de configuração, cada um destinado a um dos 4 possiveis graficos.


Obs: Você pode mostrar apenas 1 grafico, 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.



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


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

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


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:


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:



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


1) - As primeiras configurações que temos neste widget, está relacionada ao visual do widget, são elas: 



Text

  • Texto: Titulo do indicador
  • Legenda: Subtitulo do indicador




Colors

  • Principal = Cor principal da abertura
  • Fundo = Cor do background
  • Titulo = Cor do título
  • Legenda = Cor do subtitulo







 Animation

  • Animação de introdução = Ativar ou desativar a animação de abertura
  • Tempo de animação de introdução = Tempo de duração da abertura





2) - Na sequência temos a aba "Indicators config", onde será ajustado a aparência do indicador em si. Temos as seguintes opções:




Indicator color:

  • Principal = Cor principal
  • Fundo = Cor do background do indicador
  • Base = Cor da parte não preenchida pelo indicador
  • Texto = Cor do texto
  • Agulha = Cor do ponteiro




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.






3) - 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:




Gráfico de Barras:



Na gestão dos conteúdos, podemos verificar que é possível determinar as informações no respectivo formulário, acessível na seção "Slide advanced":




Na aba "Config" (Configurações gerais do Template):




  • O nome da editoria ao qual será exibido tanto na abertura do Template, quanto na região superior ao gráfico.







  • A descrição do gráfico, que também é presente na região superior do gráfico:






  • A caixa de seleção para determinar o posicionamento dos valores no respectivo Template:



[ No Gráfico ]
 [ Na Legenda ]




  • Determinação do Valor Total do Topo:



a) Para selecionar se o Total do Topo (valor máximo) será o Valor mais alto (dentre os itens/barras), ou se será definido de forma Manual. Caso selecionado como o Valor mais alto, o sistema automaticamente coletará o valor mais alto que encontrar entre as Barras criadas, para ser o ponto de referência.


b) Caso selecionada a opção "Manual", é possível determinar o valor total na caixa Total (Manual), que é referente ao valor máximo no Topo do gráfico.


  • Determinação do nome de até 3 Legendas que serão utilizadas para curta identificação do que se tratam as Barras

Se utilizarmos apenas uma barra por item (explicado adiante), será necessário apenas usar 1 Legenda, e assim por diante.



  • Determinação das cores básicas do Template:



  • Principal: corresponde à cor predominante do Template.
  • Detalhes: corresponde aos elementos que são representados por uma cor "secundária".
  • Texto: corresponde ao conteúdo escrito, geralmente denominado por "Descrição" no mesmo formulário.
  • Barra 1, 2 e 3: Cores que determinam o preenchimento de até 3 Barras para os itens, que podem ter até 3 Barras comparativas.


Na aba "Dados":



  • O nome de cada fatia.


  • O valor de cada Barra (Valor 1, 2 e 3).



OBS: Como podemos ver acima, cada item criado, permite ter até 3 Barras comparativas para o próprio item, que pode ser por exemplo, valores da quantidade de 3 diferentes produtos relacionados a um Mês exibido no gráfico.


IMPORTANTE: Este Template aceita de 1 à 12 itens no formulário de Dados para exibir seus conteúdos.




Gráfico de Linhas:



Na gestão dos conteúdos, podemos verificar que é possível determinar as informações no respectivo formulário, acessível na seção "Slide advanced":


 



Na aba "Config" (Configurações gerais do Template):



  • O nome da editoria ao qual será exibido tanto na abertura do Template, quanto na região superior ao gráfico.




  • A descrição do gráfico, que também é presente na região superior do gráfico:






  • A caixa de seleção para determinar o posicionamento dos valores no respectivo Template:



[ No Gráfico ]
 [ Na Legenda ]

OBS: Poderão haver ocasiões em que a leitura dos valores pode ser dificultada, devido à sobreposição de pontos ou linhas, nestas ocasiões recomendamos optar pela opção Na Legenda, evitando assim questões relacionadas à legibilidade dos dados.



  • Determinação do Valor Total do Topo:



a) Para selecionar se o Total do Topo (valor máximo) será o Valor mais alto (dentre os itens/barras), ou se será definido de forma Manual. Caso selecionado como o Valor mais alto, o sistema automaticamente coletará o valor mais alto que encontrar entre as Barras criadas, para ser o ponto de referência.




b) Caso selecionada a opção "Manual", é possível determinar o valor total na caixa Total (Manual), que é referente ao valor máximo no Topo do gráfico.



  • Determinação do nome de até 3 Legendas que serão utilizadas para curta identificação do que se tratam as Barras

Se utilizarmos apenas uma barra por item (explicado adiante), será necessário apenas usar 1 Legenda, e assim por diante.



  • Determinação das cores básicas do Template:



  • Principal: corresponde à cor predominante do Template.
  • Detalhes: corresponde aos elementos que são representados por uma cor "secundária".
  • Texto: corresponde ao conteúdo escrito, geralmente denominado por "Descrição" no mesmo formulário.
  • Linha 1, 2 e 3: Cores determinadas para até 3 Linhas, em cada item, que pode ter até 3 valores comparativos.


Na aba "Dados":


  • O nome de cada fatia.


  • O valor de cada Barra (Valor 1, 2 e 3).



OBS: Como podemos ver acima, cada item criado, permite ter até 3 Valores comparativos para o próprio item, que pode ser por exemplo, valores da quantidade de 3 diferentes produtos relacionados a um Mês exibido no gráfico.


IMPORTANTE: Este Template aceita de 1 à 12 itens no formulário de Dados para exibir seus conteúdos.



Gráfico de Pizza:



Na gestão dos conteúdos, podemos verificar que é possível determinar as informações no respectivo formulário, acessível na seção "Slide advanced":



Na aba "Config" (Configurações gerais do Template):



  • O nome da editoria ao qual será exibido tanto na abertura do Template, quanto na região superior ao gráfico.


 




  • A descrição do gráfico, que também é presente na região superior do gráfico:




  • A caixa de seleção para determinar o posicionamento dos valores no respectivo Template:



[ No Gráfico ]
 [ Na Legenda ]


OBS: Poderão haver ocasiões em que a leitura dos valores pode ser dificultada, devido à sobreposição (visual) de valores ou fatias muito pequenas, nestas ocasiões recomendamos optar pela opção Na Legenda, evitando assim questões relacionadas à legibilidade dos dados.


  • Determinação do Valor Total:



a) Para selecionar se o Total será a Soma dos itens (valores) de cada fatia, ou se será definido de forma Manual.




b) Exibir Total: Se o valor correspondente ao Total deve ou não ser exibido (Sim / Não).



[ Sim ]
[ Não ]




c) Caso selecionada a opção "Manual", é possível determinar o valor total na caixa Total (Manual).


OBS: Com este valor Total (Manual) preenchido, é possível determinar um valor total.

Caso a soma dos itens (valores preenchidos) for menor que o total, o Template automaticamente fará o cálculo do valor que ainda falta alcançar para completar "100%" e criará uma fatia em cinza para esta representação, sem que você precise se preocupar ( legal, né? ).





  • Determinação das cores básicas do Template:



  • Principal: corresponde à cor predominante do Template.
  • Detalhes: corresponde aos elementos que são representados por uma cor "secundária".
  • Texto: corresponde ao conteúdo escrito, geralmente denominado por "Descrição" no mesmo formulário.



Na aba "Dados":



  • O nome de cada fatia.


  • O valor de cada fatia.


  • A distância da fatia perante o centro do gráfico (opcional). Exemplo:


  • A cor de cada fatia.


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


IMPORTANTE: Este Template aceita de 1 à 10 itens no formulário de Dados para exibir seus conteúdos.


O que achou? Estes Templates 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 app, Meu Suporte (Clique aqui para acessar),

ou pelo e-mail suporte@b2midia.com.br