CODEWITHSUNDEEP
javascriptjqueryhtmldomflot
dajavinator
dajavinator

Reputation: 81

Checkbox not working. Trying to dynamically add/remove gridlines in flot.

I'll add the code then I'll explain.

Segment of relevant HTML:

<div id='gridButton'>
    <form>
         <input type="checkbox" id="gridCheck" value="showGrid">Show Grid
    </form>
</div>

I used two different kinds of ways to test checkboxes and neither of them worked.

Version 1:

$('#gridCheck').on('change', function(){
    if(gridToggle = 0) {
        gridToggle = null;
    } else {
        gridToggle = 0;
    }
});

Version 2:

$('#gridCheck').on('click', function(){    
   if ($(this).is(':checked')){
      gridToggle = null;
   } else {
      gridToggle = 0;
   }
});

Here's what gridToggle is connected to (this is part of the overall options): 

    xaxis: {min: -10, max: 60, tickLength: gridToggle},
    yaxis: {min: -5, max:40, tickLength: gridToggle}

So the problem I'm having is that when the checkbox is clicked it won't change the gridlines. If I manually put them in the code however, they will work.

Upvotes: 1

Views: 145

Answers (1)

Mark
Mark

Reputation: 108537

Few thoughts:

1.) This if(gridToggle = 0) { is wrong, I think you mean if(gridToggle == 0) {

2.) Input tag is missing element close, should be:

<input type="checkbox" id="gridCheck" value="showGrid" />

3.) Lastly (your real problem), you need to redraw the chart after changing the property:

$('#gridCheck').on('change', function(){        
    var gridToggle = $(this).is(':checked') ? null : 0; // on or off
    var opts = myPlot.getOptions();
    opts.xaxes[0].tickLength = gridToggle; // modify existing plot options
    opts.yaxes[0].tickLength = gridToggle;
    myPlot.setupGrid(); // re-init grid
    myPlot.draw(); // and redraw
});

Here's a fiddle.

Upvotes: 3

Related Questions