Info popup

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

//No CSS for this example 

    // take off title
    // change ipop bkg color
    // less height of ipop

    var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { url: "/dvsl/data/net-chart/discovery-example.json" },
        info:{
            enabled: true,
            nodeContentsFunction: function(itemData, item){
                return "<div style='margin:auto; width:200px; height:100%; padding': 10px;>" +
                            "<h3 style='font-weight: 300; font-size: 21px; color: #2f256e; padding-bottom: 3px; margin:0px'>"+ itemData.title +"</h3>" +
                            "<p style='font-size: 13px;font-family: Arial, Helvetica, sans-serif;font-weight: 300;padding:5px'>" + itemData.description + "</p>" +
                       "</div>";
          },
            linkContentsFunction: function(itemData, item){
                //console.log(item);
                return  "<p style='padding-left:5px;padding-right:5px;'>" + " Walking time between " + item.from.data.title + " and " + item.to.data.title + " " + itemData.walkingtime + "</p></div>";
            }
        },
        style:{
            nodeLabel:{
                backgroundStyle:{fillColor:"#93B17F", lineColor:"blue"}
            },
            linkLabel:{
                backgroundStyle:{fillColor:"#93B17F", lineColor:"blue"}
            },
            nodeStyleFunction: nodeStyle,
            link:{fillColor:"#93B17F"}
        }
    });

    function nodeStyle(node){
        node.image = "/dvsl/data/net-chart/discovery-net/n" + node.id.split("n")[1] + ".jpg";
        node.label = node.data.title;
    }

{
    "nodes": [
        {
            "id": "n1",
            "loaded": true,
            "title": "Monument to Rūdolfs Blaumanis",
            "description": "Rūdolf Blaumanis, who was born in Cēsu to a musical family, became one of Latvia's foremost writers and poets."
	},
        {
            "id": "n2",
            "loaded": true,
            "title": "Gutmana Cave",
            "description": "The largest cave in the Baltic countries and also the oldest tourist attraction in Latvia. On the walls of the cave there are inscriptions from the 17th century. The legend of the Rose of Turaida began in this cave."
	},
        {
            "id": "n3",
            "loaded": true,
            "title": "Turaida Castle",
            "description": "Turaida castle dominates the Museum Reserve and is visually, its most impressive element. When seen from the air, or the opposite bank of the river Gauja in Sigulda, Turaida castle[1] rises above the trees like mighty ship built of red brick. The forepart of this imaginative ship is formed by the northern forecastle's gate tower."
        },
        {
            "id": "n4",
            "loaded": true,
            "title": "Devils rock and the cave",
            "description": "The last greatest rock wall of the Gauja valley, 15 m high. 8 m below water level, the Devil’s cave – an ancient place of worship – has formed in the cliff. It is a protected geological object."
        },
        {
            "id": "n5",
            "loaded": true,
            "title": "Natural pathway of Kubesele",
            "description": "It takes you on one-hour trip through nature accompanied by the river Runtiņupīte murmuring along the gravestone of Livonian leader Kaupo. Krimulda Region."
	}
    ],
    "links": [
        {
            "id": "l1",
            "from": "n1",
            "to": "n2",
            "walkingtime": "22 min"
        },
        {
            "id": "l2",
            "from": "n2",
            "to": "n3",
            "walkingtime": "30 min"
        },
        {
            "id": "l3",
            "from": "n3",
            "to": "n1",
            "walkingtime": "50 min"
        },
        {
            "id": "l4",
            "from": "n3",
            "to": "n4",
            "walkingtime": "10 min"
        },
        {
            "id": "l5",
            "from": "n1",
            "to": "n5",
            "walkingtime": "20 min"
        }
    ]
}