Auras on dark theme
Network chart on dark theme and with Auras that visually distinguish node groups. Nodes with matching 'aura' values in 'data' are grouped in the same aura. Auras can be configured using 'auras' object, and each aura group can have separate 'style' properties. Dark theme enabled with "theme: NetChart.themes.dark".
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var chart = new NetChart({
container: document.getElementById("demo"),
area: {
height: null,
style: { fillColor: "rgba(14,33,40,0.9)" }
},
auras: {
cellSize: 10,
overlap: true,
enabled: true,
defaultStyle: {
showInLegend: true,
shadowBlur: 35
},
style: {
"Sales": {
fillColor: "rgba(254,248,17,0.6)",
shadowColor: "rgba(254,248,17,0.6)",
},
"Administration": {
fillColor: "rgba(53,135,136,0.3)",
shadowColor: "rgba(53,135,136,0.7)",
},
"Board": {
fillColor: "rgba(111,82,184,0.6)",
shadowColor: "rgba(111,82,184,0.6)",
},
"HR": {
fillColor: "rgba(38,164,182,0.7)",
shadowColor: "rgba(38,164,182,0.7)",
},
"IT": {
fillColor: "rgba(39,156,254,0.7)",
shadowColor: "rgba(39,156,254,0.7)",
},
"Accounting": {
fillColor: "rgba(255,255,255,0.8)",
shadowColor: "rgba(255,255,255,0.8)",
},
"Marketing": {
fillColor: "rgba(176,220,11,0.3)",
shadowColor: "rgba(176,220,11,0.3)",
}
}
},
data: {
url: "/dvsl/data/net-chart/friend-net-auras.json"
},
style: {
nodeStyleFunction: function(node) {
node.aura = node.data.auras;
node.image = "/dvsl/data/net-chart/friend-net/" + node.id + ".png";
},
node: {
radius: 30,
imageCropping: true,
shadowBlur: 15,
shadowColor: "#262626",
fillColor: "rgba(44,233,233,0.8)"
},
nodeHovered: {
shadowColor: "white",
shadowBlur: 15,
},
nodeSelected: {
lineColor: null
},
selection: {
fillColor: null,
lineColor: null
},
nodeFocused: {
fillColor: "white",
lineColor: null,
shadowColor: "white",
shadowBlur: 10
}
},
legend: {
enabled: true,
padding: 6,
marker: { size: 22 },
maxLineSymbols: 12
},
navigation: { initialNodes: ["m-1"] },
theme: NetChart.themes.dark
});
Data
Data
Download Data
{
"nodes": [
{
"id": "m-1",
"age": 20,
"name": "Joe",
"loaded": true,
"auras": [
"HR",
"Sales"
]
},
{
"id": "m-2",
"age": 15,
"name": "Fred",
"loaded": true,
"auras": [
"Sales",
"HR"
]
},
{
"id": "m-3",
"age": 16,
"name": "Tom",
"loaded": true,
"auras": "Board"
},
{
"id": "m-4",
"age": 35,
"name": "Robert",
"loaded": true,
"auras": "Sales"
},
{
"id": "m-5",
"age": 38,
"name": "Mark",
"loaded": true,
"auras": [
"Board",
"Administration"
]
},
{
"id": "m-6",
"age": 42,
"name": "Jason",
"loaded": true,
"auras": [
"Administration",
"Marketing"
]
},
{
"id": "m-7",
"age": 37,
"name": "Bill",
"loaded": true,
"auras": [
"Accounting"
]
},
{
"id": "m-8",
"age": 60,
"name": "Andre",
"loaded": true,
"auras": [
"Accounting"
]
},
{
"id": "m-9",
"age": 63,
"name": "Daniel",
"loaded": true,
"auras": [
"Accounting",
"IT"
]
},
{
"id": "m-10",
"age": 17,
"name": "Thomas",
"loaded": true,
"auras": "IT"
},
{
"id": "m-11",
"age": 21,
"name": "Sergejs",
"loaded": true,
"auras": "IT"
},
{
"id": "m-12",
"age": 26,
"name": "Bryon",
"loaded": true,
"auras": ""
},
{
"id": "m-13",
"age": 29,
"name": "Toby",
"loaded": true,
"auras": "Administration"
},
{
"id": "f-1",
"age": 28,
"name": "Anna",
"loaded": true,
"auras": "HR"
},
{
"id": "f-2",
"age": 21,
"name": "Wendy",
"loaded": true,
"auras": [
"HR",
"Sales"
]
},
{
"id": "f-3",
"age": 17,
"name": "Dina",
"loaded": true,
"auras": "HR"
},
{
"id": "f-4",
"age": 26,
"name": "Cate",
"loaded": true,
"auras": "Board"
}
],
"links": [
{
"id": "l01",
"from": "m-1",
"to": "f-1",
"type": "friend"
},
{
"id": "l02",
"from": "m-1",
"to": "f-2",
"type": "friend"
},
{
"id": "l03",
"from": "m-1",
"to": "f-3",
"type": "friend"
},
{
"id": "l04",
"from": "m-1",
"to": "f-4",
"type": "friend"
},
{
"id": "l07",
"from": "m-2",
"to": "f-2",
"type": "collegue"
},
{
"id": "l15",
"from": "m-3",
"to": "f-4",
"type": "friend"
},
{
"id": "l23",
"from": "m-5",
"to": "f-4",
"type": "collegue"
},
{
"id": "l28",
"from": "m-5",
"to": "m-6",
"type": "friend"
},
{
"id": "l29",
"from": "m-6",
"to": "m-7",
"type": "friend"
},
{
"id": "l30",
"from": "m-7",
"to": "m-8",
"type": "friend"
},
{
"id": "l31",
"from": "m-8",
"to": "m-9",
"type": "friend"
},
{
"id": "l32",
"from": "m-9",
"to": "m-10",
"type": "friend"
},
{
"id": "l33",
"from": "m-10",
"to": "m-11",
"type": "friend"
},
{
"id": "l34",
"from": "m-11",
"to": "m-12",
"type": "friend"
},
{
"id": "l35",
"from": "m-12",
"to": "m-13",
"type": "friend"
},
{
"id": "l36",
"from": "m-13",
"to": "m-5",
"type": "friend"
},
{
"id": "l106",
"from": "m-7",
"to": "m-9",
"type": "collegue"
},
{
"id": "l141",
"from": "f-2",
"to": "m-4",
"type": "collegue"
}
]
}