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 am5flow from "@amcharts/amcharts5/flow";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create series
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
sourceIdField: "from",
targetIdField: "to",
valueField: "value",
orientation: "horizontal"
}));
// Configure labels
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/#Labels
series.nodes.labels.template.setAll({
fontSize: "0.85em",
paddingLeft: 20,
paddingRight: 20
});
// Selectively position/rotate labels if they fit within node circle
series.nodes.labels.template.adapters.add("x", (x, target) => {
var dataItem = target.dataItem;
if (dataItem) {
if (dataItem.get("circle").get("radius") > 30) {
target.set("centerX", am5.p50);
target.set("rotation", 0);
}
else {
target.set("centerX", 0);
target.set("rotation", 90);
}
}
return x;
});
// Set data
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
series.data.setAll([
{ "from": "Monica", "to": "Rachel", "value": 4 },
{ "from": "Monica", "to": "Chandler", "value": 63 },
{ "from": "Monica", "to": "Ross", "value": 16 },
{ "from": "Monica", "to": "Joey", "value": 9 },
{ "from": "Monica", "to": "Phoebe", "value": 3 },
{ "from": "Monica", "to": "Paul the wine guy", "value": 1 },
{ "from": "Monica", "to": "Mr Geller", "value": 6 },
{ "from": "Monica", "to": "Mrs Geller", "value": 5 },
{ "from": "Monica", "to": "Pete", "value": 10 },
{ "from": "Monica", "to": "Chip", "value": 1 },
{ "from": "Monica", "to": "Timothy (Burke)", "value": 1 },
{ "from": "Monica", "to": "Emily", "value": 1 },
{ "from": "Monica", "to": "Dr. Roger", "value": 3 },
{ "from": "Rachel", "to": "Chandler", "value": 7 },
{ "from": "Rachel", "to": "Ross", "value": 80 },
{ "from": "Rachel", "to": "Joey", "value": 30 },
{ "from": "Rachel", "to": "Phoebe", "value": 6 },
{ "from": "Rachel", "to": "Tag", "value": 4 },
{ "from": "Rachel", "to": "Melissa", "value": 1 },
{ "from": "Rachel", "to": "Gavin", "value": 2 },
{ "from": "Chandler", "to": "Joey", "value": 1 },
{ "from": "Chandler", "to": "Phoebe", "value": 7 },
{ "from": "Chandler", "to": "Janice", "value": 11 },
{ "from": "Chandler", "to": "Joanna", "value": 5 },
{ "from": "Chandler", "to": "Kathy", "value": 7 },
{ "from": "Chandler", "to": "Mr Bing", "value": 1 },
{ "from": "Ross", "to": "Joey", "value": 3 },
{ "from": "Ross", "to": "Phoebe", "value": 18 },
{ "from": "Ross", "to": "Carol", "value": 10 },
{ "from": "Ross", "to": "Mrs Geller", "value": 8 },
{ "from": "Ross", "to": "Ben", "value": 6 },
{ "from": "Ross", "to": "Emily", "value": 12 },
{ "from": "Ross", "to": "Jill", "value": 1 },
{ "from": "Ross", "to": "Elizabeth", "value": 8 },
{ "from": "Ross", "to": "Aunt Millie", "value": 2 },
{ "from": "Ross", "to": "Mona", "value": 11 },
{ "from": "Ross", "to": "Emma", "value": 7 },
{ "from": "Ross", "to": "Charlie", "value": 10 },
{ "from": "Joey", "to": "Phoebe", "value": 6 },
{ "from": "Joey", "to": "Janine", "value": 9 },
{ "from": "Joey", "to": "Erin", "value": 1 },
{ "from": "Joey", "to": "Cecilia", "value": 3 },
{ "from": "Joey", "to": "Charlie", "value": 3 },
{ "from": "Phoebe", "to": "David", "value": 14 },
{ "from": "Phoebe", "to": "Roger", "value": 1 },
{ "from": "Phoebe", "to": "Duncan", "value": 1 },
{ "from": "Phoebe", "to": "Rob Dohnen", "value": 2 },
{ "from": "Phoebe", "to": "Sergei", "value": 1 },
{ "from": "Phoebe", "to": "Vince", "value": 2 },
{ "from": "Phoebe", "to": "Mike", "value": 18 },
{ "from": "Carol", "to": "Ben", "value": 1 },
{ "from": "Carol", "to": "Susan", "value": 1 },
{ "from": "Mr Geller", "to": "Mrs Geller", "value": 3 },
{ "from": "Frank", "to": "Alice", "value": 5 }
]);
// Make stuff animate on load
series.appear(1000, 100);