How to implement an organizational chart in android

Question

I want to know how can I implement an organizational chart in Android?

Here is a schema for my layout:

score 1 · Answer 1 · edited Sep 17 '20 at 00:22

I know @Tasos already answer this.
but heres a subclass that i create to help ease the usage

Create a OrganizationChart.java

import android.app.Activity;
import android.util.Log;

public class OrganizationChart {
    private Activity activity;
    private static OrganizationChart instance;
    public String htmlCode = "";
    private OrganizationChart(Activity activity) {
        this.activity = activity;
    }
    public static OrganizationChart getInstance(Activity activity) {
        if (instance == null) {
            instance = new OrganizationChart(activity);

        }
        return instance;
    }
    public void addChildToParent(String Child,String Parent){
        htmlCode += "['"+Child+"', '"+Parent+"', ''],";
    }
    public void addChildToParent(String Child,String ChildFunction,String Parent){
        htmlCode += "[{'v':'"+Child+"', 'f':'Child"+ChildFunction+"'}, '"+Parent+"', ''],";
    }
    public void clearData(String Parent,String Child){
        htmlCode = "";
    }
    public String getChart(){
        Log.d("OrganizationChart","HTML: "+ htmlCode);
        Log.d("OrganizationChart","HTML1: "+ removeLastChar(htmlCode));
        return getTopCode() + removeLastChar(htmlCode) +getBottomCode();
    }
    private String getTopCode(){
        String topCode = "";
        topCode += "<html>";
        topCode += "<head>";
        topCode += "<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>";
        topCode += "<script type=\"text/javascript\">";
        topCode += "google.charts.load('current', {packages:[\"orgchart\"]});";
        topCode += "google.charts.setOnLoadCallback(drawChart);";
        topCode += "function drawChart() {";
        topCode += "var data = new google.visualization.DataTable();";
        topCode += "data.addColumn('string', 'Name');";
        topCode += "data.addColumn('string', 'Manager');";
        topCode += "data.addColumn('string', 'ToolTip');";
        topCode += "data.addRows([";
        return topCode;
    }
    private String getBottomCode(){
        String bottomCode = "";
        bottomCode += "]);";
        bottomCode += "var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));";
        bottomCode += " chart.draw(data, {'allowHtml':true});";
        bottomCode += " }";
        bottomCode += " </script>";
        bottomCode += "</head>";
        bottomCode += "<body>";
        bottomCode += "<div id=\"chart_div\"></div>";
        bottomCode += " </html>";
        return bottomCode;
    }
    private  String removeLastChar(String str) {
        return removeLastChars(str, 1);
    }
    private String removeLastChars(String str, int chars) {
        return str.substring(0, str.length() - chars);
    }

}

Then Simply call it when u want to used it like so:
addChildToParent("child","parent");

    OrganizationChart organizationChart = OrganizationChart.getInstance(this);
    organizationChart.addChildToParent("Jacob","<div style=\\\"color:red; font-style:italic\\\">President</div>","Mike");
    organizationChart.addChildToParent("Jacob1","Mike");
    organizationChart.addChildToParent("Jacob2","Mike");
    organizationChart.addChildToParent("Jacob3","Mike");
    organizationChart.addChildToParent("Calson1","Jacob1");
    organizationChart.addChildToParent("Calson2","Jacob1");
    organizationChart.addChildToParent("Calson3","Jacob1");
    organizationChart.addChildToParent("Calson4","Jacob1");
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadData(organizationChart.getChart(), "text/html", "UTF-8");

OUTPUT

score 1 · Answer 2 · answered Nov 18 '21 at 05:54

1

The library can be used within RecyclerView and currently works with small graphs only.

https://github.com/oss-bandb/GraphView

Above library contains:

Tree layout
Directed graph layout
Layered graph

answered Nov 18 '21 at 05:54

Shahryar Ahmed

197
1
9

score 0 · Answer 3 · answered Jan 03 '16 at 13:56

One posible way is to do it in HTML using google charts and use a WebView to view it in your Android App

https://developers.google.com/chart/interactive/docs/gallery/orgchart?hl=en

Demo

from the above link, click on to see it in action

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:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {allowHtml:true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

How to implement an organizational chart in android

3 Answers3