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.
-
Author
-
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?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.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Where i need to add this line of code?
I added at before processing part it didnt work.I added at load complete event it worked as expected but clicking on someother legend this legend comes back automatically.
How to fix it?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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.