File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import * as am5 from "@amcharts/amcharts5";
import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
const root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create wrapper container
const container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
const series = container.children.push(am5hierarchy.Tree.new(root, {
singleBranchOnly: false,
downDepth: 1,
initialDepth: 10,
valueField: "value",
categoryField: "name",
childDataField: "children"
}));
// Generate and set data
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
const maxLevels = 3;
const maxNodes = 3;
const maxValue = 100;
const data = {
name: "Root",
children: []
}
generateLevel(data, "", 0);
series.data.setAll([data]);
series.set("selectedDataItem", series.dataItems[0]);
function generateLevel(data, name, level) {
for (let i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
let nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
let child;
if (level < maxLevels) {
child = {
name: nodeName + level
}
if (level > 0 && Math.random() < 0.5) {
child.value = Math.round(Math.random() * maxValue);
}
else {
child.children = [];
generateLevel(child, nodeName + i, level + 1)
}
}
else {
child = {
name: name + i,
value: Math.round(Math.random() * maxValue)
}
}
data.children.push(child);
}
level++;
return data;
}
// Make stuff animate on load
series.appear(1000, 100);