Japan Dynamics CRM Team Blog

Microsoft Dynamics CRM technical information for partners and customers

Dynamics CRM 2011 グラフのカスタマイズ

Dynamics CRM 2011 グラフのカスタマイズ

  • Comments 0

みなさん、こんにちは。

今回は、前回 紹介したグラフ機能紹介の続きで、グラフのカスタマイズを紹介したいと思います。
カスタムグラフは二通りの方法で作成可能です。

- グラフ デザイナー
Dynamics CRM 2011 が標準で提供する機能です。Internet Explorer 内で利用可能で、
コードを 1 行も記述することなく、非常に簡単にカスタムグラフが作成できます。

- XML を作成/編集
グラフは XML で UI 部分およびデータ取得部分を定義しています。既存のグラフをエクスポートして
編集することも、新規に定義を作成してインポートすることも可能です。グラフデザイナーより
UI、データともに柔軟なグラフを作成可能です。

では早速見ていきましょう。

グラフ デザイナー

今回は活動エンティティーで、関連ごとの活動を表すグラフを作成します。

1. Internet Explorer で Dynamics CRM 2011 に接続します。

2. ワークプレース | 活動を開きます。

3. リボンメニューのグラフタブをクリックします。

image

4. 新しいグラフをクリックします。グリッド右側にグラフデザイナーが表示され、リボンも内容が更新されます。

5. リボンからグラフの形状を選択します。今回は縦棒を使います。

image

6. グラフデザイナー上で、グラフの名前を 「関連別活動」 と付けます。

7. 以下のように設定を行います。

image

8. 設定が完了したら、リボン上の保存して閉じるボタンをクリックします。

これだけでグラフの作成は完了しました。作成したグラフは自分のグラフに登録されます。
適当にいくつかの活動に関連を付けて、動作を確認してみてください。

image

また前回紹介したとおり、グラフはグリッドと連動します。カスタムグラフも同様に機能しますので、試して見ましょう。

1.  活動グリッドで、先ほど作成した 「関連別活動」 グラフを表示します。

2. リボンメニュよりフィルターをクリックします。これでグリッドのレコードがフィルター可能となります。

image

3. グリッドの活動の種類列の横のフィルターアイコンをクリックします。

image

4. フィルター条件より、電話のみを選択し OK をクリックます。

image

5. グリッドに電話のレコードのみ表示されます。またグラフにはグラフの更新ボタンが現れます。

image

6. グラフの更新ボタンをクリックすると、電話の活動飲みの数値がグラフに反映されます。

image

XML を直接編集

次に、XML を直接編集するカスタマイズを紹介します。先ほど作成したカスタムレポートは、
関連ごとに紐づいている活動の総数が出ました。 しかし活動の種類ごとの数が分かりません。
そこで活動の種類ごとに 色分けできるグラフを作成したいと思います。

基本となるグラフは、先ほど作成したカスタムグラフとします。

1. 作成したカスタムグラフを表示します。

2. リボンのグラフタブをクリックし、グラフのエクスポートボタンをクリックします。

3. ファイルのダウンロードダイアログが出ますので、保存をクリックします。

4. 保存したファイルをメモ帳で開きます。

5. グラフは大きく分けてデータ定義部分と、UI 定義部分に分かれています。まずは利用する
データ部分を修正します。現在の fetch ノード配下では groupby が、レコードの関連を示す
regardingobjectid のみです。

<attribute groupby="true" alias="groupby_column" name="regardingobjectid" />

ここに種類の groupby を追加します。

<attribute groupby="true" alias="groupby_activitytype" name="activitytypecode" />

6. ファイルを保存します。

7. Internet Explorer に戻って、グラフリボンよりグラフのインポートをクリックします。

8. 変更した XML ファイルを指定してアップロードします。その際重複するグラフとして認識されますので、
ここでは両方とも維持を選択します。

9. 保存したグラフを開くと以下のように活動の種類ごとにグラフが表示されます。

image

10. 予定どおり種類ごとに分かれましたが、色があまりきれいではないので、変更してみます。
再度 XML ファイルを開きます。UI 部分は presetationdescription にあります。その中でグラフ自体の
色を決めるのは Series になりますので、 Series を確認してみます。

<Series>
        <Series IsValueShownAsLabel="True" Color="55, 118, 193" BackGradientStyle="TopBottom" BackSecondaryColor="41, 88, 145" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40"></Series>
      </Series>

ここにグラデーションの指定がありました。指定を TopBottom からNone に変更して、
再度レポートをインポートします。今回も別名で保存をしました。

image

11. グラデーションがなくなり、色はきれいになったと思います。しかしこのままでは活動の種類が
増えると縦棒が増えすぎます。そこで 1 つの縦棒の中ですべてを表示するように変更したいと思います。
グラフ自体の変更なので再度 Series を編集して、ChartType を追加します。

<Series>
        <Series ChartType="StackedColumn" IsValueShownAsLabel="True" Color="55, 118, 193" BackGradientStyle='None' BackSecondaryColor='41, 88, 145' Font='{0}, 9.5px' LabelForeColor='59, 59, 59' CustomProperties='PointWidth=0.75, MaxPixelPointWidth=40'></Series>
      </Series>

12. XML ファイルを保存してグラフをインポートします。すると以下のように 1 軸のグラフに変わりました。

image

.NET Framework 4.0 Chart クラス

XML 定義を直接編集することで、より詳細なグラフを作成できますがどうやって情報を集めればいいのでしょうか。
もちろん SDK にも多くのサンプルを用意していますが、グラフは .NET Framework 4.0 の Chart クラスを
使っていますので、クラスの詳細は MSDN 上で公開しています。

http://msdn.microsoft.com/ja-jp/library/system.web.ui.datavisualization.charting.chart.aspx

しかし全てのプロパティを利用できるわけではありません。例えば外部データソースを指定しようと
DataSource プロパティを以下のように指定した場合、グラフのインポート時にエラーが出ます。

例: <Chart DataSource=”sample”>
エラー: PresentationDescription is invalid. It cannot include a data source: object directly.

これは Dynamics CRM 2011 のグラフでは datadescription 部の Fetch とビューの
定義をあわせてデータソースとして利用するためです。

特殊なグラフ

Dynamics CRM 2011 では .NET Framework 4.0 のチャートが利用できることは説明しましたが、
もう 1 つ、特殊な利用方法があります。それは Web リソースをグラフ部分に読み込むというものです。

この方法を利用すれば、HTML ページがグラフ部分に読み込み可能で、かつ HTML 上にホストされた
画像や Silverlight も実行可能です。

HTML Web リソースを読み込んだ例

image

HTML Web リソースにスクリプトを追加し、Bing Map を置いた例

image

次回は Web リソースを利用したグラフを取り上げます。

- Dynamics CRM サポート 中村 憲一郎

  • Loading...
Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post