Search code examples
jquerychartsprimefacesjqplot

How to add a JQPlot class to hide all chart lines when page is loaded?

I have too many series in my Primefaces JQPlot line charts app, and I want to load the chart with the lines already hidden; then, the user would click on the desired legend to display the correspondent line in the chart (see this example).

The template.xhtml file:

<h:body onload="HideSeries()" >
    <!-- [unrelevant code ommited] -->
</h:body>

<script>
    function HideSeries() {
        $('#chartsFormID\\:lineChartID').toggleClass('jqplot-series-hidden');
    }
</script>

My index.xhtml file:

<h:form id="chartsFormID" >
    <p:accordionPanel multiple="false" dynamic="true" cache="true" >
        <p:tab title="myTab title">
            <p:chart type="line" id="lineChartID" model="#{bean.myChart}" />
        </p:tab>
    </p:accordionPanel>
</h:form>

Unfortunattelly, it's not working.

An image for better understanding

Can anyone, please, help me ?

Thanks in advance.

Solution

  • To add the class to all elements, try this:

    $('tr.jqplot-table-legend td').toggleClass('jqplot-series-hidden');

    Or you can trigger the click event on all elements:

    $('tr.jqplot-table-legend td').trigger('click');