Visão Geral
Neste tópico, vou mostrar uma maneira de inteceptar o evento “Click” na série de um gráfico da biblioteca amCharts v3.
Este exemplo foi projetado para ser usado no Formulário do Latromi.
Tecnologias utilizadas:
- SQL
- JavaScript
Definição do Gráfico
Você pode explorar os diferentes tipos de gráficos e configurações na página de demonstração do amCharts v3:
Para este exemplo, usaremos o gráfico de barras.
A estrutura abaixo será usada para montar o gráfico:
{
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column_1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column_2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": ""
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"listeners": [
{
"event": "init",
"method": "onChartInit"
}
],
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1,
"listeners": [
{
"event": "changed",
"method": "onChartCursorPositionChanged"
}
]
},
"dataProvider": [
{
"category": "category 1",
"column_1": 8,
"column_2": 5
},
{
"category": "category 2",
"column_1": 6,
"column_2": 7
},
{
"category": "category 3",
"column_1": 2,
"column_2": 3
}
]
}
Essa é uma estrutura padrão obtida dos exemplos fornecidos pelo amCharts. As únicas propriedades que foram adicionadas foram listeners e chartCursors, que são responsáveis pela manipulação de eventos do gráfico:
// ....
"listeners": [
{
"event": "init",
"method": "onChartInit"
}
],
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1,
"listeners": [
{
"event": "changed",
"method": "onChartCursorPositionChanged"
}
]
}
// ....
Formulário
O Formulário deste exemplo, terá apenas dois campos:
-
elmChart - Campo do tipo HTMLElement onde o gráfico será hospedado.
-
btnChartItem - Botão oculto que será usado como receptor do evento “Click” do gráfico. Quando o usuário clicar no gráfico, o evento “Click” do botão será disparado, recebendo as informações da série clicada.
Configurações do Formulário
Nas configurações do Formulário, adicione a classe CSS “amcharts-container”. Essa classe será usada para identificar o Formulário onde o gráfico será montado.
Comando SQL
No evento “Load” do Formulário, adicione uma ação do tipo “Criar Record”, e escreva um comando SQL capaz de retornar a seguinte estrutura:
<div style="width:100%;height:100%" class="chartplace">
<script type="application/json">
// JSON com as configurações do gráfico aqui
</script>
</div>
Neste exemplo, estaremos usando o banco de dados PostgreSQL para isso:
WITh amcharts_settings AS (
SELECT
'{
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column_1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column_2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": ""
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"listeners": [
{
"event": "init",
"method": "onChartInit"
}
],
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1,
"listeners": [
{
"event": "changed",
"method": "onChartCursorPositionChanged"
}
]
},
"dataProvider": [
{
"category": "category 1",
"column_1": 8,
"column_2": 5
},
{
"category": "category 2",
"column_1": 6,
"column_2": 7
},
{
"category": "category 3",
"column_1": 2,
"column_2": 3
}
]
}' AS json
)
SELECT
'<div style="width:100%;height:100%" class="chartplace">'||E'\r\n'
|| '<script type="application/json">'||E'\r\n'
|| json ||E'\r\n'
|| '</script>'||E'\r\n'
'</div>' AS html
FROM amcharts_settings
Agora, adicione uma ação do tipo “Popular Campos e Variáveis”, e preencha o campo “elmChart” com o valor retornado no comando SQL.
Evento Click do Botão
Adicione um evento “Click” no botão “btnChartItem”, e adicione no procedimento os parâmetros referentes aos dados que você deseja receber quando clicar na série do gráfico.
Neste exemplo, estou adicionando todas as propriedades e exibindo o valor delas em uma mensagem:
Arquivos JavaScript
Por último, crie um arquivo JavaScript para o Formulário, e informe o script abaixo:
const myForm = (function () {
// Adiciona Callbacks no Formulário
latromi.formManager.setOnFormCreatedCallback(onFormCreated);
latromi.formManager.setOnEventFiringCallback(onEventFiring);
latromi.formManager.setOnFieldValueChangedCallback(onFieldValueChanged);
// Ocorre logo após o form ser inicializado
function onFormCreated(ev) {
latromi.extensions.loadScripts(['https://static.latromi.com.br/adapters/amcharts.configurator-1.0.js'], amChartsInit);
}
// Ocorre quando um evento é disparado no Form
function onEventFiring(ev) { }
// Ocorre quando o valor de um campo é alterado no Form
function onFieldValueChanged(ev) { }
// Bibliotecas amCharts carregadas
function amChartsInit() {
// AmCharts: https://www.amcharts.com
var amChartsConfig = new amChartsConfigurator({
containerCssClass: 'amcharts-container',
chartCssClass: 'chartplace',
drawInterval: 100
});
amChartsConfig.load();
}
// ■■■ Adicionado ■■■
// Ocorre quando o usuário clica em uma série.
// Os dados referentes a serie são recebidos no argumento "dataItem"
function onChartSerieClick(dataItem) {
console.log(dataItem);
// Obtém referencia do form
const form = latromi.formManager.getFormInstance();
// Dispara o evento do botão que vai receber os dados da série clicada
form.raiseFieldEvent('btnChartItem', 'Click', dataItem);
}
// 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 {
// ■■■ Adicionado ■■■
// Callback de inicialização do gráfico
onChartInit: function(ev) {
// Adiciona o evento "Click" no gráfico
ev.chart.chartDiv.addEventListener('click', function(clickEvent) {
// Se a posição da última série selecionada pelo usuário
// não estiver disponível, sai do processamento
if (isNaN(ev.chart.lastCursorPosition)) return;
// Chama a função que vai gerenciar o click em uma série do gráfico.
// Envia por parâmetro os dados referentes à série clicada.
onChartSerieClick(ev.chart.dataProvider[ev.chart.lastCursorPosition]);
});
},
// ■■■ Adicionado ■■■
// Callback de mudança na série selecionada do gráfico
onChartCursorPositionChanged: function(ev) {
// Armazena a posição da série selecionada pelo usuário
ev.chart.lastCursorPosition = ev.index;
},
}
})();
Observe que o código JavaScript é basicamente o mesmo gerado pelo Snippet:
Botão direito do Mouse → Adicionar Código → JavaScript para Formulário + AmCharts
Os pontos que foram adicionados, ou seja, que não foram gerados pelo Snippet, estão marcados dessa maneira no script:
// ■■■ Adicionado ■■■
Resultado
Implementando o Formulário desta maneira, quando você clicar em uma série do gráfico, o Click do botão será chamado recebendo os dados do gráfico:
