Erro ao tentar colocar gráfico gauge

Suporte
1

Erros gerados:

gauge.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'Class')
    at gauge.js:1:49
    at gauge.js:10:507

Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at drawAmChart (9c9e58629f8a325604aae0c0ad1da33e.js:61:21)
    at HTMLDivElement.<anonymous> (9c9e58629f8a325604aae0c0ad1da33e.js:44:13)
    at i.each (vendor?v=kdGjmjDGb-qcRDkNvj9GlWHFWpW0b6Au1ijRGQPKhu01:1:16143)
    at i.each (vendor?v=kdGjmjDGb-qcRDkNvj9GlWHFWpW0b6Au1ijRGQPKhu01:1:14609)
    at 9c9e58629f8a325604aae0c0ad1da33e.js:43:25

Query:

WITH C1 AS 
(
select
    TO_CHAR(ROUND((d/c) * 100, 2), 'FM9999990.00') as pct
from (
SELECT
    sum(disponibilidade) as d,
    count(disponibilidade) as c
FROM 
    OEE_result
)

)

SELECT 

'<div class="drawChart" style="box-sizing:border-box;width:100%;height:250px">

<script src="https://www.amcharts.com/lib/3/gauge.js"></script>

    <script type="application/json">
            {
     "type": "gauge",
    "arrows": [
        {
            "id": "GaugeArrow-1",
            "value": '||pct||'
        }
    ],
    "axes": [
        {
            "bottomText": "TESTE",
            "bottomTextYOffset": -20,
            "endValue": 100,
            "id": "GaugeAxis-1",
            "valueInterval": 10,
            "bands": [
                {
                    "color": "#00CC00",
                    "endValue": 100,
                    "id": "GaugeBand-1",
                    "startValue": 45
                },
                {
                    "color": "#ffac29",
                    "endValue": 45,
                    "id": "GaugeBand-2",
                    "startValue": 20
                },
                {
                    "color": "#ea3838",
                    "endValue": 20,
                    "id": "GaugeBand-3",
                    "innerRadius": "98%",
                    "startValue": 0
                }
            ]
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [
        {
            "id": "Title-1",
            "size": 15,
            "text": "Speedometer"
        }
    ]
}    
    </script> </div>
' AS Charts 
FROM C1
2

Boa tarde, @Davi_Fernandes!

Que ótimo ter você com a gente! :waving_hand: Seja muito bem-vindo(a) à nossa comunidade!

Esperamos que o conteúdo e as discussões por aqui ajudem você a aproveitar ao máximo a plataforma. Se precisar de algo ou tiver qualquer dúvida, é só chamar! Estamos sempre por perto para ajudar no que for preciso.

Conte conosco para o que precisar!

Referente à mensagem apresentando, recomendamos a leitura do seguinte tópico para ajustar o formulário para a utilização do AmCharts:

Após a leitura do tópico, você poderá ajustar a query para ela configurar corretamente o AmCharts, utilizando as classes e a estrutura necessárias para a visualização do gráfico.

WITH C1 AS 
(
select
    TO_CHAR(ROUND((d/c) * 100, 2), 'FM9999990.00') as pct
from (
SELECT
    sum(disponibilidade) as d,
    count(disponibilidade) as c
FROM 
    OEE_result
)

)

SELECT 

'<div class="amcharts-container" style="box-sizing:border-box;width:100%;height:250px">
<div class="chartplace" style="width:100%;height:100%;">
    <script type="application/json">
            {
     "type": "gauge",
    "arrows": [
        {
            "id": "GaugeArrow-1",
            "value": '||pct||'
        }
    ],
    "axes": [
        {
            "bottomText": "TESTE",
            "bottomTextYOffset": -20,
            "endValue": 100,
            "id": "GaugeAxis-1",
            "valueInterval": 10,
            "bands": [
                {
                    "color": "#00CC00",
                    "endValue": 100,
                    "id": "GaugeBand-1",
                    "startValue": 45
                },
                {
                    "color": "#ffac29",
                    "endValue": 45,
                    "id": "GaugeBand-2",
                    "startValue": 20
                },
                {
                    "color": "#ea3838",
                    "endValue": 20,
                    "id": "GaugeBand-3",
                    "innerRadius": "98%",
                    "startValue": 0
                }
            ]
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [
        {
            "id": "Title-1",
            "size": 15,
            "text": "Speedometer"
        }
    ]
}    
    </script> </div> </div>
' AS Charts 
FROM C1
3

Boa tarde, Diego!

Agradeço pelo retorno!

No meu caso, estou utilizando uma consulta para gerar o gráfico. Inclusive, fiz alguns testes aqui com o uso do amCharts diretamente na consulta e consegui criar gráficos dos tipos coluna e linha sem problemas.

No entanto, ao tentar utilizar o tipo gauge, o erro mencionado continua ocorrendo. Pesquisei exemplos de uso do amCharts com esse tipo de gráfico dentro da consulta, mas infelizmente não encontrei nenhum.

Você saberia me dizer se há alguma limitação específica para o tipo gauge nesse contexto?

4

@Davi_Fernandes bom dia,

Entendi melhor a necessidade, para usar o Gauge do AmCharts é necessário adicionar o seguinte script acima da importação do script gauge.js:

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>

Com isso o gauge.js irá identificar as dependências do AmCharts.

Para realizar a renderização dos gráficos nos objetos de consulta, você precisará utilizar o JavaScript público. O tópico abaixo aprofunda mais sobre como implementar o AmCharts em consultas:

Esperamos que essas orientações ajudem você a integrar os gráficos do AmCharts com sucesso!