Question

I am using JqPlot for Javascript.

Can I please have some help to get the seriesToggle working correctly.
In my code, I have seriesToggle: ‘normal’. This is not working. The graph displays perfectly, yet the legend is shown to the side and when I click on the graph, the legend just stays there. What is the correct code to show/hide the legend?

Here is my code:

<script class="code" type="text/javascript">

$(document).ready(function(){


var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[3.6, 3.2, 3.6], [2.4, 2.7, 2.9], [3.5, 3.1, 3.0]], 
{ 
            axes:
            {
                xaxis:
                {
                      ticks: ['1','2','3'],
                    showTicks: false
                },
                yaxis:
                {
                    //labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    ticks: ['1','2','3','4'],
                    showTicks: true
                }
            },
    title:{
                text: '3 Month Trends',
                fontSize: 12 },
            width: 480, height: 480,
            legend:{show:true, location: 'e', placement: 'outsideGrid', renderer: $.jqplot.EnhancedLegendRenderer,             rendererOptions: {

            seriesToggle: 'normal'
            //seriesToggleReplot: {resetAxes: true}
        }},
    seriesDefaults: 
    {
                rendererOptions: {smooth: true}

    },
    series:[ 
                {
                    lineWidth:1, 
                    label:'COGS',
                    markerOptions: { size:7, style:'dimaond' }
                }, 
                {
                    lineWidth:1, 
                    label:'Wages',
                    markerOptions: { size: 7, style:"dimaond" }
                }
                ]
    }

);      
});

<div class="small_dash_container">
    <div id="CustomerSurveyLineGraph" style="height:120px; width:220px; margin-left:10px;"></div>
</div>

<script class="include" type="text/javascript" src="elements/js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shBrushXml.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot//plugins/jqplot.pointLabels.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot.barRenderer.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>    
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>    
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/examples/jquery-ui/js/jquery-ui.min.js"></script>        
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.blockRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.highlighter.min.j"></script>    

Answer 1

I think you might have misunderstood what seriesToggle is for. The point of this option is to allow the user to click on a series name in the legend and have the corresponding series shown/hidden in the plot.

That said, if you do indeed have cause to hide the legend, the following toggles the legend to be visible and hidden when the plot is clicked:

$('#chart1').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {
    if($('#chart1 .jqplot-table-legend').is(':visible')) {
        $('#chart1 .jqplot-table-legend').hide();
    }
    else {
        $('#chart1 .jqplot-table-legend').show();
    }
});