Google Annotated Time Line コントロール

はじめに

このコントロールは、時間の経過に伴う値の変化を線で示すインタラクティブなグラフ (タイムライングラフ) です。オプションで、注釈を付けることもできます。X 軸は時間を、Y 軸はその時間に対応する値を示します。
グラフは、Flash を使用してブラウザー内に描かれます。

例

このユーザーコントロールは、非常にシンプルです。このコントロールを機能させるには、プロパティを 1 つ設定するだけで済みます。 [ Data ] プロパティです。

ある期間の収入 (Incomes) と支出 (Outcomes) を示すシンプルなタイムライングラフ

Annotated Time Line コントロールをドラッグアンドドロップします。
[ VisualizationData ] プロパティに AnnotatedTimeLine データタイプ (この SDT は、コントロールを Web フォームにドロップしたときに自動的にインポートされています) の変数を割り当てます。
この変数を使用して、グラフに表示する情報をロードします。

Sub 'LoadTimeLine'
  &incomes.Name = "Incomes"
  &serieItem.XValue = ctod("01/01/08")
  &serieItem.YValue = 20000
  &serieItem.AnnotationTitle = "title event 20000"
  &serieItem.AnnotationText = "text event 20000"
  &incomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("04/01/08")
  &serieItem.YValue = 40000
  &serieItem.AnnotationTitle = "title event 40000"
  &serieItem.AnnotationText = "text event 40000"
  &incomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("08/01/08")
  &serieItem.YValue = 60000
  &serieItem.AnnotationTitle = "title event 60000"
  &serieItem.AnnotationText = "text event 60000"
  &incomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("12/01/08")
  &serieItem.YValue = 80000
  &serieItem.AnnotationTitle = "title event 80000"
  &serieItem.AnnotationText = "text event 80000"
  &incomes.Data.Add(&serieItem)

  &outcomes.Name = "Outcomes"
  &serieItem = new()
  &serieItem.XValue = ctod("01/01/08")
  &serieItem.YValue = 10000
  &serieItem.AnnotationTitle = "title event 10000"
  &serieItem.AnnotationText = "text event 10000"
  &outcomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("04/01/08")
  &serieItem.YValue = 30000
  &serieItem.AnnotationTitle = "title event 30000"
  &serieItem.AnnotationText = "text event 30000"
  &outcomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("08/01/08")
  &serieItem.YValue = 50000
  &serieItem.AnnotationTitle = "title event 50000"
  &serieItem.AnnotationText = "text event 50000"
  &outcomes.Data.Add(&serieItem)

  &serieItem = new()
  &serieItem.XValue = ctod("12/01/08")
  &serieItem.YValue = 70000
  &serieItem.AnnotationTitle = "title event 70000"
  &serieItem.AnnotationText = "text event 70000"
  &outcomes.Data.Add(&serieItem)

  &timeLine.Add(&incomes)
  &timeLine.Add(&outcomes)
  googleAnnotatedTimeLine1.Reload = trueEndSub

イベントの処理

上述したように、Annotated Time Line グラフコントロールは、インタラクティブなグラフです。注釈の 1 つをクリックすると、グラフの対応する情報が強調表示され、GeneXus のイベントがトリガーされます。

Event googleAnnotatedTimeLine1.ItemSelected
    msg("Serie: " + &selectedItem.SerieName + " XValue: " + &selectedItem.XValue.ToString() + " XYvalue: " + &selectedItem.YValue.ToString())
EndEvent

注: &selectedItem は、AnnotatedTimeLineSelectedItem SDT に基づいています (この SDT も、コントロールを Web フォームにドロップしたときに自動的にインポートされています)。