SharePoint 2013 Organization Chart [closed]

Question

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.

Thanks

  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
        };
    </script>
    <style>
        .node {
            padding-top: 4px;
            text-align: center;
            font-size: 13px;
        }
        .node:first-letter {
            font-weight: bold;
        }
    </style>
    <script id="oc_template" type="text/x-jsrender">
        <div class="node">
            <div><a href='http://www.google.se'>{{>title}}</a><br />{{>subtitle}}</div>
        </div>
    </script>
</head>
<body>

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

    </script>

Answer 1

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.

Answer 2

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.