Skip to content

Instantly share code, notes, and snippets.

@GordonSmith

GordonSmith/README.md

Last active April 13, 2016 10:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GordonSmith/a860193f86877538f2bd1dbebbfc6281 to your computer and use it in GitHub Desktop.
Save GordonSmith/a860193f86877538f2bd1dbebbfc6281 to your computer and use it in GitHub Desktop.
Download ZIP
Graph Demo 2
Raw
README.md

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

Raw
index.html
<!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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment