1 – Crie um novo dashboard, por questões didáticas usarei um Bootstrap panel na estrutura do painel.

Captura de Tela 2016-04-24 às 13.24.20
Layout modelo

2 – Crie a a consulta que alimentara o velocímetro. Para exemplificar criei um simples Json, mas qualquer fonte é valida.

Captura de Tela 2016-04-24 às 14.07.12
Datasource Json

3 – Crie o “Query Component” que será responsável por receber os parâmetros de seu gráfico(mes, ano, região, etc caso existam), passa-los ao datasource e retornar o valor a uma variavel(Result var). Mude o atributo “Priority” para 1 ou 2 pois a consulta devera ocorrer antes da renderizacao dos outros componentes que receberao o valor da variável ja alterada.

Captura de Tela 2016-04-24 às 14.43.30
Query Component – Atenção ao ‘Priority’

4 – Crie um parâmetro simples com o nome da variável resultante criada no “Query Component” e atribua o “Property Value” para ‘value’.

Captura de Tela 2016-04-24 às 14.47.30.png

5 – Crie o CGG Dial Chart, configure tamanho, array de corres e intervalos a seu gosto e faca-o receber e ‘escultar’  o parâmetro que criamos(‘valor’). O CGG so deve escutar estes valores pois os outros parâmetros ja são passados no ‘Query Component’.

Captura de Tela 2016-04-24 às 14.11.34

6 – Caso queira alterar o tamanho da fonte de valores basta inserir uma função jQuery no ‘Post Execution’.

Captura de Tela 2016-04-24 às 14.22.28

7 – O resultado devera ser algo semelhante a este

Captura de Tela 2016-04-24 às 14.35.54
Resultado final

8 – Be Happy!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s