Back

NetChart with data URL

JavaScript network chart that loads data from a URL - in this example, a JSON file. NetChart also easily integrates with MongoDB, Neo4J and other data sources - read more in the 'Integrations' section of our website.

Documentation Open in JSFiddle
Start Free Trial Purchase

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 t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { url: "/dvsl/data/net-chart/basic-example.json" }
    });

Data

Data 
{
    "nodes": [
        {
            "id": "n1",
            "loaded": true,
            "style": {
                "fillColor": "rgba(236,46,46,0.8)",
                "label": "Node1"
            }
        },
        {
            "id": "n2",
            "loaded": true,
            "style": {
                "fillColor": "rgba(47,195,47,0.8)",
                "label": "Node2"
            }
        },
        {
            "id": "n3",
            "loaded": true,
            "style": {
                "fillColor": "rgba(28,124,213,0.8)",
                "label": "Node3"
            }
        }
    ],
    "links": [
        {
            "id": "l1",
            "from": "n1",
            "to": "n2",
            "style": {
                "fillColor": "rgba(236,46,46,1)",
                "toDecoration": "arrow"
            }
        },
        {
            "id": "l2",
            "from": "n2",
            "to": "n3",
            "style": {
                "fillColor": "rgba(47,195,47,1)",
                "toDecoration": "arrow"
            }
        },
        {
            "id": "l3",
            "from": "n3",
            "to": "n1",
            "style": {
                "fillColor": "rgba(28,124,213,1)",
                "toDecoration": "arrow"
            }
        }
    ]
}
Download Data