Los gráficos en 4D Ajax Framework v11 Release 5 tienen nueva vida con nuevos colores, nuevos tipos interactividad y más comandos para personalizar el aspecto.
Un gráfico dashboard se crea desde el panel de control. La clave para activar la funcionalidad de gráficos es marcar la casilla de selección "Use Chart" en el editor de Dashboards
En este ejemplo creamos 4 Dashboards llamados 4DAF_BarChart, 4DAF_DotChart, 4DAF_LineChart y 4DAF_PieChart. En la base de datos cada gráfico dashboard se generará desde el método DAX_DevHook_DefineChart mostrado a continuación:
: ($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:
Los valores reales no tienen que pasarse en los arrays x y y porque los gráficos de barras no admiten etiquetas y los gráficos de líneas generan sus propios valores x y y en la interfaz.
: ($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:
Los gráficos de puntos admiten etiquetas (array x), pero se truncan porque se orientan de manera horizontal y están en una línea.
: ($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:
Los valores reales no tienen que pasarse en los arrays x y y porque los gráficos de barras no admiten etiquetas y los gráficos de líneas generan sus propios valores x y y en la interfaz.
: ($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:
Los gráficos criculares admiten etiquetas, así que la información puede traerse directamente de la base de datos.
En el archivo HTML, el comando dax_chartViewer se ejecuta en la función dax_loginSuccess. El comando carga un gráfico dashboard en un <DIV>.
Con dos líneas de código se crea un gráfico. El la primera línea, dax_chartViewer solicita el nombre del gráfico (el que se definió en Admin Client), y el DIV a poblar en la página. En la segunda línea se especifica el tipo de gráfico. (ej. .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'
});
