DevExpress でのピボットグリッド(ASPxPivotGrid)のグラフ(WebChartControl)反映設定(JavaScript)のサンプルです。

ピボットグリッドに対しての操作結果のピボットグリッドをグラフに反映します。

現状の画面デザインはこのようになっています。

20200212_01

20200212_02

20200212_03

ピボットグリッド上でデータを1件表示したにも関わらず、グラフは何も変化がありません。(初期表示状態)

<グラフ反映設定(JavaScript)>

・「WebChartControl」に対して「ClientInstanceName=”WebChart”」を設定します。

20200212_04

・「ASPxPivotGrid」の「>」からメニューを表示して、「Designer…」を選択します。

20200212_05

20200212_06

・左側のメニューから「Client-Side Events」を選択します。

20200212_07

・中央側のメソッド一覧から「EndCallback」を選択します。

20200212_08

・「WebChart.PerformCallback();」を記載します。
※「WebChart」はグラフに割り当てた、ローカルのインスタンス名です。

20200212_09

【サンプルプログラム】

それでは、実行して動作確認を行います。

20200212_01

20200212_02

20200212_03

20200212_01

20200212_02

20200212_10

無事にピボットグリッド(ASPxPivotGrid)のグラフ(WebChartControl)反映設定(JavaScript)が出来ました。

ちなみに、ピボットグリッド(ASPxPivotGrid)で操作はすべて反映されます。
※対象件数変更、表示範囲変更

20200212_11