A few questions

[naveganth]

My work so far

1. How to make it so the camera is free and doesn't center on nodes?

2. How to make the text increase the size of the node according to text?

3. How to make a field_0 show only the first two names of a person and not show elipsis?

4. How to make a complex layout like in the image bellow? (In the node SGP In the first image)

5. How to make all the "groups" minimized by default like this:

6. How to make the lines coming from "secretaria" round?

The code:

OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;
OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ula);
OrgChart.templates.group.min = Object.assign({}, OrgChart.templates.group);

OrgChart.templates.myTemplate.field_0 = "<text " + OrgChart.attr.width + '="150" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 14px; text-anchor: left;" fill="#ffffff" x="90" y="45">{val}</text>';
OrgChart.templates.myTemplate.field_1 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="60">{val}</text>';
OrgChart.templates.myTemplate.field_2 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="75">{val}</text>';
OrgChart.templates.myTemplate.field_3 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="91" y="90">{val}</text>';

OrgChart.templates.myTemplate.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#002580" stroke-width="1" stroke="#aeaeae"></rect><line x1="0" y1="0" x2="250" y2="0" stroke-width="5" stroke="#00994c"></line>';
OrgChart.templates.myTemplate.img_0 = '<clipPath id="{randId}"><rect width="90" height="119.5"></rect></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="0.5" y="1" width="80" height="120"></image>';
OrgChart.templates.myTemplate.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" ' + OrgChart.attr.control_node_menu_id + '="{id}"><rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#ffffff"></circle><circle cx="7" cy="0" r="2" fill="#ffffff"></circle><circle cx="14" cy="0" r="2" fill="#ffffff"></circle></g>'

//configuração group
OrgChart.templates.group.min.field_0 = '<text data-width="300" data-text-overflow="multiline" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 24px;" fill="#000000" x="125" y="60" text-anchor="middle">{val}</text>';
OrgChart.templates.group.min.node = '<rect rx="20" ry="20" x="0" y="0" height="{h}" width="{w}" fill="#f2f2f2" stroke-width="0" anchor="middle"></rect>';

OrgChart.templates.group.nodeMenuButton = '';
OrgChart.templates.group.field_0 = "<text " + OrgChart.attr.width + '="700" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 24px;" fill="#000000" x="{cw}" y="30" text-anchor="middle">{val}</text>'

//Alterar Tamanho da bolinha do assistencia
OrgChart.templates.split.node = '<circle cx="5" cy="5" r="5" fill="none" stroke-width="2" stroke="#000000"></circle>',

    //Alterar a largura e cor da linha
    OrgChart.templates.myTemplate.link = '<path stroke-linejoin="round" stroke="#000000" stroke-width="2px" fill="none" d="{rounded}" />';
OrgChart.templates.group.link = '<path stroke-linejoin="round" stroke="#000000" stroke-width="2px" fill="none" d="{rounded}"/>';

//Node preto 
OrgChart.templates.darkGrey = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.darkGrey.size = [250, 50];
OrgChart.templates.darkGrey.node = '<rect x="0" y="0" height="50" width="{w}" fill="#aeaeae"  rx="7" ry="7"></rect>';
OrgChart.templates.darkGrey.field_0 = "<text " + OrgChart.attr.width + '="145" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 16px; text-anchor: middle;" fill="#ffffff" x="125" y="25">{val}</text>';

OrgChart.SEARCH_PLACEHOLDER = "Procurar Servidores/Secretarias";
OrgChart.templates.myTemplate.editFormHeaderColor = '#002580';

//Alterar Cantos redondos

var chart = new OrgChart(document.getElementById("tree"), {
    template: "myTemplate",
    enableSearch: true,
    assistantSeparation: 200,

    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" },
        json: { text: "Export JSON" }
    },

    nodeMenu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        details: { text: "Details" },
        edit: { text: "Edit" },
        add: { text: "Add" },
        remove: { text: "Remove" }
    },

    nodeBinding: {
        field_0: "Nome",
        field_1: "Cargo",
        img_0: "Imagem",
        field_2: "Cargo 2",
        field_3: "Matricula",
    },

    tags: {
        "assistant": {
            template: "ula"
        },
        "g": {
            template: "group",
        },
        "sl0": { subLevels: 0, }, "sl1": { subLevels: 1 }, "sl2": { subLevels: 2 }, "sl3": {
            subLevels: 3
        },
        "darkGrey": {
            template: "darkGrey"
        },
    },
});

chart.load([
    { id: 0, tags: ["g"], Nome: "SECRETARIA GERAL", min: true },
    {
        "id": 0.1,
        "stpid": 0,
        "Nome": "Veridiano Ferreira Colares",
        "min": "true",

    },

    {
        "id": 0.2,
        "pid": 0.1,
        "Nome": "Francys da Silva Campos",
        "Matricula": "19.950",
        "min": ""
    },

    { id: 2, pid: 0, Nome: "GABINETE DA SECRETARIA GERAL", tags: ["g", 'assistant'] },

    {
        "id": 2.1,
        "stpid": 2,
        "Nome": "Telma do Socorro Goes Parente",
        "Matricula": "45.423",
        "min": ""
    },
    {
        "id": 2.11,
        "pid": 2.1,
        "Cargo 2": "",
        "Matricula": "981",
        "min": ""
    },
    {
        "id": 2.12,
        "pid": 2.1,
        "Nome": "Erika Costa Figueira Batista",
        "Matricula": "40.257",
        "min": ""
    },
    {
        "id": 2.13,
        "pid": 2.1,
        "Nome": "Claudia Cristina Serra dos Santos",
        "Matricula": "26.153",
        "min": ""
    },

    { id: 2.2, pid: 2, tags: ['g'], Nome: "2.2" },

    { id: 2.21, stpid: 2.2, tags: ["darkGrey"], Nome: "2.21", },
    { id: 2.211, pid: 2.21, Nome: "2.211", },
    { id: 2.22, stpid: 2.2, tags: ["darkGrey"], Nome: "2.22", },
    { id: 2.221, pid: 2.22, Nome: "2.221", },
    { id: 2.23, stpid: 2.2, tags: ["darkGrey"], Nome: "2.23", },
    { id: 2.231, pid: 2.23, Nome: "2.231", },

    { id: 3, pid: 0, tags: ["g"], Nome: "SGP" },
    { id: 3.1, stpid:3, Nome: "Eslayne"},
    { id: 3.2, stpid:3, Nome: "Glenda"},
    { id: 3.3, stpid:3, Nome: "Jorge Cardoso"},
    { id: 3.4, stpid:3, Nome: "Alessandro Domont"},
    { id: 3.5, stpid:3, Nome: "Diego Franca"},
    { id: 3.6, stpid:3, Nome: "Diana"},
    { id: 4, pid: 0, tags: ["g"], Nome: "SEFIN" },

    { id: 5, pid: 0, tags: ["g"], Nome: "STI" },

    { id: 6, pid: 0, tags: ["g"], Nome: "SEGES" },

    { id: 7, pid: 0, tags: ["g"], Nome: "SEPLAN" },

    { id: 8, pid: 0, tags: ["g"], Nome: "SEINF" },

    { id: 9, pid: 0, tags: ["g"], Nome: "SCC" },

    { id: 10, pid: 0, tags: ["g"], Nome: "SECOM" },

    { id: 11, pid: 0, tags: ["g"], Nome: "SGA" },

]);

chart.on('click', function (sender, args) {
    if (args.node.min) {
        sender.maximize(args.node.id);
    }
    else {
        sender.minimize(args.node.id);
    }
    return false;
});

I appreciate any suggestions and corrections.

[ZornitsaPesheva]

1. What do you mean by "camera is free"? Here you can see if the layout doc page can help: https://balkan.app/OrgChartJS/Docs/Layout
2. You can have dynamic width, if this is what you mean: https://code.balkan.app/org-chart-js/dynamic-width#JS
3. Predefine the field and don't add the ellipsis https://balkan.app/OrgChartJS/Docs/PredefinedTemplates - here are the filed definitions https://balkan.app/OrgChartJS/Docs/TextOverflow - here is how the ellipsis are added
4. Not everything in the screenshot is possible, Again layout doc page is what you need: https://balkan.app/OrgChartJS/Docs/Layout
5. Read and try min: true;: https://balkan.app/OrgChartJS/Docs/MinMax
6. Need to predefine the links of the children template: https://balkan.app/OrgChartJS/Docs/Link#curve

Please read the doc pages. They are short and very useful. Please also give us a link to a Code example so the post can be easy readable.

[naveganth]

1. What do you mean by "camera is free"? Here you can see if the layout doc page can help: https://balkan.app/OrgChartJS/Docs/Layout
2. You can have dynamic width, if this is what you mean: https://code.balkan.app/org-chart-js/dynamic-width#JS
3. Predefine the field and don't add the ellipsis https://balkan.app/OrgChartJS/Docs/PredefinedTemplates - here are the filed definitions https://balkan.app/OrgChartJS/Docs/TextOverflow - here is how the ellipsis are added
4. Not everything in the screenshot is possible, Again layout doc page is what you need: https://balkan.app/OrgChartJS/Docs/Layout
5. Read and try min: true;: https://balkan.app/OrgChartJS/Docs/MinMax
6. Need to predefine the links of the children template: https://balkan.app/OrgChartJS/Docs/Link#curve

Please read the doc pages. They are short and very useful. Please also give us a link to a Code example so the post can be easy readable.

Thanks for the help, but I couldn't get the dynamic width to work on a group minimized and maximized node.

3. Predefine the field and don't add the ellipsis

Also I didn't understand how to make it show only the first two fields and not add elipsis.

The rest of the questions I managed to do what i wanted.

Again, thanks for the help, I'm still a newbie when it comes to this library. Code example, as requested.

[ZornitsaPesheva]

Created a code demo for you: https://code.balkan.app/org-chart-js/issue-822#JS

[naveganth]

Created a code demo for you: https://code.balkan.app/org-chart-js/issue-822#JS

Thanks for the response

• A maximized node still doesn't have dynamic width, and how to only show the first two names of a person?

  • 
  • 

Also these are too big:

• Problem:

• How its supossed to be: (They should skip a line if its too big)

• Also text outside the node

• 

For my institution organogram idea, I want all the nodes be collapsed and the person seeing the website clicks on them to open and check for peoples information, ids and etc... So it must be dynamic because on the future i will add even more nodes and people as the organogram gets more complex>

Please check the code demo i did here.

[ZornitsaPesheva]

The width of the maximized group node depends on the nodes in the group. If you'd like to have 2 lines for the name and dynamic width of the minimized node, you should split the name of two data fields before loading the chart. For example for node 7: data1: "SECRETARIA DE PLANEJAMENTO" data2: "GESTÃO ESTRATÉGICA E GOVERNANÇA (SEPLAN)"

[naveganth]

You are very helpful, thanks again, but will that solve the text going outside of the maximized node? and will the width in both lines be dynamically aligned (in the middle) as:

• 

[ZornitsaPesheva]

For the maximized node you should use the text overflow functionality.

[naveganth]

So I've been trying to get the the text inside the maximized node to be the same size as the text but couldn't.

- Expected Result (something like this):

I even tried changing the CSS with:

[data-n-id='0'] rect {
width: 600px;
}

For:

But for some reason the position is fixed and I didn't manage to make the width centered. Can you help me out? Code demo with example.

[naveganth]

For the maximized node you should use the text overflow

functionality.

I tried that too but the text would just be behind the node and not centered too.

Also for some reason when loading into the page some group nodes text overflows a little, until you click them 2 times then it gets right.

- Text overflow:

• 

- How it's supposed to be:

• 

Nevermind managed to fix it:

[ZornitsaPesheva]

Text-overflow: OrgChart.templates.group.field_0 = '<text data-width="230" data-text-overflow="ellipsis" style="font-size: 18px;font-weight:bold;" fill="black" x="10" y="90" text-anchor="start">{val}</text>';

[naveganth]

Text-overflow: OrgChart.templates.group.field_0 = '<text data-width="230" data-text-overflow="ellipsis" style="font-size: 18px;font-weight:bold;" fill="black" x="10" y="90" text-anchor="start">{val}</text>';

Group.field_0 node is supposed to adequate accordingly to the size of the text, and not have ellipsis at the end of the text.

[ZornitsaPesheva]

You are right. My mistake It is by default with ellipsis: ` OrgChart.templates.group.field_0 = ''

• '{val}'; `

[naveganth]

Thanks for the help @ZornitsaPesheva I will be coming with new questions, again. 😁😁😁