showjqplotoverlays

canvasOverlay show in jqplot


How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear. Here is the code I use for the plot :

<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, { 
    title: 'Test_figs',
    legend: {show:false},
    series: [{
        showMarker: false, 
        color: '#ED0E0E',
        label: 'R spectrum', 
        neighborThreshold: -1
    }],
    axes:{ 
        xaxis:{
            label:'Restframe Wavelength'
        },
        yaxis:{
            label:'Flux', 
            tickOptions:{formatString:'%.3e'}
        }
    },
    cursor:{ 
        show:true,
        zoom:true, 
        tooltipLocation:'sw'
    },

    Canvasoverlay: {
        show: false, 
        objects: [

            {verticalLine: {
                name: 'Na-ID', 
                x: 5893.000000, 
                lineWidth: 2, 
                color: '#F0630C', 
                lineCap:'butt', 
                yOffset:0, 
                shadow: true
            }}
        ]
    }
});
});

function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>

I then use :

<button onclick="NaID_trigger()">Na-ID</button>

to trigger the overlay on or off for instance.

PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.


Solution

  • I finally found the solution myself : to not display the overlays when the jqplot loads I set the overall overlays "show" option to true. Then within each object I set show to false.

    Instead of the external to the plot function I used before I switched to an even handler of the form:

    $("input[type=checkbox][name=Na-ID]").change(function(){
        plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
        plot1.replot();
    });
    

    Now the plot display the selected overlay when checkbox is ticked and not at the beginning. Hope this will help someone who has the same issues.