This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.
<html>
<head>
<title>Simple Graph</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://unpkg.com/@hpcc-js/util"></script>
<script src="https://unpkg.com/@hpcc-js/common"></script>
<script src="https://unpkg.com/@hpcc-js/api"></script>
<script src="https://unpkg.com/@hpcc-js/graph"></script>
</head>
<body>
<div id="placeholder" style="width:400px;height:400px;"></div>
<script>
var verts = [
{ "name": "John Doe", "icon": "" },
{ "name": "Jane Doe", "icon": "" },
{ "name": "123 Main Street", "icon": "", "centroid": true }
].map(node=>{
return new window["@hpcc-js/graph"].Vertex()
.text(node.name)
.faChar(node.icon)
;
});
var chart = new window["@hpcc-js/graph"].Graph()
.target("placeholder")
.layout("Circle")
.data({
vertices: verts,
edges: [
new window["@hpcc-js/graph"].Edge().sourceVertex(verts[2]).targetVertex(verts[0]),
new window["@hpcc-js/graph"].Edge().sourceVertex(verts[2]).targetVertex(verts[1]),
]
})
.render();
console.log("Other layout options:",chart.__meta_layout.set);
</script>
</body>
</html> const vertices = [
{
id: 0,
text: "JAKE MCKEE",
centroid: true,
icon: {
imageChar: ""
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(10, 15, -5),
dAnno(15, -4),
exclamationAnno(15, -4),
]
},
{
id: 1,
text: "123 Main St",
icon: {
imageChar: "",
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(13,5,-1),
exclamationAnno(),
]
},
{
id: 2,
text: "555-55-5555",
icon: {
imageChar: "",
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(8,5,-1),
exclamationAnno(),
]
},
{
id: 3,
text: "Jmckee@gmail.com",
icon: {
imageChar: ""
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(5,5,-1),
exclamationAnno(),
]
},
{
id: 4,
text: "303-123-1234",
icon: {
imageChar: ""
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(5,5,-1),
checkmarkAnno(),
]
},
{
id: 5,
text: "123039923",
icon: {
imageChar: "",
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(5,5,-1),
checkmarkAnno()
]
},
{
id: 6,
text: "FL-2372-3982-9292-2929",
icon: {
imageChar: "",
},
subText: {
text: "03/26/2020",
textFill: "#555555"
},
annotationMeta: [
greyAnno(5,5,-1),
checkmarkAnno(),
]
},
{
id: 7,
text: "11.12.3.301.31",
icon: {
imageChar: ""
},
subText: {
text: "03/26/2020",
},
annotationMeta: [
greyAnno(8,5,-1),
exclamationAnno(),
]
},
];
function greyAnno(text, padding = 5, yOffset = -1){
return {
text: text+"",
fill: "#555555",
stroke: "#555555",
textFill: "#ffffff",
padding: padding,
yOffset: yOffset
}
}
function dAnno(){
return {
text: "D",
fill: "#ED1C24",
stroke: "#ED1C24",
textFill: "#ffffff",
fontFamily: "Arial",
padding: 15,
yOffset: -4
};
}
function exclamationAnno(padding, yOffset){
return {
text: "",
fill: "#ED1C24",
stroke: "#ED1C24",
textFill: "#ffffff",
fontFamily: "Arial",
padding: padding,
yOffset: yOffset,
fontFamily: "'Font Awesome 5 Free'",
};
}
function checkmarkAnno(padding, yOffset){
return {
text: "",
fill: "#00802B",
stroke: "#00802B",
textFill: "#ffffff",
fontFamily: "'Font Awesome 5 Free'",
padding: padding,
yOffset: yOffset,
};
}
const graphData = { vertices };
graphData.edges = vertices.slice(1).map((n,i)=>{
return {
id: i,
source: graphData.vertices[0],
target: graphData.vertices[i+1],
}
})
new Graph2()
.target("target")
.centroidRenderer(CentroidVertex3)
.vertexRenderer(Vertex3)
.edgeColor("#287EC4")
.edgeStrokeWidth(2)
.edgeArcDepth(0)
.data(graphData)
.centroidColor("#777777")
.on("vertex_click", (row, col, sel) => console.log("click", row, col, sel))
.on("vertex_dblclick", (row, col, sel) => console.log("dblclick", row, col, sel))
.on("vertex_mousein", (row, col, sel) => console.log("mousein", row, col, sel))
.on("vertex_mouseover", (row, col, sel) => console.log("mouseover", row, col, sel))
.on("vertex_mouseout", (row, col, sel) => console.log("mouseout", row, col, sel))
.forceDirectedAlphaDecay(0.003)
.layout("ForceDirected")
.transitionDuration(0)
.render()
;
</script>