Tuesday, March 18, 2014

MVC Demo - Building Your Org Chart Automatically from an Excel File




GetOrgChart can automatically build your organization chart from a list of employees. 

Here are the 4 steps for importing Excel data into GetOrgchart:

2. Build an Excel file




3. Create Action method that will read the excel file

GetOrgChartReadFromExcelController.cs
        
public JsonResult Read()
{
    //Use OleDb to read the excel
    string path = Server.MapPath(@"~/App_Data/People.xlsx");            
    string connString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + path + ";Extended Properties='Excel 8.0;HDR=Yes;'";
    DataTable dt = new DataTable();
    OleDbConnection conn = new OleDbConnection(connString);
    OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT * FROM [People$]", conn);
    adapter.Fill(dt);

    //The following code will convert a data table to JSON format. 
    List> rows = new List>();
    Dictionary row = null;
    foreach (DataRow dr in dt.Rows)
    {
         row = new Dictionary();
         foreach (DataColumn col in dt.Columns)
         {
              row.Add(col.ColumnName.Trim(), dr[col]);
         }
         rows.Add(row);
    }
    return Json(rows, JsonRequestBehavior.AllowGet);
}


4. Bind the GetOrgChart to the action above

Index.cshtml
 

var readUrl = "@Url.Action("Read")";

$.getJSON(readUrl, function (people) {
    $('#people').getOrgChart({
        theme: "helen",
        color: "green",
        primaryColumns: ["Name", "Title"],
        imageColumn: "Image",
        linkType: "M",
        editable: false,
        dataSource: people
    });
});
Here is the result:



Please let me know if you have any questions

4 comments:

  1. This is a very fine tuned method. What I do is, first create a organizational chart from a organizational chart software . Then embed it to where I want using iframes. When the original diagram is updated the embedded version will get updated automatically.

    ReplyDelete
  2. Hi! this is nice, however can you convert this to MVC razor code?

    thanks.

    ReplyDelete
  3. Thank you so much for you post. It seems very usefull for us. I would like to know more about it.
    top pharma us companies org chart

    ReplyDelete