Graph Demo 2

HPCC Platform Graph Widget - Using any widget as a vertex.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .topcorner {
            position: absolute;
            top: 8px;
            right: 8px;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <script src="https://viz.hpccsystems.com/v1.12.2/dist-amd/hpcc-viz.js"></script>
</head>
<body>
    <div id="placeholder" style="width:100%; height:100vh; z-index:100"></div>
    <span class="topcorner">
        <select id="layout" onchange="doLayout()">
            <option value="Hierarchy">Hierarchy</option>
            <option value="ForceDirected">Force Directed</option>
            <option value="ForceDirected2">Spring</option>
            <option value="Circle">Cirlce</option>
        </select>
        <select id="scale" onchange="doScale()">
            <option value="all">All</option>
            <option value="selection">Selection</option>
            <option value="width">Width</option>
            <option value="100%">100%</option>
            <option value="90%">90%</option>
            <option value="75%">75%</option>
            <option value="50%">50%</option>
            <option value="25%">25%</option>
            <option value="10%">10%</option>
        </select>
    </span>
    <script>
        var widget;
        require(["src/common/Utility", "src/common/Surface", "src/common/ResizeSurface", "src/common/Text", "src/common/TextBox", "src/common/Shape", "src/common/FAChar", "src/common/Icon", "src/common/List", "src/common/Menu", "src/common/Palette",
            "src/chart/Column",
            "src/graph/Graph", "src/graph/Edge", "src/graph/Vertex"
        ], function (
            Utility, Surface, ResizeSurface, Text, TextBox, Shape, FAChar, Icon, List, Menu, Palette,
            Column,
            Graph, Edge, Vertex) {

var vertices = [
                new Shape().shape("circle").size({ width: 32, height: 32 }),
                new FAChar().char("\uf080"),
                new Icon().shape("circle").faChar("\uf080"),
                new Shape().class("Shape2").shape("rect").size({ width: 32, height: 32 }),
                new Text().text("Multi\nLine\nText"),
                new TextBox().text("Text\nBox"),
                new Vertex().text("Graph\nVertex").faChar("\uf080"),
                new Shape().shape("rect").size({ width: 48, height: 22 }),
                new Text().text("Multi\nLine\nText"),
                new Menu().faChar("\uf0c9").data(["Menu A", "And B", "a longer C"]),
                new ResizeSurface().size({ width: 400, height: 300 }).showTitle(true).title("Resize Me!!!").menu(["aaa", "bbb", "ccc"]).icon_faChar("\uf047").content(new Column().columns(["Location", "Males", "Females", "Total"]).data([["Carlow", "27431", "27181", "54612"], ["Dublin City", "257303", "270309", "527612"], ["Dun Laoghaire-Rathdown", "98567", "107694", "206261"], ["Fingal", "134488", "139503", "273991"], ["South Dublin", "129544", "135661", "265205"], ["Kildare", "104658", "105654", "210312"], ["Kilkenny", "47788", "47631", "95419"], ["Laoighis", "40587", "39972", "80559"], ["Longford", "19649", "19351", "39000"], ["Louth", "60763", "62134", "122897"], ["Meath", "91910", "92225", "184135"], ["Offaly", "38430", "38257", "76687"], ["Westmeath", "42783", "43381", "86164"], ["Wexford", "71909", "73411", "145320"], ["Wicklow", "67542", "69098", "136640"], ["Clare", "58298", "58898", "117196"], ["Cork City", "58812", "60418", "119230"], ["Cork County", "198658", "201144", "399802"], ["Kerry", "72628", "72873", "145502"], ["Limerick City", "27947", "29159", "57106"], ["Limerick County", "67868", "66835", "134703"], ["North Tipperary", "35340", "34982", "70322"], ["South Tipperary", "44244", "44188", "88432"], ["Waterford City", "22921", "23811", "46732"], ["Waterford County", "33543", "33520", "67063"], ["Galway City", "36514", "39015", "75529"], ["Galway County", "88244", "86880", "175124"], ["Leitrim", "16144", "15654", "31798"], ["Mayo", "65420", "65218", "130638"], ["Roscommon", "32353", "31712", "64065"], ["Sligo", "32435", "32958", "65393"], ["Cavan", "37013", "36170", "73183"], ["Donegal", "80523", "80614", "161137"], ["Monaghan", "30441", "30042", "60483"]])),
            ];

var edges = [
                createEdge(vertices[0], vertices[2]), createEdge(vertices[1], vertices[2]),
                createEdge(vertices[3], vertices[5]), createEdge(vertices[4], vertices[5]),
                createEdge(vertices[2], vertices[6]), createEdge(vertices[5], vertices[6], "test label"),
                createEdge(vertices[7], vertices[10]), createEdge(vertices[9], vertices[10]), createEdge(vertices[8], vertices[10])
            ];

widget = new Graph()
                .target("placeholder")
                .data({ vertices: vertices, edges: edges })
                .layout("Hierarchy")
            ;
            doLayout();

function createEdge(source, target, label) {
                return new Edge()
                    .sourceVertex(source)
                    .targetVertex(target)
                    .sourceMarker("circleFoot")
                    .targetMarker("arrowHead")
                    .text(label || "")
                ;
            }
        });

function doLayout() {
            widget
                .layout(document.getElementById("layout").value)
                .render()
            ;
        }

function doScale() {
            widget
                .scale(document.getElementById("scale").value)
                .render()
            ;
        }
    </script>
</body>
</html>

Modified http://viz.hpccsystems.com/v1.12.2/dist-amd/hpcc-viz.js to a secure url

https://viz.hpccsystems.com/v1.12.2/dist-amd/hpcc-viz.js