@hpcc-js/Visualization

@hpcc-js/graph

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.

Exported Widgets

Stand-alone HTML Example 

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