Back

Network Graph - drag external elements onto the chart

This network chart example showcases how NetChart can integrate with external HTML elements. Here, dragging a rectangle on a node will call a function that changes the fill color of that node.

Drag one of these colors onto a network node:
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" ondragover="networkDragOver(event)" ondrop="networkDragDrop(event)"></div>
<hr />
<div>
    Drag one of these colors onto a network node:
    <span class="netchart-example-draggable" draggable="true" onselectstart="return colorSelectStart(event, this)" ondragstart="colorDragStart(event, this)" ondragend="colorDragEnd(event)" style="background-color: #09c"></span>
    <span class="netchart-example-draggable" draggable="true" onselectstart="return colorSelectStart(event, this)" ondragstart="colorDragStart(event, this)" ondragend="colorDragEnd(event)" style="background-color: #2fc32f"></span>
    <span class="netchart-example-draggable" draggable="true" onselectstart="return colorSelectStart(event, this)" ondragstart="colorDragStart(event, this)" ondragend="colorDragEnd(event)" style="background-color: #eab404"></span>
</div>

CSS

CSS 
.netchart-example-draggable {
        height: 30px;
        width: 60px;
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        display: inline-block;
        vertical-align: middle;
        cursor: -webkit-grab;
        cursor: grab;
    }
    .netchart-example-draggable:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

JavaScript

JavaScript 

    // note that the chart container has `ondragover` and `ondrop` event handlers registered
    // and the draggable items have `onselectstart`, `ondragstart` and `ondragend`.
    
    /** The node on which the mouse cursor is currently hovering. */
    var currentHoverNode = null;
    var draggedColor = null;
    var nodeColorMap = {};

    function colorSelectStart(event, elem) {
        // workaround to enable drag-n-drop in IE9: http://stackoverflow.com/q/5500615/1711598
        if (elem.dragDrop) {
            elem.dragDrop();
        }

        return false;
    }

    function colorDragStart(event, elem) {
        // cannot use `event.dataTransfer.setData`: http://stackoverflow.com/a/11959389/1711598
        draggedColor = elem.style.backgroundColor;

        // but it is needed for Firefox otherwise draggin does not start.
        event.dataTransfer.setData("text", draggedColor);
    }

    function colorDragEnd(event) {
        draggedColor = null;
    }

    function networkDragOver(event) {
        if (draggedColor && currentHoverNode) {
            // this instructs the browser to allow the drop
            event.preventDefault();
        }
    }

    function networkDragDrop(event) {
        if (draggedColor && currentHoverNode) {
            nodeColorMap[currentHoverNode.id] = draggedColor;
            t.updateStyle();
        }

        event.preventDefault();
    }

    function networkHoverChanged(event) {
        currentHoverNode = event.hoverNode;
    }

    function networkNodeStyleFunction(node) {
        var color = nodeColorMap[node.id];
        if (color)
            node.fillColor = color;
    }

    var data = {
        "nodes": [
            { "id": "n1", "loaded": true, "style": { "label": "Node1" } },
            { "id": "n2", "loaded": true, "style": { "label": "Node2" } },
            { "id": "n3", "loaded": true, "style": { "label": "Node3" } }
        ],
        "links": [
            { "id": "l1", "from": "n1", "to": "n2" },
            { "id": "l2", "from": "n2", "to": "n3" },
            { "id": "l3", "from": "n3", "to": "n1" }
        ]
    };

    var t = new NetChart({
        container: "demo",
        data: { preloaded: data },
        style: { nodeStyleFunction: networkNodeStyleFunction },
        events: { onHoverChange: networkHoverChanged }
    });

Data

Data 
//No separate data for this example