4D Ajax Framework v11 Release 5のチャートは新しいカラー、新しいチャートタイプ、on hoverによるインタラクティブ性、そしてルックアンドフィールをカスタマイズするコマンドにより新しい命を吹き込まれました。
Dashboardチャートは管理コントロールパネルで作成します。チャート機能を有効にするには、Dashboardエディタで"チャートを使用する"チェックボックスにチェックします。
この例題では4DAF_BarChart, 4DAF_DotChart, 4DAF_LineChart, そして 4DAF_PieChartと4つのDashboardチャートを作成しました。それぞれのDashboardチャートはバックエンドデータベースで、DAX_DevHook_DefineChartメソッドを使用して生成されます。DAX_DevHook_DefineChartの内容です:
: ($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)
注:
実際の値がXおよびY軸のラベル配列に渡される必要はありません。棒グラフはラベルをサポートせず、折れ線グラフはフロントエンドでXおよびY軸を生成します。
: ($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)
Note:
Dot charts support labels, but notice that they are truncated (in the x label array). Dot chart labels are horizontally oriented, and they all reside on one line, which is why truncation is highly recommended.
: ($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)
Note:
Actual values do not have to be passed into x and y label arrays, as Bar charts do not support Labels and Line charts generate the x and y values themselves in the Front-end.
: ($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)
Note:
Pie charts support labels, so that information can be pulled directly from the database.
HTMLファイル中、dax_chartViewerコマンドがdax_loginSuccess関数内で実行されます。このコマンドはDashboardチャートを特別な<DIV>にロードします。
チャートを作成するには2行のみが必要です。最初の行でdax_chartViewerはチャート名 (管理クライアントで作成される場合)と、ページのDIVを必要とします。2行目で、チャートのタイプを指定します (例: .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'
});
