Os gráficos do PlugDash recebem os dados que devem ser exibidos e, a partir deles, é gerada a visualização dinamicamente.

 

Para que esse fluxo funcione corretamente, cada gráfico do PlugDash utiliza um formato padrão de dados para que os gráficos consigam ser gerados da forma correta.

 

Gráfico de Progresso

Esse gráfico espera um registro com as seguintes colunas: atual e maximo.

 

Por exemplo:

select 75 as atual, 100 as maximo

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de barra horizontal

Esse gráfico espera um ou mais registros com a seguintes colunas: label e value.

 

Por exemplo:

SELECT 'Comercial' label, 88 value UNION ALL
SELECT 'Financeiro' label, 81 value UNION ALL
SELECT 'Desenvolvimento' label, 95 value

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de lista com avatar

Esse gráfico espera um ou mais registros com as seguintes colunas: nome, descricao, info, mascara, foto e valor.

 

Por exemplo:

SELECT
 'Fábio Rogério SJ' nome,
 'Vendedor' descricao,
 'atingido' info,
 '%' mascara,
 'http://placehold.it/200x200/009688/ffffff?text=FABIO' foto,
 92 valor
UNION ALL
SELECT
 'William' nome,
 'Vendedor' descricao,
 'atingido' info,
 '%' mascara,
 'http://placehold.it/200x200/123456/ffffff?text=WILLIAM' foto,
 94 valor
UNION ALL
SELECT
 'Fernando' nome,
 'Desenvolvedor' descricao,
 'atingido' info,
 '%' mascara,
 'http://placehold.it/200x200/954789/ffffff?text=FERNANDO' foto,
 78 valor

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de lista

Esse gráfico espera um ou mais registros com as seguintes colunas: nome, descricao, infoe valor.

 

Por exemplo:

SELECT
 'iPhone 6S 64GB Cinza Espacial' as nome,
 'Celulares e Smartphones' as descricao,
 '564 UN' as info,
 48764 as valor
UNION ALL
SELECT
 'Asus Live G500 HDTV Dual 16GB Preto' as nome,
 'Celulares e Smartphones' as descricao,
 '198 UN' as info,
 16443 as valor
UNION ALL
SELECT
 'LG G4 Single 4G H815P Couro Marrom' as nome,
 'Celulares e Smartphones' as descricao,
 '143 UN' as info,
 14443 as valor

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de barra vertical

Esse gráfico espera um ou mais registros com as seguintes colunas: label, bar e value.

 

Por exemplo:

SELECT
 'Faturados' as label,
 '01/jan' as bar,
 3800.55 as value
UNION ALL
SELECT
 'Faturados' as label,
 '02/jan' as bar,
 5200 as value
UNION ALL
SELECT
 'Faturados' as label,
 '03/jan' as bar,
 4800.66 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '01/jan' as bar,
 8800.55 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '02/jan' as bar,
 8200 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '03/jan' as bar,
 7800.66 as value

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de linha

Esse gráfico espera um ou mais registros com os seguintes campos: label, bar e value.

 

Por exemplo:

SELECT
 'Faturados' as label,
 '01/jan' as bar,
 3800.55 as value
UNION ALL
SELECT
 'Faturados' as label,
 '02/jan' as bar,
 5200 as value
UNION ALL
SELECT
 'Faturados' as label,
 '03/jan' as bar,
 4800.66 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '01/jan' as bar,
 8800.55 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '02/jan' as bar,
 8200 as value
UNION ALL
SELECT
 'Emitidos' as label,
 '03/jan' as bar,
 7800.66 as value

 

O SELECT acima gera o gráfico a seguir:

 

 

Gráfico de pizza e rosquinha

Esses gráficos esperam um ou mais registros com as seguintes colunas: label e value.

 

Por exemplo:

SELECT
 'Janeiro' as label,
 87 as value
UNION ALL
SELECT
 'Fevereiro' as label,
 79 as value
UNION ALL
SELECT
 'Março' as label,
 71 as value
UNION ALL
SELECT
 'Abril' as label,
 88 as value

 

O SELECT acima gera os gráficos a seguir:

 

 (Pizza)

 (Rosquinha)

 

Gráfico de informativo

Esse gráfico espera um registro com as seguintes colunas: value, image, icon e label.

 

Por exemplo:

SELECT
 'Gráfico sobre o comercial' value,
 'http://placehold.it/400/009688/ffffff?text=Imagem' image,
 'ion-stats-bars' icon,
 'Com base no mês atual' label

 

O SELECT acima gera os gráficos a seguir: