Here we will see how to create family Chart in Asp.Net using
JavaScript and Chart Controls in Asp.Net
TABLE:
CREATE TABLE [dbo].[FamilyHierarchy](
[MemberId] [int] NOT NULL,
[Name] [varchar](100) NOT NULL,
[ParentId] [int] NULL,
CONSTRAINT
[PK_FamilyHierarchy1] PRIMARY KEY CLUSTERED
(
[MemberId] ASC
)WITH
(PAD_INDEX
= OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
HTML CODE:
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1",
{ packages: ["orgchart"] });
google.setOnLoadCallback(drawChart);
function
drawChart() {
$.ajax({
type: "POST",
url: "Family_Chart.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = new
google.visualization.DataTable();
data.addColumn('string', 'Entity');
data.addColumn('string', 'ParentEntity');
data.addColumn('string', 'ToolTip');
for (var i = 0; i < r.d.length;
i++) {
var memberId = r.d[i][0].toString();
var memberName = r.d[i][1];
var parentId = r.d[i][2] != null
? r.d[i][2].toString() : '';
data.addRows([[{ v:
memberId,
f: memberName +
'<div><img src = "Pictures/' +
memberId + '.jpg" /></div>'
}, parentId,
memberName]]);
}
var chart = new google.visualization.OrgChart($("#chart")[0]);
chart.draw(data, {
allowHtml: true });
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart">
</div>
</div>
CODE BEHIND:
[WebMethod]
public static List<object> GetChartData()
{
string
query = "SELECT MemberId, Name, ParentId";
query += "
FROM FamilyHierarchy";
string
constr = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using
(SqlConnection con = new SqlConnection(constr))
{
using
(SqlCommand cmd = new
SqlCommand(query))
{
List<object> chartData = new
List<object>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using
(SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["MemberId"], sdr["Name"], sdr["ParentId"]
});
}
}
con.Close();
return
chartData;
}
}
}
Thanks for comments.....