Colouring nodes different colours (green, orange or red)

[Eoin Irwin]

I've recently changed the nodes to images and am looking to change a device's colour based on a percentage. 

This will be done with a Jinja variables. Any ideas? 

{% if device_usage <=50 %}
    <td class="green_zone"> <script>alert('works');</script></td>
{% elif device_usage >50<=80 %}
    <td class="orange_zone"> {{ item }}</td>
{% elif device_usage >80 %}
    <td class="red_zone"> {{ item }}</td>
{% endif %}

    let json = [{
        "adjacencies": {{ json_web | safe }},
        "data": {
            "$color": "#83548B",
            "$type": "switchIMG",
            "$dim": 10
        },
        "id": "{{host}}",
        "name": "{{host}}"
    }];
    //end

    //init RGraph
    let rgraph = new $jit.RGraph({
        //Where to append the visualization
        injectInto: 'infovis',
        //Set Node and Edge styles.
        Node: {
            color: '#ddeeff',
            type: 'switchIMG'
        },

        Edge: {
            color: '#23A4FF',
            lineWidth: 1.6,
            type: 'line'
        },

        //Add Tips
        Tips: {
            enable: true,
            onShow: function (tip, node) {
                //count connections
                var count = 0;
                node.eachAdjacency(function () {
                    count++;
                });

                //display node info in tooltip
                tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" + "<div class=\"tip-text\">" +
                    "<br><b>Location:</b> " + "{{ switch_loc | safe }}" +
                    "<br><br><b>Subnet:</b>" + "{{ switch_subnet | safe }}" +
                    "<br><br><b>Connections:</b>" + count + "</div>";

            }
        },

        //Add the name of the node in the correponding label
        //and a click handler to move the graph.
        //This method is called once, on label creation.
        onCreateLabel: function (domElement, node) {
            domElement.innerHTML = node.name;
            domElement.onclick = function () {
                myfunco(node.name);
            };
        },
        //Change some label dom properties.
        //This method is called each time a label is plotted.
        onPlaceLabel: function (domElement, node) {
            let style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontWeight = '900';
            style.fontStyle = 'Roboto';
            style.position = 'absolute';

            if (node._depth <= 1) {
                style.fontSize = "0.8em";
                style.color = "#222";

            } else if (node._depth == 2) {
                style.fontSize = "0.8em";
                style.color = "#222";

            } else {
                style.display = 'none';
            }

            let left = parseInt(style.left);
            let top = parseInt(style.top);
            let w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
            style.top = (top + 18) + 'px';

        }
    });
    //load JSON data
    rgraph.loadJSON(json);
    //trigger small animation
    rgraph.graph.eachNode(function (n) {
        let pos = n.getPos();
        pos.setc(-200, -200);
    });
    rgraph.compute('end');
    rgraph.fx.animate({
        modes: ['polar'],
        duration: 2000
    });
    //end
    //append information about the root relations in the right column


    $jit.RGraph.Plot.NodeTypes.implement({
        'switchIMG': {
            'img': "{{url_for('static', filename='img/switchh.png')}}",
            'render': function (node, canvas) {
                let ctx = (typeof canvas.getCtx == "function" ? canvas
                        .getCtx() :
                    canvas.getContext("2d"));
                let img = new Image();
                img.src = "{{url_for('static', filename='img/switchh.png')}}";
                let pos = node.pos.getc(true);
                ctx.drawImage(img, pos.x - (img.width / 2),
                    pos.y - (img.height / 2));
            },
            'contains': function (node, pos) {
                return false;
            }
        }
    });


    $jit.Graph.Util.eachNode(rgraph.graph, function (test) {
        test.data.$type = "switchIMG";
    });
}