Live Code Editor

Try it yourself..

School Management System Organization Chart | Try It

Features in This Implementation:

Hierarchical Structure: Clearly shows the relationships between different positions in a school environment.
Tooltips: Provides additional information on hover for clarity on each position's responsibilities.
Click Events: Users can interact with the chart to get more details about each member of the organization.

HTML

CSS

JavaScript

google.charts.load('current', {packages: ["orgchart"]});
        google.charts.setOnLoadCallback(drawChart);

// Updated org chart data for a school management system
        const orgChartData = [
            {name: 'Dr. Smith', position: 'Principal', tooltip: 'The Principal', reportsTo: ''},
            {name: 'Mr. Johnson', position: 'Vice Principal', tooltip: 'Vice Principal', reportsTo: 'Dr. Smith'},
            {name: 'Mrs. Lee', position: 'Head of Curriculum', tooltip: 'Head of Curriculum Development', reportsTo: 'Mr. Johnson'},
            {name: 'Mr. Patel', position: 'Head of Science', tooltip: 'Head of Science Department', reportsTo: 'Mrs. Lee'},
            {name: 'Mrs. Davis', position: 'Head of Mathematics', tooltip: 'Head of Mathematics Department', reportsTo: 'Mrs. Lee'},
            {name: 'Mr. Thompson', position: 'Head of Arts', tooltip: 'Head of Arts Department', reportsTo: 'Mrs. Lee'},
            {name: 'Ms. Garcia', position: 'Teacher', tooltip: 'Science Teacher', reportsTo: 'Mr. Patel'},
            {name: 'Mr. Brown', position: 'Teacher', tooltip: 'Mathematics Teacher', reportsTo: 'Mrs. Davis'},
            {name: 'Ms. White', position: 'Teacher', tooltip: 'Art Teacher', reportsTo: 'Mr. Thompson'},
            {name: 'Mrs. Miller', position: 'Administrative Assistant', tooltip: 'School Administration', reportsTo: 'Dr. Smith'},
            {name: 'Mr. Wilson', position: 'Counselor', tooltip: 'Student Counselor', reportsTo: 'Dr. Smith'},
            {name: 'Ms. Martinez', position: 'Librarian', tooltip: 'School Librarian', reportsTo: 'Dr. Smith'},
            {name: 'Mr. Taylor', position: 'Sports Coordinator', tooltip: 'Coordinates Sports Activities', reportsTo: 'Dr. Smith'}
        ];

function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

// Prepare data for the chart
            orgChartData.forEach(function(item) {
                const name = item.name;
                const position = item.position;
                const tooltip = item.tooltip;
                const manager = item.reportsTo;

data.addRow([
                    {'v': name, 'f': `${name}<div style="color:red; font-style:italic">${position}</div>`},
                    manager,
                    tooltip
                ]);
            });

var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, {allowHtml: true, size: 'medium'});

// Add click event listener
            google.visualization.events.addListener(chart, 'select', function() {
                const selectedItem = chart.getSelection()[0];
                if (selectedItem) {
                    const selectedName = data.getValue(selectedItem.row, 0);
                    const selectedTooltip = data.getValue(selectedItem.row, 2);
                    alert(`Selected: ${selectedName}\nInfo: ${selectedTooltip}`);
                }
            });
        }

Live Code Editor

School Management System Organization Chart | Try It

Features in This Implementation:

HTML

CSS

JavaScript

Output