ここでは、サービス監視ダッシュボードを構築する際に押さえておきたいポイントを紹介します。
使用しているコントロール
サービス監視ダッシュボードでは、次のコントロールを利用しています。
RadialGauge(CPU 使用率などの最新値表示)
RadialGaugeを利用してCPU使用率などの最新の値をゲージ表示します。
また、RadialGauge.getTextプロパティは、format プロパティでは対応しきれない場合に、ゲージ上の文字列をカスタマイズするために使用します。本使用例では、セッション遅延ゲージで「ms」を表示するために利用しています。
FlexChart(1 週間分の各種メトリクスの推移)
FlexChartを使用し、CPU 使用率などの 1 週間分の推移を折れ線グラフとして可視化しています。
グラフ全体に適用するデフォルトのチャートタイプは
FlexChart.chartType プロパティで指定します。
系列ごとにチャートタイプを変更したい場合は、
FlexChart.series 配列の各メンバで Series.chartType を設定します。
セッション遅延、UDPパケット損失率、CPU使用率、メモリ使用率などのグラフでは、異常検出バンドを領域として表示するために Series.chartType を利用しています。
レンジエリア (Range Area)
chartType="Area"の系列に対し、binding="bandLo,bandHi"のように2つのプロパティ名を指定すると、2本の線に挟まれた領域が塗りつぶされます。本使用例ではこの機能を用いて、異常検出バンドを表示しています。
null を含む孤立データ点の可視化
chartType="Line" の折れ線グラフでは、前後が null のデータ点(孤立点)は線で結べないため、表示されません。
データ例:
このようなケースでは、次のいずれかの方法で可視化できます。
① LineSymbols を使用する
chartType="LineSymbols" を指定すると、線とあわせてデータ点にシンボルが表示されます。
デモサンプル
② itemFormatter で「孤立点のみ」シンボル表示(本使用例で採用)
itemFormatterプロパティを使用すると、条件付きでシンボルやスタイルを追加できます。本使用例では、孤立しているデータ点のみをシンボル表示したいためitemFormatterを使用した実装としています。
ツールチップのカスタマイズ
tooltipcontentプロパティを使うと、系列ごとのツールチップ内容をカスタマイズできます。本使用例では、文字色の指定や値表示のカスタマイズを行っています。