craigtussey

Its working as intended now.   The result can be seen below.   Hover over the measure description and the 2nd to last icon on the 1st measure line.

http://steepusa.no-ip.info/scx/m1new2.cgi

Again, I really appreciate the help.

dsonesuk, I duplicated part of your code to form a second line like the first.  For some reason the 2nd line sparklines did not hide.  But notice the line spacing.    The height of the hidden sparklines determine the line spacing.

http://steepusa.no-ip.info/w3test.html

It was even worse when I tried it because the sparklines were taller.   However, I started to redo my code to show you the line spacing I had experienced and this time I didn't do any css.  I just moved the measure data print instruction below the legend construction line, eliminated the concatenation, and placed the variable containing the sparklines ($gstr) at the end of the measure data line print instruction and ran it.   

The result is almost what I'm looking for.    Run the following link and mouse over all the controls.

http://steepusa.no-ip.info/scx/m1new2.cgi

The lines are initially spaced by the height of the sparklines.  But when I moused over the controls (all 4), the spacing collapsed resulting in what I hoped for.    What a surprise.   If I can just get the presentation to come up in the collapsed form, its there.    

Thanks very much for your work on this dsonesuk.   I bumped into this because of what you did.   You sure did what you did fast.   I appreciate your ability.   I hope I can get it to come up in the collapsed form.    I'm drawing a blank at the moment.   These 'profiles of best understanding' can have 50 or more measure organized in groups, so I need to keep the presentation tight. 

And thanks to everyone else.

I'm going to bed now.  I have a bad cold.  But I'll be back in the morrow. 

I think I have tried your suggestion dsonesuk.  I placed the sparkline instruction at the end of the instruction that prints the measure data line to try this.  The result is that it distorts the measure data line spacing because the sparklines have a greater height than the measure data line.   The position of the beginning of the sparklines is correct in m1new, but the arrangement of the sparklines stacks, one under the other.   I want the sparklines to show in a line, one after another.   The repositioning from the place of the initial hide, shown in m1, seems to change the title and arrangement of the sparklines.   Maybe I'm not understanding you.   Please help me in that regard if you think I'm not.

Justsomeguy, I changed the sparkline instruction back to show dsonesuk.   I hope you got to see the result of your suggestion.  If not I'll change it back at your request.

I did try your suggestion I think.  The modified instruction is below.  You can see the result by executing m1new.   The title did show up in full, but the sparklines are still stacked and the positioning of the title and sparklines is now way off.

$gstr .= "<div id='$surtok' style='position:absolute;top:86px;left:87%;background-color:#$ltappbgcolr;'><span class='tooltip'>$pimtok Trends<BR></span><span ID='sls'>&nbsp<span class='inlinesparkline$j'>$values</span>&nbsp&nbsp<span class='inlinesparkline$k'>$rates</span>&nbsp&nbsp<span class='inlinesparkline$l'>$states</span>&nbsp&nbsp<span class='inlinebar$m'>$strides</span>&nbsp&nbsp</span></div><script>hideIt('$surtok');</script>";
 

I apologize for leaving that important bit out.   I'm under the weather.  The 2nd from the right whirling rectangle on each measure data line is the control to mouse over.  The sparklines for the 1st line have the most data points.   All data is just test stuff of course. 

The following 2 links show the difference.  The first shows the sparklines as intended positioned where they were initially hidden.  The second shows the repositioning and how the arrangement of the sparklines change.   These links are executing off a Windows 10 based Apache server at my home.  I hope the connectivity stays stable.

http://steepusa.no-ip.info/scx/m1.cgi

http://steepusa.no-ip.info/scx/m1new.cgi

The placement of the sparkline set is right.   I have  verified the coordinates previously.   It is the arrangement of the sparklines that is not working.   The sparklines are stacked one below another after repositioning, instead of in a line, one after another.   If I don't reposition, the sparklines appear in a line at the place of original positioning.  I changed the code as you suggested.    Why I didn't already do that is a good question.  The code follows.

I create controls and hidden sparklines.  A control is associated with a particular set of sparklines via a common ID part.   I position the sparklines so as not to disrupt the UI presentation.  When the user hovers over a control, the sparklines are repositioned next to the control and made visible.   The repositioning works, but the sparklines are stacked one below another.   If I don't reposition, the sparklines appear in a line as intended.   I would like the sparklines to appear in a line one after another after I reposition instead of in a stacked configuration.   Any help is appreciated.   The perl code that creates the sparklines and the JavaScript that repositions and makes the sparklines visible follow.

<code>

$surtok = 'x' . $imtok;                   
$gstr .= "<div id='$surtok'><span class='toolTip' style='position:absolute;top:86px;left:87%;font-size:9px;background-color:#$ltappbgcolr;'>$pimtok Trends<BR></span><span ID='sls'>&nbsp<span class='inlinesparkline$j'>$values</span>&nbsp&nbsp<span class='inlinesparkline$k'>$rates</span>&nbsp&nbsp<span class='inlinesparkline$l'>$states</span>&nbsp&nbsp<span class='inlinebar$m'>$strides</span>&nbsp&nbsp</span></div><script>hideIt('$surtok');</script>";

function showIt2(itx) { // Show sparklines.
      var slID = 'x' + itx;
      var cntlID = 'z' + itx;
      var rect = document.getElementById(cntlID).getBoundingClientRect();
      var Yx = Math.floor(rect.top) - (86 + 5); // Minus the initial hidden placement + 5.
      var Xx = Math.floor(rect.left) + 40;
                            
      document.getElementById(slID).style.position = 'absolute';
      document.getElementById(slID).style.top = Yx;
      document.getElementById(slID).style.left = Xx;
                             
      var cmdx = 'document.all.' + slID + \".style.visibility='visible';\";
      eval(cmdx);
 }

</code>