Public
Edited
May 8
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/gviz/tq?tqx=out:csv');
query.send(function(response) {
const data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
const rows = response.getDataTable().getFilteredRows([]);
const statusMap = {}; // store status for color
for (let i = 0; i < response.getDataTable().getNumberOfRows(); i++) {
let name = response.getDataTable().getValue(i, 1);
let parentId = response.getDataTable().getValue(i, 2);
let status = response.getDataTable().getValue(i, 3);
let supervisor = "";
for (let j = 0; j < response.getDataTable().getNumberOfRows(); j++) {
if (response.getDataTable().getValue(j, 0) == parentId) {
supervisor = response.getDataTable().getValue(j, 1);
}
}
let color = status === 'Active' ? '#A9DFBF' : (status === 'On Leave' ? '#F9E79F' : '#E6B0AA');
let content = `<div style="background-color:${color};padding:10px;border-radius:5px">${name}</div>`;
data.addRow([{v: name, f: content}, supervisor, status]);
}
const chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
});
}
</script>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
