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?

I was about to suggest the .hide() function until you mentioned the labelsAbove not being hidden too. I'll have to fix this for v5.1 — Richard
Key problem? To hide the line You could indeed use the hide() method in conjunction with an interactive key event ( beforeinteractivekey or afterinteractivekey ) as it is at the moment though you'll still get the labelsAbove. In the event after you hide the relevant line in theory you could alter the labelsAbove labels so the relevant lines labelsAbove labels are blank - so they wouldn't show). You'd need to use labelsAboveSpecific I think. It wouldn't be insignificant. — Richard
I'm releasing a new version tomorrow so when I've done with that I can work on having the labelsAbove labels not visible when the relevant line isn't. — Richard

Richard Richard · Accepted Answer · 2019-08-01T16:37:12

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();
}

RGraph hide line plus labels with a click on key element

1 Answers