amCharts - Criar link para um outro relatório

Suporte
, ,
1

Bom dia.

Eu tenho um gráfico que criei com amCharts. Existe alguma maneira de criar um link em que quando eu clico em uma das barras geradas pelo gráfico ele abre uma outra consulta baseado nos dados utilizados pelas mesma.

WITH q1 AS (
    SELECT
    CASE
        WHEN Mes = 1 THEN '1 - Jan'
        WHEN Mes = 2 THEN '2 - Fev'
        WHEN Mes = 3 THEN '3 - Mar'
        WHEN Mes = 4 THEN '4 - Abr'
        WHEN Mes = 5 THEN '5 - Mai'
        WHEN Mes = 6 THEN '6 - Jun'
        WHEN Mes = 7 THEN '7 - Jul'
        WHEN Mes = 8 THEN '8 - Ago'
        WHEN Mes = 9 THEN '9 - Set'
        WHEN Mes = 10 THEN '10 - Out'
        WHEN Mes = 11 THEN '11 - Nov'
        WHEN Mes = 12 THEN '12 - Dez'
    END AS Mes,
    SUM(Total) as Total,
    SUM(COALESCE(Atraso, 0)) as Atraso,
    SUM(COALESCE(Prazo, 0)) as Prazo
    FROM (
        SELECT
        Mes,
        COUNT(cte) as Total,
        CASE WHEN status = 'Atraso' THEN COUNT(cte) END as Atraso,
        CASE WHEN status = 'Prazo' OR status = 'Prazo RespCli' THEN COUNT(cte) END as Prazo
        FROM ltm_performance_entrega
        WHERE dtentrega >= now() - INTERVAL '6 months'
        GROUP BY status, Mes
    ) TAB
    GROUP BY 
    CASE
        WHEN Mes = 1 THEN '1 - Jan'
        WHEN Mes = 2 THEN '2 - Fev'
        WHEN Mes = 3 THEN '3 - Mar'
        WHEN Mes = 4 THEN '4 - Abr'
        WHEN Mes = 5 THEN '5 - Mai'
        WHEN Mes = 6 THEN '6 - Jun'
        WHEN Mes = 7 THEN '7 - Jul'
        WHEN Mes = 8 THEN '8 - Ago'
        WHEN Mes = 9 THEN '9 - Set'
        WHEN Mes = 10 THEN '10 - Out'
        WHEN Mes = 11 THEN '11 - Nov'
        WHEN Mes = 12 THEN '12 - Dez'
    END
),

q_max_total AS (
    SELECT MAX(Total) AS max_total FROM q1
),

q_json AS (
    SELECT '{
        "type": "serial",
        "categoryField": "Mes",
        "startDuration": 1,
        "creditsPosition": "bottom-right",
        "hideCredits": true,
        "categoryAxis": {
            "gridPosition": "start"
        },
        "graphs": [
            {
                "balloonText": "[[title]] em [[Mes]]:[[value]]",
                "fillAlphas": 1,
                "fillColors": "#FF0000",
                "id": "AmGraph-1",
                "title": "Atraso",
                "type": "column",
                "valueField": "Atraso",
                "labelText": "[[value]]"
                
            },
            {
                "balloonText": "[[title]] em [[Mes]]:[[value]]",
                "fillAlphas": 1,
                "fillColors": "#0000FF",
                "id": "AmGraph-2",
                "title": "Prazo",
                "type": "column",
                "valueField": "Prazo",
                "labelText": "[[value]]"
                
            },            
            {
                "balloonText": "[[title]] em [[Mes]]:[[value]]",
                "fillAlphas": 1,
                "fillColors": "#6CE01B",
                "id": "AmGraph-3",
                "title": "Total",
                "type": "column",
                "valueField": "Total",
                "labelText": "[[value]]"
                
            }
        ],
        "valueAxes": [
            {
                "id": "ValueAxis-1",
                "stackType": "none",
                "maximum": ' || (SELECT max_total FROM q_max_total) || ',
                "title": "Total"
            }
        ],
        "legend": {
            "enabled": true,
            "useGraphSettings": true
        },
        "dataProvider": [' ||
        ARRAY_TO_STRING(ARRAY(
            SELECT format('{"Mes": "%s", "Atraso": %s, "Prazo": %s,"Total": %s}', 
                          Mes, COALESCE(Atraso, 0), COALESCE(Prazo, 0), COALESCE(Total, 0))
            FROM q1
        ), ', ') ||
        ']
    }' AS jsondata
)

SELECT 
'<style>
  .amcharts-chart-div > a {
    display: none;
  }
</style>' || E'\r\n'
|| '<div class="drawChart" style="box-sizing:border-box;width:100%;height:310px;">' || E'\r\n'
|| E'\t<script type="application/json">\r\n'
|| jsondata
|| E'\r\n\t</script>\r\n'
|| '</div>'::VARCHAR AS htmlelement

FROM q_json
2

Boa tarde @JonasKRitter,

Para poder efetuar a adição de um evento que escute o clique em barras do gráfico será necessário adicionar as seguintes chaves na construção do JSON:

"chartCursor": {
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "listeners": [{
      "event": "changed",
      "method": "GetCursorPosition"
    }]
},
"listeners": [{
  "event": "init",
  "method": "InitListener"
}]

Após, adicione este conteúdo. Inclua no arquivo JS que interage com o AmCharts, as seguintes funções:

  • Para capturar onde o cursor está no gráfico:
function GetCursorPosition(ev) {
    ev.chart.lastCursorPosition = ev.index;
}
  • Adicionar o evento para escutar o clique e efetuar uma ação:
function InitListener(ev) {
    jQuery(ev.chart.chartDiv).on('click', function(e) {
        if (!isNaN(ev.chart.lastCursorPosition)) {
            new latromi.windowManager().openWindow({
                window: {
                    title: "Janela",
                    height: 600,
                    width: 800,
                    targetUpgradeCode: "FRM00000030900002420240905165836170305", // Código do formulário LATROMI
                    targetParameters: {
                        mes: {
                            value: ev.chart.dataProvider[ev.chart.lastCursorPosition].Mes
                        },
                        atraso: {
                            value: ev.chart.dataProvider[ev.chart.lastCursorPosition].Atraso
                        },
                        prazo: {
                            value: ev.chart.dataProvider[ev.chart.lastCursorPosition].Prazo
                        },
                        total: {
                            value: ev.chart.dataProvider[ev.chart.lastCursorPosition].Total
                        }
                    },
                    
                },
                options: { 
                    modal: true,
                    maximized: false 
                }
            });
        }
    });
}

Por fim, no retorno do JS adicione:

// Todas as funções acima são "privadas", e não podem ser chamadas externamente.
// As únicas funções que podem ser chamadas externamente são as que compões o resultado a seguir:
return {
    GetCursorPosition: function(e) { GetCursorPosition(e) },
    InitListener: function(e) { InitListener(e) }
}
1 curtida