im in need of help here. I have to render this code from a sharepoint list instead of this json string. How can i do that?

Heres the link to the chart: http://librerias.logicas.org/lib_gg_orgchart.


  var oc_data = {
            title: '',
            root: {
                id: '1',
                title: 'VD',
                subtitle : 'Marc Lemarc',
                children: [
                    { id: '', title: 'Economy', subtitle: 'Peter John', type: '' },
                   { id: '', title: '', subtitle: '', type: '' },


        function oc_box_click_handler(event, box) {
            if (box.oc_id !== undefined)
                alert('clicked on node with ID = ' + box.oc_id);

        var oc_options1 = {
            container: 'oc_container1',              // name of the DIV where the chart will be drawn
            vline: 10,                               // size of the smallest vertical line of connectors
            hline: 10,                               // size of the smallest horizontal line of connectors
            xoffset: 0,                              // inital x-offset of diagram (can be negative)
            yoffset: 0,                              // inital y-offset of diagram (can be negative)
            inner_padding: 10,                       // space from text to box border
            box_color: '#D9EDF7',                    // fill color of boxes
            box_color_hover: '#E9FDF7',              // fill color of boxes when mouse is over them
            box_border_color: '#BCE8F1',             // stroke color of boxes
            box_border_radius: 8,                    // border radius of boxes in pixels
            box_border_width: 2,                     // border with of boxes in pixels
            box_fix_width: null,                     // set fix width for boxes in pixels
            box_fix_height: null,                    // set fix height for boxes in pixels
            box_root_node_width: null,               // override fix width and max text width
            box_root_node_height: null,              // override fix height and size defined by text length
            box_html_template: 'oc_template',        // id of element with template; Depends on jsrender and jQuery libraries!
            line_color: '#3A87AD',                   // color of connectors
            title_color: '#3A87AD',                  // color of titles
            subtitle_color: '#1A678D',               // color of subtitles
            title_font_size: 12,                     // size of font used for displaying titles inside boxes
            subtitle_font_size: 10,                  // size of font used for displaying subtitles inside boxes
            title_char_size: [6, 12],                // size (x, y) of a char of the font used for displaying titles
            subtitle_char_size: [5, 10],             // size (x, y) of a char of the font used for displaying subtitles
            max_text_width: 15,                      // max width (in chars) of each line of text ('0' for no limit)
            text_font: 'Courier',                    // font family to use (should be monospaced)
            use_images: false,                      // use images within boxes?
            images_base_url: './images/',            // base url of the images to be embeeded in boxes, with a trailing slash
            images_size: [160, 160],                 // size (x, y) of the images to be embeeded in boxes
            box_click_handler: oc_box_click_handler, // handler (function) called on click on boxes (set to null if no handler)
            debug: false                             // set to true if you want to debug the library
        .node {
            padding-top: 4px;
            text-align: center;
            font-size: 13px;
        .node:first-letter {
            font-weight: bold;
    <script id="oc_template" type="text/x-jsrender">
        <div class="node">
            <div><a href='http://www.google.se'>{{>title}}</a><br />{{>subtitle}}</div>

    <div id="oc_container"></div>
        ggOrgChart.render(oc_data, { container: 'oc_container', box_html_template: 'oc_template' });

  • What is the schema of your SharePoint list(s)? It needs to be 'mapped' into a JSON format in order for the lib_gg_orgchart javascript library to read and render. Feb 6, 2014 at 19:34
  • What you mean?, i cant use csom to retrieve the sharepoint list and map it?, it must be in json?
    – kalle
    Feb 10, 2014 at 21:53
  • that is what I said - map the list schema to json object, for example - using XSLT (see answer below by tyshock) Feb 11, 2014 at 14:50
  • or use csom to create the json object which is needed by the lib_gg_orgchart javascript library Feb 11, 2014 at 15:36
  • I don't think this is off-topic. It is related to sharepoint because he wants to render the json from a sharepoint LIST.
    – bgmCoder
    Sep 9, 2014 at 14:28

2 Answers 2


What you need to do is use XSLT to write out each list item in javascript object format. You can do this by creating a new page in SharePoint designer and dropping in a DataFormWebPart for the appropriate list. Once that is done, you can choose to override the default XSLT and use your own custom XSLT.

Depending on your schema, you will probably need to slightly modify the approach from your example above. In the example above, there is a single 'root' object, and that object contains all of it's children in a nested array. It may be too hard to replicate a recursive structure like this via XSLT.

What I would do instead is output all of your list items as a flat list, and then use javascript to associate the hierarchy at runtime. I'm guessing that your schema probably has a lookup column that contains the 'parent' ID. What I would do then is echo out each listitem as its own javascript object with XSLT. Then, have a function that loops though that entire list of items, and for each item associates it with its designated parent by adding it to the parent's 'children' array. Once those associations are made, the org chart can be init'd with the render() call as in the example above.

  • Thank you so much. I found an exampel that i might can use some parts of the code, what you think of it? abinjaik.com/2013/08/14/…
    – kalle
    Feb 9, 2014 at 13:34
  • That looks like a good option if it works for you. Also, if you do not need this solution implicitly available on multiple sites in the farm, you do not have to import the javascript libraries to your farm's hive _layouts folder. You can just put them in the 'Site Assets' folder of the site you want the chart to appear on. That would allow you to implement this without needing Visual Studio and/or server privileges.
    – tyshock
    Feb 10, 2014 at 15:21
  • How do I "output all your items as a flat list" - you mean this can be done programatically, right? Also, how do you use js to associate it at runtime, as you suggest? Can you provide an example or a link to a tutorial? (I gave you my +1)
    – bgmCoder
    Mar 14, 2014 at 18:28
  • SPServices (https://spservices.codeplex.com/wikipage?title=$().SPServices.SPGetListItemsJson) has a function for turning a sharepoint list into json via its function 'SPServices.SPGetListItemsJson'
    – bgmCoder
    Sep 9, 2014 at 14:31

For users of lib_gg_orgchart (http://librerias.logicas.org/lib_gg_orgchart)

If you managed to generate the JSON org chart from your source, this will be of interest to you:

Version 1.0.0beta1 has just be released.

This is the first mayor-number version release. Includes more types of nodes, better rendering, decoupling of the JSON-defined organizational chart (useful, for example, for dynamic generation of the structures), a simpler form of invocation, chart zoom, drag and print to PDF (so you can render a broad chart inside a fixed-width DIV page), and multiple, different-structure charts on the same page, and some other minor features.

So, now, the JSON org chart structure can be generated dynamically. This could be of interest for you.

Not the answer you're looking for? Browse other questions tagged or ask your own question.