Org Chart XSL

org_chart.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>

  <!-- This template is the "wrapper" or "container" for the custom view. -->
  <xsl:template match="/">

    <!-- This is the actual wrapper element that will be emitted -->
    <div>
      <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() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('string', 'Manager');
          data.addColumn('string', 'ToolTip');

          data.addRows([
            <xsl:apply-templates select="/dsQueryResponse/Rows/Row"/>
          ]);

          var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, {allowHtml:true});
        }
        var pm = Sys.WebForms.PageRequestManager.getInstance();
        pm.add_endRequest(drawChart);
      </script>
      <div id="chart_div"></div>
      <!-- This will tell the data view to look for the actual content
            and come back when it's done. -->

    </div>

    <!-- end wrapper -->
  </xsl:template>

  <xsl:template match="/dsQueryResponse/Rows/Row">
    <!-- This markup is used for each item in the list -->
    ['<xsl:value-of select="@Title"/>', '<xsl:value-of select="substring-after(@Manager.,'#')"/>', '']
    <xsl:if test="position()!=last()">,</xsl:if>
  </xsl:template>

</xsl:stylesheet>