グリッドデータを散布図で表示する ASP.NET アプリケーションの作成

C1ScatterChartコントロールを使ったWebアプリケーションの作成

　（6）同様に、平成23年のデータ系列を作成します。このデータは、グリッドの4番目と5番目の列なので、「Rows(i).Cells(4).Text)」「Rows(i).Cells(5).Text)」という式でアクセスできます。

Visual Basic

' 平成23年系列一覧
For i = 0 To cnt
    H231(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(4).Text)
Next
For i = 0 To cnt
    H232(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(5).Text)
Next
Dim series2 = New ScatterChartSeries()
C1ScatterChart1.SeriesList.Add(series2)
series2.MarkerType = MarkerType.Circle

series2.Data.X.AddRange(H231)
series2.Data.Y.AddRange(H232)
series2.Label = C1GridView1.Columns(3).HeaderText
series2.LegendEntry = True

C#

// 平成23年系列一覧
for (i = 0; i < cnt; i++)
{
    H231[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[4].Text);
}
for (i = 0; i < cnt; i++)
{
    H232[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[5].Text);
}
var series2 = new ScatterChartSeries();
this.C1ScatterChart1.SeriesList.Add(series2);
series2.MarkerType = MarkerType.Circle;

series2.Data.X.AddRange(H231);
series2.Data.Y.AddRange(H232);
series2.Label = C1GridView1.Columns[3].HeaderText;
series2.LegendEntry = true;

　（7）続いて、軸ラベルを作成です。これは、AxisオブジェクトのXY軸それぞれのTextプロパティにラベル用の文字列をグリッドのヘッダーから取得し設定します。

Visual Basic

' ラベルの作成
C1ScatterChart1.Axis.X.Text = C1GridView1.Columns(1).HeaderText
C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns(2).HeaderText

C#

// ラベルの作成
C1ScatterChart1.Axis.X.Text = C1GridView1.Columns[1].HeaderText;
C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns[2].HeaderText;

　（8）最後に、作成したメソッド（プロシージャ）を、Page_Loadイベントハンドラでポストバックされないときに呼び出すようにします。

　以上で完成です。それでは、アプリケーションを実行してみましょう。

　平成22年と23年のデータが円形で色別に表示されています。データ点にマウスポインタを重ねるとデータ点が大きくなるアニメーションが実行されます。

Visual Basic

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        setupchart()
    End If
End Sub

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        setupchart();
    }
}

アプリケーション実行画面

まとめ

　グラフコントロールは、単独で使うというよりもアプリケーションの機能の一部として使われることが多いコントロールです。

　C1ScatterChartコントロールも、Webを使ったデータ解析アプリケーションの機能の一つとして使うことができます。データ系列の設定に関しても、特に難しい部分はないので、グリッドコントロールと組み合わせることによって、データ入力とグラフ化を一度に行うことが可能です。