nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Chart Interactivity: Toggle Visibility to toggle text style as well?

jakoby84

Hi there,

so me and my customer really like the ability to toggle the visibility of series in an SVG chart. But there is no visual hint about which series is invisible/visible currently. So is it possible, when a series' visibility is toggled, to toggle the text style of the equivalent legend entry as well?

I know that I can change legend entries programmatically in beforeDrawLegendItem() method. But is it also possible to add an event handler so that the style is changed during runtime? E.g. when a series is hidden, the respective legend entry's text color is set to gray and if it is switched visible again the legend entry's text color is set back to black.

Regards and thanks for any input in advance! Jakob
(working with BIRT 4.2.1)

Find more posts tagged with

Comments

mwilliams

There isn't a way to do this from the UI. You could definitely log an enhancement request for something like this. I'm looking into it to see if we can't do it another way. I'll let you know if I find something.

jakoby84

Thanks for your effort!
I even wouldn't mind to do it programmatically instead of from the UI. I was digging into it a bit but didn't succeed to find the right entry point. Like, I can specify a custom script as the legend click action listener, but then the 'toggle visibility' option is of course not activated anymore. So in my own script I would have to call the toggleVisibility function on my own but don't know how to call it / what name it has. Furthermore I'm not overly confident how to tweak the SVG itself to programmatically change the font. But I guess it would be the way to go...
Well it's a good idea to post that enhancement request. Will do so tomorrow

mwilliams

Put this in your invoke script for the legend interactivity and it will change the color of the clicked legend item. Now, we just need to figure out how the id's for the toggleVisibility function are created to manually hide the series. 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
var tgs= document.getElementsByTagName("text");
for (var i = 0; i < tgs.length; i++) {
var y=tgs[i].childNodes[0];
var txt=y.nodeValue;

if ( txt == legendItemText ) {
styleStr = tgs[i].getAttribute("style");
rFullOpacityExp = /fill-opacity:[ ]*1.0/g;
rHalfOpacityExp = /fill-opacity:[ ]*0.5/g;
results = styleStr.search(rFullOpacityExp);

if (results == -1) {
results = styleStr.search(rHalfOpacityExp);
if (results == -1)
styleStr = styleStr + "fill-opacity:0.5;";
else {
styleStr = styleStr.replace(rHalfOpacityExp, "fill-opacity:1.0;");
}
}
else {
styleStr = styleStr.replace(rFullOpacityExp, "fill-opacity:0.5;");
}

tgs[i].setAttributeNS(null, "style", styleStr);
}
}
</pre>
 
FYI - The toggle visibility onClick call used in the SVG source looks like this. Just gotta figure out how to get the correct ids to pass to the toggleVisibility function. 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
onclick="toggleVisibility(evt, 4517702,new Array('24461386','16658149@1','25588747@2','22876855@3','2868070@4','9990691@5','26186905@6','26186905@7','10392516@8','10392516@9','28257251@10','28257251@11','18311230@12','18311230@13','23669963@14','23669963@15','11281511@16','11281511@17','11783772@18','11783772@19'))
</pre>

mwilliams

Take a look at this report. In the chart script, I grab the hashCode/series Identifier pairs and pass them through a markerText to the invoke script on the legend. In the legend, I step through the nodes of the document to find all the related nodes and change their visibility. Hope this works for you. Let me know if you have questions.

mwilliams

Were you able to use this method?

jakoby84

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="114673" data-time="1362065825" data-date="28 February 2013 - 08:37 AM">
Were you able to use this method? </blockquote>
Hey, thanks for asking again; actually I am currently refactoring quite a lot in my whole project and thus was not yet able to check it. But I definitely will do so and post here how it goes!