BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Add to a Mobile Application ​

Learn how to integrate an interactive organizational chart into your mobile app using Android WebView and OrgChart JS. This step-by-step guide shows how to display dynamic team structures with minimal setup.

An organizational chart is a practical way to visualize the structure of a company, team, or project. Whether you are building a business app or an internal enterprise tool, adding an org chart can improve usability and clarity.

What You Need ​

  • Android WebView: A native Android component that displays web content (HTML, CSS, JavaScript) inside your app.
  • OrgChart JS: A lightweight JavaScript library for building interactive organizational charts.

Learn more about Android WebView: Android WebView Documentation

Get started with OrgChart JS: Docs

Step 1: Set Up WebView in Your Android App ​

WebView acts as a container for your chart page.

1a. Add WebView to Your Layout ​

In your layout XML file (for example, activity_main.xml), add:

xml
<WebView
    android:id="@+id/org_chart_webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

1b. Initialize WebView in Your Activity ​

In your Activity class (for example, MainActivity.java), initialize the WebView and enable JavaScript:

java
WebView webView = findViewById(R.id.org_chart_webview);
webView.getSettings().setJavaScriptEnabled(true);

Step 2: Integrate OrgChart JS ​

Now create an HTML page that renders the chart.

2a. Create an HTML File for the Org Chart ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.balkan.app/orgchart.js"></script>
</head>
<body>
    <div id="orgChart"></div>
    <script>
        var chart = new OrgChart(document.getElementById("orgChart"), {
            nodes: [
                { id: 1, name: "CEO", title: "Chief Executive Officer" },
                { id: 2, name: "CTO", title: "Chief Technology Officer", pid: 1 },
                { id: 3, name: "CFO", title: "Chief Financial Officer", pid: 1 },
                { id: 4, name: "Engineer", title: "Senior Engineer", pid: 2 }
            ]
        });
    </script>
</body>
</html>

2b. Save and Load the HTML File ​

You can host the HTML remotely or ship it with your app in the assets folder.

Load a local HTML file:

java
webView.loadUrl("file://android_asset/org_chart.html");

Or load HTML from a Base64 string:

java
String unencodedHtml =
    "<html><body>'%23' is the percent code for '#'</body></html>";
String encodedHtml = Base64.encodeToString(
    unencodedHtml.getBytes(),
    Base64.NO_PADDING
);
webView.loadData(encodedHtml, "text/html", "base64");

Step 3: Test Your Application ​

Run the app on different devices and screen sizes to verify that the chart loads and behaves as expected.

For troubleshooting:

  • Use Android Studio debugging tools for WebView integration issues.
  • Inspect your HTML and JavaScript logic if the chart does not render.
  • Verify internet access when loading OrgChart JS from a CDN.

Conclusion ​

Integrating OrgChart JS into a mobile app with Android WebView is straightforward and flexible.

Whether you load a local HTML file or remote content, this approach helps you embed rich, interactive organizational charts directly into your native Android experience.