ASP.NET: AJAXでSQL serverのデータを可視化する - Fuwafuwa's memorandum

Fuwafuwa's memorandum

Data analysis, development, reading, daily feeling.
MENU

ASP.NET: AJAXでSQL serverのデータを可視化する

ASP.NETのチャートはとってもよいのですが
もっとかわいいチャートを描きたいと思い、AJAXを導入しました。

チャートを描くからにはSQLからデータを引っ張りたいですね。
下記のサイトを参考にしました。
ASP.Net AJAX Bar Chart Control: Populate from Database example

上記では判例やバーの色、バーの重ね合わせなどに言及がなかったので
もう少し改良しました。

この記事では、最終的に下記のようなグラフを作成します。 AJAXでSQLserverのデータを可視化する
作成の手順です。

SQL serverにテストデータを作成。
グループ名を格納するデータ。

CREATE TABLE [ns_group_name]
	( [group] NVARCHAR(100) )

INSERT INTO [ns_group_name]
VALUES('iris'),
('anemone'),
('peony');
グループごとのメンバー数を格納するデータ。
CREATE TABLE [ns_menber_table]
	( [group] NVARCHAR(100)
	, [year] DATE
	, [male_number] INT
	, [female_number] INT ) 

INSERT INTO [ns_menber_table]
VALUES 
('iris','2010','34','29'),
('iris','2011','30','32'),
('iris','2012','33','35'),
('iris','2013','41','37'),
('iris','2014','34','36'),
('iris','2015','38','35')
データの準備が整ったのでASP.NETで早速作図していきます。

Web.configに下記を追加する。

  

aspxファイルに下記のディレクティブを追加し、コントロールを登録
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
ツールボックスのToolScriptManegerをaspxファイルにドラッグ&ドロップ
下記のコードが反映されます。


ツールボックスのDropDownListをaspxファイルにドラッグ&ドロップ
下記のコードが反映されます。


ツールボックスのAJAX Control ToolkitにあるBarChartをaspxファイルにドロップ&ドロップし、サイズらラベル、色を調整


csファイルに下記を追加する
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespaceを書き換える。
public partial class test_page : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string query = "SELECT group FROM [group_name]"";
            DataTable dt = GetData(query);
            group.DataSource = dt;
            group.DataTextField = "group";
            group.DataValueField = "group";
            group.DataBind();
            group.Items.Insert(0, new ListItem("Select", ""));
        }
    }

    protected void group_SelectedIndexChanged(object sender, EventArgs e)
    {
        string query = string.Format("SELECT SUBSTRING(CONVERT(NVARCHAR,[year],121),1,4),[male_number],[female_number] FROM [ns_menber_table] WHERE [group] = '{0}'", group.SelectedItem.Value);
        DataTable dt = GetData(query);

        string[] x = new string[dt.Rows.Count];
        decimal[] y = new decimal[dt.Rows.Count];
        decimal[] z = new decimal[dt.Rows.Count];

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            x[i] = dt.Rows[i][0].ToString();
            y[i] = Convert.ToInt32(dt.Rows[i][1]);
            z[i] = Convert.ToInt32(dt.Rows[i][2]);
        }

        BarChart1.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = y, BarColor = "#8abcd9", Name = "male"}); //バーのデータ、色、凡例名を設定します
        BarChart1.CategoriesAxis = string.Join(",", x);
        BarChart1.ChartTitle = string.Format("{0} Order Distribution", group.SelectedItem.Value);

        BarChart1.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = z, BarColor = "#d98aae", Name = "female" });
        BarChart1.CategoriesAxis = string.Join(",", x);
        BarChart1.ChartTitle = string.Format("{0} Order Distribution", group.SelectedItem.Value); 
        
        if (x.Length > 3)
        {
            BarChart1.ChartWidth = (x.Length * 100).ToString();
        }
        BarChart1.Visible = group.SelectedItem.Value != "";
    }

    private static DataTable GetData(string query)
    {
        DataTable dt = new DataTable();
        string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                }
            }
            return dt;
        }
    }
}
完了です。

Leave a reply






管理者にだけ表示を許可する

該当の記事は見つかりませんでした。