ApexChart - ApexTree

Hi guys, as anyone tried making an Apex Tree chart like this, if yes please kindly share the project file or please guide me to create it. Thank you in advance.
image

I don't believe the ApexTree.js resources you mention are part of the ApexCharts (Kyvis) Ignition module. That looks to be a distinct library on their website.

If that is not the case, I have many use cases for something like this!

@kyvislabs can correct me if I'm wrong

Hello,

I’m currently working on generating a tree chart using the Web Dev module. While I am able to generate the chart successfully using static data, I am encountering difficulties when trying to make the data dynamic by using a Named Query.

I have a script that correctly renders the chart with hardcoded data, but I need to adapt this script to fetch and use dynamic data from a Named Query.

> html = """<!DOCTYPE html>
>     <html>
>       <head>
>         <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
>         <script src="https://cdn.jsdelivr.net/npm/apextree"></script>
>       </head>
>       <body>
>         <div id="svg-tree" style="width: 800px; height: 600px;"></div>
>         <script>
>           document.addEventListener("DOMContentLoaded", function() {
>             const data = {
>               id: 'ms',
>               data: {
>                 imageURL: 'https://i.pravatar.cc/300?img=68',
>                 name: 'Margret Swanson',
>               },
>               options: {
>                 nodeBGColor: '#cdb4db',
>                 nodeBGColorHover: '#cdb4db',
>               },
>               children: [
>                 {
>                   id: 'mh',
>                   data: {
>                     imageURL: 'https://i.pravatar.cc/300?img=69',
>                     name: 'Mark Hudson',
>                   },
>                   options: {
>                     nodeBGColor: '#ffafcc',
>                     nodeBGColorHover: '#ffafcc',
>                   },
>                   children: [
>                     {
>                       id: 'kb',
>                       data: {
>                         imageURL: 'https://i.pravatar.cc/300?img=65',
>                         name: 'Karyn Borbas',
>                       },
>                       options: {
>                         nodeBGColor: '#f8ad9d',
>                         nodeBGColorHover: '#f8ad9d',
>                       },
>                     },
>                     {
>                       id: 'cr',
>                       data: {
>                         imageURL: 'https://i.pravatar.cc/300?img=60',
>                         name: 'Chris Rup',
>                       },
>                       options: {
>                         nodeBGColor: '#c9cba3',
>                         nodeBGColorHover: '#c9cba3',
>                       },
>                     },
>                   ],
>                 },
>                 {
>                   id: 'cs',
>                   data: {
>                     imageURL: 'https://i.pravatar.cc/300?img=59',
>                     name: 'Chris Lysek',
>                   },
>                   options: {
>                     nodeBGColor: '#00afb9',
>                     nodeBGColorHover: '#00afb9',
>                   },
>                   children: [
>                     {
>                       id: 'Noah_Chandler',
>                       data: {
>                         imageURL: 'https://i.pravatar.cc/300?img=57',
>                         name: 'Noah Chandler',
>                       },
>                       options: {
>                         nodeBGColor: '#84a59d',
>                         nodeBGColorHover: '#84a59d',
>                       },
>                     },
>                     {
>                       id: 'Felix_Wagner',
>                       data: {
>                         imageURL: 'https://i.pravatar.cc/300?img=52',
>                         name: 'Felix Wagner',
>                       },
>                       options: {
>                         nodeBGColor: '#0081a7',
>                         nodeBGColorHover: '#0081a7',
>                       },
>                     },
>                   ],
>                 },
>               ],
>             };
> 
>             const options = {
>               contentKey: 'data',
>               width: 800,
>               height: 600,
>               nodeWidth: 150,
>               nodeHeight: 100,
>               fontColor: '#fff',
>               borderColor: '#333',
>               childrenSpacing: 50,
>               siblingSpacing: 20,
>               direction: 'top',
>               nodeTemplate: (content) =>
>                 `<div style='display: flex;flex-direction: column;gap: 10px;justify-content: center;align-items: center;height: 100%;'>
>                 <img style='width: 50px;height: 50px;border-radius: 50%;' src='${content.imageURL}' alt='' />
>                 <div style="font-weight: bold; font-family: Arial; font-size: 14px">${content.name}</div>
>                </div>`,
>               canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
>               enableToolbar: true,
>             };
> 
>             const tree = new ApexTree(document.getElementById('svg-tree'), options);
>             tree.render(data);
>           });
>         </script>
>       </body>
>     </html>"""
>     return {'html': html}

You would need to make this part dynamic. One way you can do this is to query your data from a named query first, transform it and then replace the const data = statement to that dataset. Something like

ds = system.db.runNamedQuery("myQuery", params)
data = path.to.transformation.function(ds)    # you need to get the same format as you have in the example

html = """
blah blah blah

const data = """ + data + """

blah blah blah
"""
return {"html": html}

I know this is pseudo-code, but that is the first way I'd approach this problem.