The length of the lines is the more troubling issue. I think I'm looking for instruction in using <line-height> or .google-visualization-orgchart-linenode?
Masheika On Thursday, May 19, 2016 at 1:56:17 PM UTC-7, Masheika Allen wrote: > > I've drafted an org chart but it contains a lot of white space. The lines > between the nodes are noticeably long. I'd like to shorten them but don't > know how. Also, the chart would look a bit neater if the boxes were > shorter and wider. Is there any way to manipulate the size and shape of > the boxes? > > Here's a sample of my code: > > <html> > <head> > <script type="text/javascript" src=" > https://www.gstatic.com/charts/loader.js";></script> > <script type="text/javascript"> > google.charts.load('current', {packages:["orgchart"]}); > google.charts.setOnLoadCallback(drawChart); > > function drawChart() { > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Name'); > data.addColumn('string', 'Manager'); > data.addColumn('string', 'ToolTip'); > > // For each orgchart box, provide the name, manager, and tooltip > to show. > data.addRows([ > [{v:'RL', f:'RNDL'}, > '', ''], > [{v:'Mgr', f:'<a href="https://"; target="_blank">NDM</a>'}, > 'RL', ''], > [{v:'PML', f:'<a href="https://"; target="_blank">PML</a>'}, > 'Mgr', ''], > [{v:'PM', f:'<a href="https:// target="_blank">PM</a>'}, 'PML', > ''], > ['SPM', 'PM', ''], > ['<a href="https://"; target="_blank">ADM</a>', 'SPM', ''], > [{v:'FOM', f:'<a href="https://"; target="_blank">MOM</a>'}, > 'Mgr', ''], > [{v:'MCC', f:'<a href="https://"; target="_blank">MCC</a>'}, > 'FOM', ''], > [{v:'MCM', f:'<a href="https://"_blank";>MCM</a>'}, 'MCC', ''], > ['<a href="https://"_blank";>FDM</a>', 'MCM', ''], > [{v:'CL', f:'<a href="https://"; target="_blank">CL</a>'}, > 'Mgr', ''], > [{v:'CM', f:'<a href="https://"_blank";>CM</a>'}, 'CL', ''], > [{v:'DM', f:'<a href="https://"; target="_blank">DM</a>'}, 'CM', > ''], > ['FM, 'DM', ''] > ]); > > var chart = new > google.visualization.OrgChart(document.getElementById('chart_div')); > > chart.draw(data, {allowHtml:true}); > } > </script> > <style> > table{ > border-collapse: separate !important; > } > </style> > </head> > <body> > <div id="chart_div"></div> > </body> > </html> > > > The <style> info was added to get rid of the blue lead lines that were > rendering in error. I've read a bit about possibly using the "chart_div" > to style the nodes? But I don't know how that would work (what it would > look like). > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/60a44d12-2611-47c8-a555-75b63c892bfd%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
