CTools, Dashboards

Pie Chart com valor no centro

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

pie_06

2 – Crie a a consulta que alimentara o gráfico. Para exemplificar criei um simples Json, mas qualquer fonte é valida.

pie_04

3 – Adicione o Pie chart e o seguinte código ao seu pre-execution :

pie_03

4 – O resultado deverá ser algo semelhante a este :

pie_05

5 – Be Happy!

 

O fonte desse exemplo pode ser encontrado aqui.

Anúncios
CTools, Dashboards, Pentaho

Customizando mensagens no Table Component

Para customizar mensagens no Table Component do CDE é bem simples, existe uma propriedade language feita exatamente pra isso,

Captura de Tela 2016-05-01 às 18.45.42

dai é bem tranquilo, basta colar a seguinte função

{
“emptyTable” : “Não há revisões para este veículo”,
“zeroRecords”: “Não há revisões para este veículo”,
“sProcessing”: “Processando…”,
“sLengthMenu”: “Mostrar _MENU_ registros”,
“sInfo”: “Mostrando _START_ a _END_ de _TOTAL_ Registros”,
“sInfoEmpty”: “Mostrando 0 a 0 de 0 Registros”,
“sInfoFiltered”: “(Filtrado de _MAX_ Registros)”,
“sInfoPostFix”: “”,
“sSearch”: “Buscar:”,
“sUrl”: “”,
“oPaginate”: {
“sFirst”: “Primero”,
“sPrevious”: “Anterior”,
“sNext”: “Próximo”,
“sLast”: “Último”
},
“aria”: {
“sortAscending”: “: clique para ordener coluna cresc.”,
“sortDescending”: “: clique para ordener coluna decresc.”
}

o resultado fica mais ou menos assim : 

Captura de Tela 2016-05-01 às 18.48.08

and be happy!

Referencia

https://datatables.net/reference/option/language

CTools, Dashboards, Pentaho

Criando um gráfico de ponteiro/velocímetro com CGG dial chart

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!