Font Size:

eChart Tree Chart

Introduction

In this article, we will share how to create an eChart "Tree" chart to display data.

How does it work?

Prerequisites

The Tree Chart displays data intended to be fed into eChart; thus, Nested Datalist Formatter is used as a structure.

Create a Form containing a Form Grid to populate the data.
Create Nested Datalist Formatter to display the data.

Creating an eChart Tree Chart

Create an additional Form and follow the steps below:

In Form Builder, add a Custom HTML form element to the form.

Select the Custom HTML to open the element's Properties pane. In the Custom HTML property, enter the following script as shown in the picture below:

<div id="container" style="min-height: 800px; max-width: 90%; position: relative;"></div>
 
<!-- ECharts library -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
 
<script>
// Get data from Joget Datalist
var rawData = #datalist.json.list_robots#;
 
// Combine all Robots arrays into one flat list
var allRobots = [];
rawData.forEach(function(entry) {
    if (entry.Robots && Array.isArray(entry.Robots)) {
        allRobots = allRobots.concat(entry.Robots);
    }
});
 
// Group entries by Name
var nameMap = {};
allRobots.forEach(function(item) {
    if (!nameMap[item.Name]) {
        nameMap[item.Name] = [];
    }
    nameMap[item.Name].push({
        name: item.Category,
        value: item.Value // Value is shown only in tooltip
    });
});
 
// Build children nodes: each Name is a branch with its categories
var robotsChildren = Object.keys(nameMap).map(function(name) {
    return {
        name: name,
        children: nameMap[name]
    };
});
 
// Final tree structure with single Robots root from actual column
var treeData = [
    {
        name: "Robots", // Now this is a single root containing all data
        children: robotsChildren
    }
];
 
// Initialize and render the ECharts tree
var chart = echarts.init(document.getElementById("container"));
 
var option = {
    title: {
        text: "Robots Tree from Merged JSON"
    },
    tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
        formatter: function (params) {
            return params.value ? params.name + ": " + params.value : params.name;
        }
    },
    series: [{
        type: "tree",
        data: treeData,
        top: "1%",
        left: "7%",
        bottom: "1%",
        right: "20%",
        symbolSize: 10,
        label: {
            position: "left",
            verticalAlign: "middle",
            align: "right",
            fontSize: 12
        },
        leaves: {
            label: {
                position: "right",
                verticalAlign: "middle",
                align: "left"
            }
        },
        expandAndCollapse: true,
        emphasis: {
            focus: "descendant"
        },
        animationDuration: 550,
        animationDurationUpdate: 750
    }]
};
 
chart.setOption(option);
</script>

From line 8 to line 44, we are making use of the datalist JSON hash variable to populate the data, and further process the data into the structure recognised by the echart library for the tree chart.
Add another Custom HTML into the form and enter the following script as shown in the picture below. This Custom HTML will display the JSON data.
```
<pre id="debug"></pre>
<script>
    document.getElementById("debug").textContent = JSON.stringify(#datalist.json.list_robots#, null, 2);
</script>
```
Markup
Save and Launch to view the chart.

Expected Outcome

In runtime, you can view the data entered into the Nested Datalist Formatter using the Form Grid, which will also display in the Tree Chart and the JSON.