RGraph hide line plus labels with a click on key element

Question

So, I have a graph like this:

What I'm trying to achieve is to hide the lines plus the labels with it when I click the key referring that line.

I found this on the docs and I tried doing this:

$(line.canvas).on('click', function (e) //line is the name of the graph of both green and red lines
        {
            var key = RGraph.Registry.get('key-element');
            console.log(key);

            if (key) {
                console.log("true");
            }
        });

I found this to be pointless due the fact when I click on the keys they return weird outputs, either null or other key different from the one I want.

What I also found on RGraph Line API is that obj.hide([index]) only sets the color to rgba(0,0,0,0), which does not hide the labelsAbove property.

How can I fix this and make a proper hide of the lines when I click on the key?

Answer 1

Well this demo hides/shows the line but the labelsAbove labels are still there. So I'll have to look at this for the next beta.

Here's the code:

function createandcall(rackname, racknameid, stb) {
    $('#maintable').append('<table class="table"><tbody><tr style="text-align:center"><td><h2>' + rackname + '</h2><table class="table"><tbody style="text-align:left"><tr id="STBL"></tr><tr id="STBL1"></tr><tr id="STBL2"></tr><tr id="STBL3"></tr></tbody></table></td></tr></tbody></table>');
    for (i = 1; i < stb + 1; i++) {
        createtable(i);
        callstb(rackname, racknameid, i);
    }
    return;
}

function callstb(rackname, racknameid, i) {

    $.ajax({
        type: "GET",
        dataType: 'text',
        url: "http://localhost:3000/index/" + rackname + ' ' + racknameid + ' ' + i,
        success: function (data) {
            response = '\#stb' + i;
            idtd = '\#tdstb' + i;
            $(response).html(data.replace(/\[32m/gi, '').replace(/\[0\;33m/gi, '').replace(/\[0m/gi, '').replace(/\[33m/gi, '').replace(/\[37m/gi, '').replace(/\[31m/gi, ''));
            pre = $(response).html().toString();

        },
        error: function (error) {
            $("#error").html('Error trying to get the STBs report');
            $("#error").show();
        }
    })
}

server.js:

app.get('/index/*', (req, res) => {
    parsedparam = req.params[0].split(" ")
    rackname = parsedparam[0]
    racknameid = parsedparam[1]
    stb = parseInt(parsedparam[2])
    verifystbs(rackname, racknameid, stb, res);
});

function openconnection() {
    con.connect(() => { console.log("RackChecker connected with database!") });
}

function closeconnection() {
    con.end(() => { console.log("Connection Closed") });
}

function verifystbs(rackname, racknameid, stb, res) {
    openconnection();
    con.query("SELECT (SELECT UCASE(name) FROM models WHERE s.model = id) as Model,\
        (SELECT UCASE(name) FROM manufacturers WHERE s.manufacturer = id) as Branch,\
        (SELECT UCASE(name) FROM racks WHERE s.rack = id) as Rack,\
        s.name as Stb,\
        x.pr as Jira, \
        x.reason as Reason,\
        x.requestor AS Stress_Request,\
        x.version as Version\
        FROM \
        stbs s \
        LEFT JOIN \
        stressrun x \
        ON (s.active = 1 && s.rack = (SELECT id FROM racks WHERE name = '"+ racknameid + "')) \
        WHERE x.id = (SELECT max(id) FROM stressrun y WHERE y.stb_id = s.id) and s.name like ('STB_%"+ stb + "')\
        and x.reason in ('failed','other','new build') ORDER BY s.name;", (err, result) => {
        console.log(result)
        if (!Array.isArray(result) || !result.length) {
            callnewstb = shell.exec('./shellscript/callnewstb.sh ' + rackname + ' ' + stb, { async: true });
            callnewstb.stdout.on('data', (data) => {
                res.send(data);
            });
        }
        else {
            for (i = 0; i < result.length; i++) {
                parsestbnumber = result[i].Stb.split("_");
                stbnumber = parseInt(parsestbnumber[1]);
                stbnumber = stbnumber * 1;
                if (stb == stbnumber) {
                    res.send("Stress Test is not running on <b>" + result[i].Stb + "</b><br>Reason: <b>" + result[i].Reason + "</b><br>Jira Ticket: <b><a href='https://link.jira.com/browse/" + result[i].Jira + "'>" + result[i].Jira + "</a></b><br>Build Version: <b>" + result[i].Version)
                    break
                }
                else {
                    callnewstb = shell.exec('./shellscript/callnewstb.sh ' + rackname + ' ' + stb, { async: true });
                    callnewstb.stdout.on('data', (data) => {
                        res.send(data);
                    })
                }
            }
        }
    });
    closeconnection();
}