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>