Os gráficos em 4D Ajax Framework v11 Release 5 ganham nova vida com novas cores, novos tipos interatividade e mais comandos para personalizar a aparência.
Um gráfico dashboard é criado a partir do painel de controle. A chave para ativar a funcionalidade de gráficos é marcar a caixa de seleção "Use Chart" no editor de Dashboards
Neste exemplo criamos 4 Dashboards chamados 4DAF_BarChart, 4DAF_DotChart, 4DAF_LineChart e 4DAF_PieChart. No banco de dados cada gráfico dashboard será gerado desde o método DAX_DevHook_DefineChart mostrado a seguir:
: ($ReportName_t="4DAF_BarChart") | ($ReportName_t="4DAF_LineChart")
C_REAL($minYvalue_r;$maxYvalue_r)
ARRAY TEXT(xlabel_at;8) `*** Label on X-Axis (Must use process_array_variable - TEXT)
ARRAY TEXT(ylabel_at;8) `*** Label on Y-Axis (Must use process_array_variable - TEXT)
ARRAY REAL(value_ar;20) `*** Trend values (Must use process_array_variable - REAL)
ARRAY STRING(40;$label_at;0)
ARRAY REAL($value_ar;0)
ALL RECORDS([Department])
ORDER BY([Department];[Department]Name;>)
For ($i;1;
Records in selection([Department]))
If ($i<=8)
RELATE MANY([Department]ID)
APPEND TO ARRAY($value_ar;
Records in selection([Doctor]))
End if
NEXT RECORD([Department])
End for
COPY ARRAY($value_ar;value_ar)
DAX_Dev_SetDashboardChart (->xlabel_at;->ylabel_at;->value_ar;$minYvalue_r;$maxYvalue_r)
Nota:
Os valores reais não tem que ser passados nos arrays x e y porque os gráficos de barras não admitem etiquetas e os gráficos de linhas geram seus próprios valores x e y na interface.
: ($ReportName_t="4DAF_DotChart")
C_REAL($minYvalue_r;$maxYvalue_r)
ARRAY TEXT(xlabel_at;8) `*** Label on X-Axis (Must use process_array_variable - TEXT)
ARRAY TEXT(ylabel_at;8) `*** Label on Y-Axis (Must use process_array_variable - TEXT)
ARRAY REAL(value_ar;20) `*** Trend values (Must use process_array_variable - REAL)
ARRAY STRING(40;$label_at;0)
ARRAY REAL($value_ar;0)
xlabel_at{1}:="A & C"
xlabel_at{2}:="Cardiology"
xlabel_at{3}:="Pharma"
xlabel_at{4}:="Internal Med"
xlabel_at{5}:="Hematology"
xlabel_at{6}:="Immunology"
xlabel_at{7}:="Infectious"
xlabel_at{8}:="Crit Care"
ALL RECORDS([Department])
ORDER BY([Department];[Department]Name;>)
For ($i;1;
Records in selection([Department]))
If ($i<=8)
RELATE MANY([Department]ID)
APPEND TO ARRAY($value_ar;
Records in selection([Doctor]))
End if
NEXT RECORD([Department])
End for
COPY ARRAY($value_ar;value_ar)
DAX_Dev_SetDashboardChart (->xlabel_at;->ylabel_at;->value_ar;$minYvalue_r;$maxYvalue_r)
Nota:
Os gráficos de pontos admitem etiquetas (array x), mas são truncados porque se orientam de maneira horizontal e estão em uma linha.
: ($ReportName_t="4DAF_BarChart") | ($ReportName_t="4DAF_LineChart")
C_REAL($minYvalue_r;$maxYvalue_r)
ARRAY TEXT(xlabel_at;8) `*** Label on X-Axis (Must use process_array_variable - TEXT)
ARRAY TEXT(ylabel_at;8) `*** Label on Y-Axis (Must use process_array_variable - TEXT)
ARRAY REAL(value_ar;20) `*** Trend values (Must use process_array_variable - REAL)
ARRAY STRING(40;$label_at;0)
ARRAY REAL($value_ar;0)
ALL RECORDS([Department])
ORDER BY([Department];[Department]Name;>)
For ($i;1;
Records in selection([Department]))
If ($i<=8)
RELATE MANY([Department]ID)
APPEND TO ARRAY($value_ar;
Records in selection([Doctor]))
End if
NEXT RECORD([Department])
End for
COPY ARRAY($value_ar;value_ar)
DAX_Dev_SetDashboardChart (->xlabel_at;->ylabel_at;->value_ar;$minYvalue_r;$maxYvalue_r)
Nota:
Os valores reais não tem que ser passados nos arrays x e y porque os gráficos de barras não admitem etiquetas e os gráficos de linhas geram seus próprios valores x e y na interface.
: ($ReportName_t="4DAF_PieChart")
C_REAL($minYvalue_r;$maxYvalue_r)
ARRAY TEXT(xlabel_at;8) `*** Label on X-Axis (Must use process_array_variable - TEXT)
ARRAY TEXT(ylabel_at;8) `*** Label on Y-Axis (Must use process_array_variable - TEXT)
ARRAY REAL(value_ar;20) `*** Trend values (Must use process_array_variable - REAL)
ARRAY STRING(40;$label_at;0)
ARRAY REAL($value_ar;0)
ALL RECORDS([Department])
ORDER BY([Department];[Department]Name;>)
For ($i;1;
Records in selection([Department]))
If ($i<=8)
APPEND TO ARRAY($label_at;[Department]Name)
RELATE MANY([Department]ID)
APPEND TO ARRAY($value_ar;Records in selection([Doctor]))
End if
NEXT RECORD([Department])
End for
COPY ARRAY($label_at;xlabel_at)
COPY ARRAY($value_ar;value_ar)
DAX_Dev_SetDashboardChart (->xlabel_at;->ylabel_at;->value_ar;$minYvalue_r;$maxYvalue_r)
Nota:
Os gráficos circulares admitem etiquetas, assim a informação pode ser trazida diretamente do banco de dados.
No arquivo HTML, o comando dax_chartViewer é executado na função dax_loginSuccess. O comando carrega um gráfico dashboard em um <DIV>.
Com duas linhas de código é criado um gráfico. Na primeira linha, dax_chartViewer solicita o nome do gráfico (o que foi definido em Admin Client), e o DIV a ser povoado na página. Na segunda linha é especificado o tipo de gráfico. (ex. .TYPE_BAR, .TYPE_DOT, .TYPE_LINE, or .TYPE_PIE).
/* Bar chart */
barChart = new dax_chartViewer('4DAF_BarChart', $('barchart'), {
type : dax_chartViewer.TYPE_BAR,
/* optional */
edges : dax_chartViewer.BAR_EDGE_SOFT, /* or BAR_EDGE_HARD */
orientation : dax_chartViewer.BAR_ORIENTATION_VERTICAL, /* or BAR_ORIENTATION_HORIZONTAL */
/* optional */
color : '#0948c8',
hoverBackgroundColor : '#402abe',
hoverTextColor : '#fd03a0'
});
/* Dot chart */
var dotChart = new dax_chartViewer('4DAF_DotChart', $('dotchart'), {
type : dax_chartViewer.TYPE_DOT,
/* optional */
hoverBackgroundColor : '#7890ab',
hoverTextColor : '#cdef01',
labelColor : '#67890a'
});
/* Line chart */
var lineChart = new dax_chartViewer('4DAF_LineChart', $('linechart'), {
type : dax_chartViewer.TYPE_LINE,
/* optional */
color : '#abcdef',
hoverBackgroundColor : '#ccffcc',
hoverTextColor : '#cdef01',
labelColor : '#babac0'
});
/* Pie chart */
var pieChart = new dax_chartViewer('4DAF_PieChart', $('piechart'), {
type : dax_chartViewer.TYPE_PIE,
/* optional */
labelColor : '#67890a'
});
