How to show or hide a data point on RGraph Line chart using checkbox?

Question

I'm trying to show/hide a data point on an Rgraph line chart using the canvas method based on a checkbox. The javascript for creating the chart is here. I cannot add the full code here as it is too long. Image of Chart with checkboxes

// Check for selected data point
                $('#textbox1').val("Checkbox is checked.");
                $("#dbp").change(function() {
                    if($(this).prop("checked") == true){
                        $('#textbox1').val("Checkbox is checked.");
                        var data = [bpdnum,bpsnum,bpstarget,oxygennum,oxygentarget,pulsenum,pulsetarget,respnum,tempnum,weightnum];
                        var key = ['DBP','SBP','SBP-Target','Pox(%)','Pox-Target','HR','HR-Target','Respiration','Temp(F)','Weight'];
                        var colors = ['#751fd6','#ff59cc','rgba(255, 89, 204, 0.6)','#40a808','rgba(64, 168, 8, 0.6)','#0062cc','rgba(0, 98, 204, 0.6)','#d6a41f','#78a730','#595959'];
                        console.log(data);console.log(key);console.log(colors);
                        // RGraph.clear(document.getElementById("allchart"));
                        // RGraph.redraw(document.getElementById("allchart"));
                        return drawGraph();

                    } else if($(this).prop("checked") == false){
                        $('#textbox1').val("Checkbox is unchecked.");
                        var data = [bpsnum,bpstarget,oxygennum,oxygentarget,pulsenum,pulsetarget,respnum,tempnum,weightnum];
                        var key = ['SBP','SBP-Target','Pox(%)','Pox-Target','HR','HR-Target','Respiration','Temp(F)','Weight'];
                        var colors = ['#ff59cc','rgba(255, 89, 204, 0.6)','#40a808','rgba(64, 168, 8, 0.6)','#0062cc','rgba(0, 98, 204, 0.6)','#d6a41f','#78a730','#595959'];
                        console.log(data);console.log(key);console.log(colors);
                        // RGraph.clear(document.getElementById("allchart"));
                        // RGraph.redraw(document.getElementById("allchart"));
                        return drawGraph();
                    }


                });

if I add tje actual JS code on here. For some reason it shows the entire post all messed up. But fine I'll add it and you'll see. — thedirtybubble, Dec 21 '20 at 18:48
here's the message I got when trying to add the JS on here "It looks like your post is mostly code; please add some more details." — thedirtybubble, Dec 21 '20 at 18:51
Sounds like you're trying to add a bunch of code instead of just the segment that demonstrates where you're encountering an issue. We don't need a code dump. Reduce your code down to just the lines that demonstrate your issue. The checkbox, how you're tying an event to that checkbox, and how you're attempting to show or hide the data point. — devlin carnate, Dec 21 '20 at 18:54

Richard · Answer 1 · 2020-12-22T14:32:56.120

1

I answered this via Twitter with the following code that shows or hides a point on the line using a checkbox. The code sets the points value to null.

A codepen is here:

https://codepen.io/rgraph/pen/poErxRL

And the source code is this:

<!DOCTYPE html >
<html lang="en">
<head>
    <script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
    <script src="https://www.rgraph.net/libraries/RGraph.line.js" ></script>
    
</head>
<body>

    
    <input type="checkbox" id="myCheckbox" checked /><label for="myCheckbox">Show/Hide point</label><br />
    <canvas id="cvs" width="750" height="300" style="border: 1px solid gray">[No canvas support]</canvas>
    <script>
        myLine = new RGraph.Line({
            id: 'cvs',
            data: [8,6,4,-3,-5,-8,2],
            options: {
                xaxisPosition: 'center'
            }
        }).trace();
        
        document.getElementById('myCheckbox').onclick = function (e)
        {
            if (this.checked) {
                myLine.original_data[0][3] = -3 ;
            } else {
                myLine.original_data[0][3] = null;
            }
            
            // Must redraw the chart to see the changes
            RGraph.redraw();
        }
    </script>

</body>
</html>

edited Dec 22 '20 at 14:32

answered Dec 22 '20 at 10:40

Richard

4,809
3
27
46

this seems to be working, however I need to hide the entire set. for example there's a data node in the json array called bpdnum. I want to completely hide it not just a certain point. – thedirtybubble Dec 24 '20 at 16:05
I added a screenshot of what it is I want to do. – thedirtybubble Dec 24 '20 at 19:28
If you want to show/hide an entire dataset as opposed to a single data point then there's the show() & hide() methods which do this for you. I've updated the example codepen with a second chart which has multiple datasets and allows you to show or hide one of them. https://codepen.io/rgraph/pen/poErxRL – Richard Dec 26 '20 at 09:40
There's also an demo in the download called demos/line-hide-show.html which does just this. You can get the download here: https://www.rgraph.net/download.html#stable – Richard Dec 26 '20 at 10:13
OK, got it. Thanks!! – thedirtybubble Dec 28 '20 at 17:18
Hey is there a way to add a vertical line when you hover or click on a data point? – thedirtybubble Dec 28 '20 at 19:58

How to show or hide a data point on RGraph Line chart using checkbox?

1 Answers1