Histórico da Página

...

Exemplo de chamada

ChartBuilder GaugeBuilder:setSize(450).

setType

Determina qual tipo de velocímetro será renderizado, podendo ser: 

...

Exemplo de chamada

ChartBuilderGaugeBuilder:setValue(85).

setMinValue

...

Exemplo de chamada

ChartBuilderGaugeBuilder:setMinValue(0).

setMaxValue

...

Exemplo de chamada

ChartBuilderGaugeBuilder:setMaxValue(200).

setLabel

...

Exemplo de chamada

ChartBuilderGaugeBuilder:setLabel("Label Exemplo").

setPrepend

Determina o texto que aparecerá na esquerda do label principal. Por exemplo, um $ para representar valores monetários.

Parâmetros

Exemplo de chamada

GaugeBuilder:setPrepend("R$").

setAppend

Determina o texto que aparecerá na direita do label principal. Por exemplo, um sinal de %, km, kg etc.

Parâmetros

Exemplo de chamada

GaugeBuilder:setAppend("KG").

setMargin

Atribui uma margem para o velocímetro, para afastá-lo das laterais do monitor.

Parâmetros

Exemplo de chamada

GaugeBuilder:setMargin(10).

setValueStyle

Permite estilizar a aparência do valor principal do velocímetro. Aceita os estilos existentes no HTML. Recebe a temp-table ttEstilos, onde cada registro equivale a uma propriedade:

Parâmetros

ttEstilos

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#28ba62". //Troca a cor do label do velocímetro para um verde claro.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-weight"
       ttEstilos.valor       = "bold". //Faz com que o label fique em negrito.


GaugeBuilder:setValueStyle(INPUT TABLE ttEstilos).

setPrependStyle

Permite estilizar a aparência do pré-texto que aparece do lado esquerdo do label principal. Aceita os estilos existentes no HTML. Também recebe a temp-table ttEstilos, de forma semelhante ao método setValueStyle.

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#eb445a". //Troca a cor do prepend do velocímetro para vermelho.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-style"
       ttEstilos.valor       = "italic". //Faz com que o prepend fique em itálico.


GaugeBuilder:setPrependStyle(INPUT TABLE ttEstilos).

setLabelStyle

Permite estilizar a aparência do texto que aparece abaixo do valor principal. Aceita os estilos existentes no HTML. Também recebe a temp-table ttEstilos, de forma semelhante ao método setValueStyle.

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#eda900". //Troca a cor do label para amarelo.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-style"
       ttEstilos.valor       = "italic". //Faz com que o label fique em itálico.


GaugeBuilder:setLabelStyle(INPUT TABLE ttEstilos).

setThresholds

Define as sessões ou segmentos que irão dividir o velocímetro. Recebe a TEMP-TABLE ttEstagios, definida abaixo:

Parâmetros

ttEstagios

Exemplo de chamada

CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 0
       ttEstagios.cor          = "#eb445a"
       ttEstagios.opacidade    = 0.2.              
    
CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 70
       ttEstagios.cor          = "#eda900"
       ttEstagios.opacidade    = 0.2.               

CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 85
       ttEstagios.cor          = "#28ba62"
       ttEstagios.opacidade    = 0.2.         

GaugeBuilder:setThresholds(INPUT TABLE ttEstagios).  

setMarkers

Recebe as definições de marcadores através da TEMP-TABLE ttMarcadores, que são pequenas setas indicadoras plotadas acima do velocímetro e que podem conter um texto adicional.

Parâmetros

ttMarcadores

Exemplo de chamada

{utp/ut-liter.i Baixo * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor   = 0
       ttMarcadores.cor     = "#eb445a"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(0) + ")". 
            
{utp/ut-liter.i Médio * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor    = 60
       ttMarcadores.

...

cor     = "#eda900"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(60) + ")".

{utp/ut-liter.i Alto * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor   = 85
       ttMarcadores.cor     = "#28ba62"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(85) + ")".   

GaugeBuilder:setMarkers(INPUT TABLE ttMarcadores).    

Exemplos de velocímetros utilizando marcadores do tipo linha e triângulo, juntamente com estágios diferentes:

Image AddedImage Added

createGauge

Método que transforma todos os dados das temp-tables ttSeries, ttCategorias e ttTags demais propriedades em um objeto JSON, já formatado seguindo o padrão utilizado pelo painel do Gestão à Vista. Esse JSON deverá ser retornado pela API de negócio para ser processado e apresentado ao usuário final. Só deve ser invocado depois que os dados do gráfico tenham sido carregados através dos métodos setSeriessetValue, setCategories setLabel etc.

Parâmetros

...

PROCEDURE pi-get-monitor-data-chart:
    DEFINE INPUT  PARAMETER TABLE FOR ttVisaoMonitor.
    DEFINE OUTPUT PARAMETER oOutput AS JsonObject.   
    DEFINE OUTPUT PARAMETER TABLE FOR RowErrors.    

    <...Criação das temp-tables, chamada dos métodos de set...>

    oOutput = ChartBuilderGaugeBuilder:createChartcreateGauge(). 

END PROCEDURE.