データベースのデータを直線ゲージで表示するASP.NET アプリケーションの作成

C1LinearGaugeコントロールとC1GridViewコントロールを使ったアプリケーションの作成

グリッドデータでゲージを設定しなおす処理

　ページのLoadイベントハンドラで、グリッドからデータを取り出してゲージを設定しなおします。

　まず、列「品名」の値を取り出してLabelコントロールに設定します。そして、「最大在庫数」「最少在庫数」の値を使ってレンジを設定しなおし、「現在庫数」の値でポインタを動かします。

　グリッドのデータを取り出すには、Rowsプロパティで行番号を指定し、Cellsプロパティで列番号を指定します。列番号は先頭列が「0」で、行番号も先頭行が「0」になります。データはテキストになっていますので、数値に変換し、C1LinearGaugeコントロールの各プロパティに設定します。

　GaugelRange要素にアクセスするには、Rangesプロパティで各GaugelRange要素を指定し、それぞれのプロパティに値を設定します。

Visual Basic

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '最初のゲージの設定
        Label1.Text = C1GridView1.Rows(0).Cells(0).Text

        C1LinearGauge1.Ranges(0).StartValue = Convert.ToInt16(C1GridView1.Rows(0).Cells(2).Text)
        C1LinearGauge1.Ranges(0).EndValue = Convert.ToInt16(C1GridView1.Rows(0).Cells(1).Text)
        C1LinearGauge1.Value = Convert.ToInt16(C1GridView1.Rows(0).Cells(3).Text)

        '2番目のゲージの設定
        Label2.Text = C1GridView1.Rows(1).Cells(0).Text

        C1LinearGauge2.Ranges(0).StartValue = 0
        C1LinearGauge2.Ranges(0).EndValue = Convert.ToInt16(C1GridView1.Rows(1).Cells(2).Text)

        C1LinearGauge2.Ranges(1).StartValue = Convert.ToInt16(C1GridView1.Rows(1).Cells(1).Text)
        C1LinearGauge2.Ranges(1).EndValue = 100
        C1LinearGauge2.Value = Convert.ToInt16(C1GridView1.Rows(1).Cells(3).Text)
    End Sub
End Class

C#

namespace DB_Gauge_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //最初のゲージの設定
            Label1.Text = C1GridView1.Rows[0].Cells[0].Text;

            C1LinearGauge1.Ranges[0].StartValue = Convert.ToInt16(C1GridView1.Rows[0].Cells[2].Text);
            C1LinearGauge1.Ranges[0].EndValue = Convert.ToInt16(C1GridView1.Rows[0].Cells[1].Text);
            C1LinearGauge1.Value = Convert.ToInt16(C1GridView1.Rows[0].Cells[3].Text);

            //2番目のゲージの設定
            Label2.Text = C1GridView1.Rows[1].Cells[0].Text;

            C1LinearGauge2.Ranges[0].StartValue = 0;
            C1LinearGauge2.Ranges[0].EndValue = Convert.ToInt16(C1GridView1.Rows[1].Cells[2].Text);

            C1LinearGauge2.Ranges[1].StartValue = Convert.ToInt16(C1GridView1.Rows[1].Cells[1].Text);
            C1LinearGauge2.Ranges[1].EndValue = 100;
            C1LinearGauge2.Value = Convert.ToInt16(C1GridView1.Rows[1].Cells[3].Text);
        }
    }
}

　これで、グリッドデータに基づくゲージが作成できます。最初のゲージは、現在庫数が適正な在庫範囲より多いことが、2番目のゲージは少ないことが分かります。

完成したゲージ

まとめ

　データを視覚化する方法はいくつかありますが、C1LinearGaugeコントロールを使うと、より高い視認性を持った表示が可能になります。特に時間の経過とともに変化するデータをリアルタイムに表示したい時は、ポインタがアニメーションで動作するので、変化の把握がしやすくなります。

　C1GridViewコントロールは、データベースのデータをWebページに表示することができ、コードを書くことなくデータベースと連結できるのが大きな魅力です。