How could I display a hierarchical org chart with directors, managers, and staff, using webforms and c#?

Question

Assume I have an XML doc with employees and who reports to them. Something like this:

<?xml version="1.0" encoding="utf-8" ?>
<employees>
  <employee>
    <id>1</id>
    <name>Ashley King</name>
    <title>Director</title>
    <directReports>
      <employee>
        <id>2</id>
        <name>Jim Warden</name>
        <title>Manager</title>
        <directReports>
          <employee>
            <id>3</id>
            <name>Jeff Reese</name>
            <title>Lead</title>
            <directReports>
              <employee>
                <id>4</id>
                <name>Leann Thompson</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>5</id>
                <name>Amber Herzer</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>6</id>
                <name>Ben Lively</name>
                <title>Staff</title>
                <directReports />
              </employee>
            </directReports>
          </employee>
          <employee>
            <id>3</id>
            <name>Mary Hibdon</name>
            <title>Lead</title>
            <directReports>
              <employee>
                <id>50</id>
                <name>Brandon Burns</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>55</id>
                <name>David Peck</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>62</id>
                <name>Ben Lively</name>
                <title>Staff</title>
                <directReports />
              </employee>
            </directReports>
          </employee>
        </directReports>
      </employee>
    </directReports>
  </employee>
</employees>

I'd like to use webforms (c#) to create dynamic org charts based on the data in the xml doc I feed it. I have tried a few methods with varying levels of crappiness.

It seems to me like the solution will have to include an html table (cringe). Mainly because the position of each employee is significant and we can't have them floating around the browser window (please correct me if you disagree). The top employee, Askley King, would be be the top cell, a with a colspan of X. Jim Wardon would be the next row with the same colspan since he doesn't have any contemporaties in that XML doc. Jeff Reese and Mary Hibdon would be the next row with colspans of x / 2. Then, the next row has the next employees and I start to get bogged down in how to complete it.

How would you do it? Code or concept... makes no difference. I just need to be pointed in the right direction.

Answer 1

SmartDraw have free org charts here: http://www.smartdraw.com/specials/ppc/org-chart-software.htm?id=141414&gclid=CPSep4-a158CFYsz3god1VRybg

I have not used them myself.

From what I can find it looks like msCharts does not support org charts.

Answer 2

XML loves recursion. It's a lot of work to lay out the nodes one-by-one or into some gigantic table grid -- your data format is heirarchical and your processing method should be as well.

Yep. Tried it. I'm just having trouble getting my mind around the best way to do it. I could use tables. I could use css. Absolute positioning. But nothing I come up with in HTML is really working for me.

XSLT is pretty good at transforming xml into html. the following xslt transforms your xml into a series of nested divs and tables. I'm using a table to get each colleague group aligned. seemed like the easiest way.

<xsl:template match="employee">
  <div class="wrapper">
    <div class="smallline" />
    <div class="box">
      <xsl:value-of select="name"/> <br/>
      <xsl:value-of select="title"/>
    </div>
    <xsl:if test="directReports/employee">
      <div class="smallline"> </div>
      <table>
        <tr>
          <xsl:for-each select="directReports/employee">
            <td> <xsl:apply-templates select="."  /> </td>
          </xsl:for-each>
        </tr>
      </table>
    </xsl:if>
  </div>
</xsl:template>

To preview, save the xslt from http://pastebin.com/f6597d519

Add <?xml-stylesheet href="foo.xslt" type="text/xsl"?> to the top of your employees xml, and open in a browser. In practice, you may want to transform on the server to avoid compatibility issues. To do that in C#, see http://stackoverflow.com/questions/34093/how-to-apply-an-xslt-stylesheet-in-c