jQuery UI Widgets Forums Chart In Stacked chart Hide legend if not data for particular data

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 10 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • arunthatham
    Participant

    In a stacked chart out of three legends for example if none of the bar has value greater than 0 then i need to hide the legend as well.
    How to Implement?


    arunthatham
    Participant

    I MEAN OUT OF RUNNING ,SWIMMING,CYCLING.iF CYCLING IS ZERO FOR ALL RECORD THEN THE CYCLING LEGEND HAS TO GET HIDE.Remaining two legend has to be shown.


    Dimitar
    Participant

    Hello arunthatham,

    Here is how to hide a particular series’ legend:

    $('#chartContainer .jqx-chart-legend-text').eq(0).parent().hide();

    where chartContainer is the id of the jqxChart and 0 is the series index.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    arunthatham
    Participant

    Where i need to add this line of code?
    I added at before processing part it didnt work.


    arunthatham
    Participant

    I added at load complete event it worked as expected but clicking on someother legend this legend comes back automatically.
    How to fix it?


    Dimitar
    Participant

    Hello arunthatham,

    You can use the recursive function addhandler demonstrated in the following example as a workaround:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare chart data as an array
                var sampleData = [
                        { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
                        { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
                        { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
                        { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
                        { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
                        { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
                        { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
                ];
    
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise by activity",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    xAxis:
                        {
                            dataField: 'Day',
                            showTickMarks: true,
                            tickMarksInterval: 1,
                            tickMarksColor: '#888888',
                            unitInterval: 1,
                            showGridLines: false,
                            gridLinesInterval: 1,
                            gridLinesColor: '#888888',
                            axisSize: 'auto'
                        },
                    colorScheme: 'scheme06',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn',
                                columnsGapPercent: 100,
                                seriesGapPercent: 5,
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 120,
                                    displayValueAxis: true,
                                    description: 'Time in minutes',
                                    tickMarksColor: '#888888'
                                },
                                series: [
                                        { dataField: 'Running', displayText: 'Running' },
                                        { dataField: 'Swimming', displayText: 'Swimming' }
                                ]
                            },
                              {
                                  type: 'stackedcolumn',
                                  columnsGapPercent: 100,
                                  seriesGapPercent: 5,
                                  valueAxis:
                                  {
                                      unitInterval: 10,
                                      minValue: 0,
                                      maxValue: 120,
                                      visible: false,
                                      displayValueAxis: true,
                                      description: 'Time in minutes',
                                      tickMarksColor: '#888888'
                                  },
                                  series: [
                                          { dataField: 'Riding', displayText: 'Riding' },
                                          { dataField: 'Cycling', displayText: 'Cycling' }
                                  ]
                              }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
    
                function addhandler() {
                    $('#chartContainer .jqx-chart-legend-text').eq(0).parent().hide();
                    $('#chartContainer .jqx-chart-legend-text').parent().click(function () {
                        addhandler();
                    });
                }
    
                $('#chartContainer .jqx-chart-legend-text').eq(0).parent().hide();
                $('#chartContainer .jqx-chart-legend-text').parent().click(function () {
                    addhandler();
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;" />
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.