CODEWITHSUNDEEP
javascriptrgraph
thedirtybubble
thedirtybubble

Reputation: 11

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

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


                });

Upvotes: 0

Views: 158

Answers (1)

Richard
Richard

Reputation: 5101

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>

Upvotes: 1

Related Questions