Orgachart mit Google Chart Tools erstellen

Orgachart mit Google Chart Tools erstellen

Was ist noch besser als selber das Rad neu zu erfinden? Ein erfundenes Rad zu nehmen und es einfach so ohne großen Ärger nutzen zu können. Da bricht man sich auchnichts aus der Krone, wenn man etwas vorgefertigtes nimmt und es einfach benutzt. Ich mußte neulich eine Funktion erstellen, mit der man die Organisationsstruktur eines wirklich großen Unternehmens für deren Intranet aufbereiten und leserlich darstellen kann. Das einzige Datenmaterial, das für einen automatisierten Workflow zur Verfügung stand war eine XML-Datei, in der die komplette Mitarbeiterstruktur mit der hierarchischen Stellung verknüpft war. Also: Vorstandschef, darunter die übrigen Vorstände, Abteilung 1, Unterabteilung 1, dann alle Mitarbeiter die dieser Unterabteilung zugeordnet sind, dann Unterabteilung 2, alle Mitarbeiter von Unterabteilung 2 usw. Nach einigem Trial and Error mit verschiedenen Ansätzen, von der Ausgabe mit selbstgestrickten Tabellen über CSS-basiertes Design mit unterschiedlichen Klassen für die einzelen hierarchischen Ebenen, fand ich im Netz bei Google Code ein interessant aussehendes Skript das auf den ersten Blick genau das zu können schien, was ich brauchte. Das Skript funktioniert eigentlich ziemlich schlau. Jedes Element bekommt neben dem Inhalt auch eine ID über die Nachdem man das JavaScript von Google auf der eigenen Seite eingebunden hat, ruft man die Chart-Konstruktionsfunktion über ein „OnLoad“ auf und läßt es dann die Arbeit machen. Zunächst wird ein neues Chart angemeldet, dem dann verschiedene Attribute gegeben werden. In meinem kleinen Test-Skript sind dies der Name, welches ein String ist und die ID, über die die Box dann angesprochen werden soll. Als drittes Attribut kommt nun noch die Parent-ID hinzu, also die ID der Box, die wir als übergeordnetes Element zuweisen wollen. Das oberste Element hat dann natürlich keinen Wert im dritten Attribut, die übrigen schon. Jedes Element, das wir nun dem Orgachart hinzufügen, hat eine ID, einen String mit dem Namen und eine Parent ID. <script type=’text/javascript‘ src=’https://www.google.com/jsapi‘></script> <script type=’text/javascript‘> google.load(‚visualization‘, ‚1‘, {packages:[‚orgchart‘]}); google.setOnLoadCallback(drawChartOriginal); function drawChartOriginal() { var data = new google.visualization.DataTable(); data.addColumn(’string‘, ‚Name‘); data.addColumn(’string‘, ‚Manager‘); data.addColumn(’string‘, ‚ToolTip‘); data.addRows([ [{v:’BA‘, f:’Verwaltung‘}, “, “], [{v:’Acc‘, f:’Buchhaltung &amp; Beschaffung‘}, ‚BA‘, “], [‚Einkauf, ‚Acc‘, “], [{v:’ads‘, f:’Administrative Dienste‘}, ‚BA‘, “], [{v:’frp‘, f:’Finanzen‘}, ‚BA‘, “], [{v:’pre‘, f:’Haustechnik‘}, ‚BA‘, “], [‚Immobilienmanagement‘, ‚pre‘,“], [‚Technische Dienste‘, ‚pre‘, “], [{v:’sec‘, f:’Sicherheitsdienst‘}, ‚BA‘, “] ]); var chart = new google.visualization.OrgChart(document.getElementById(‚chart_div‘)); chart.draw(data, {allowHtml:true}); } </script> <div id=’chart_div‘></div>
Google Orgachart

Google Orgachart