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.
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.