Working with linear gauges and multiple data values

CodeRookie
edited February 11, 2022 in Analytics #1
<p>Hi, all!  I'm designing a linear gauge that has two pieces of data I want to show with the pointers.  I can get both to show with no issue, but was wondering if it is possible to have one value pointer go along the top of the gauge, while the second pointer occupies the bottom.  While going through the 'Edit Gadget' menus, I'm not seeing anything that may make that possible.</p>
<p> </p>
<p>Thanks in advance for the help!</p>
<p> </p>
<p>Have a great afternoon!</p>
<p> </p>
<p>Scott</p>

Comments

  • <p>There isn't a UI available to separate which needle you want on the top, or on the bottom, but it is possible via scripting.</p>
    <p> </p>
    <p>In the example, the second gauge is customized.  We disabled the labels, and made the needles as hidden as possible.  Then we add 4 addOn elements: 2 polygons for the triangle markers, and 2 text items for the labels.</p>
    <p> </p>
    <p>In the <em>onRender </em>event, we add code to dynamically move the addOns, and add the labels to the needles.</p>
    <pre class="_prettyXprint _lang-">
    ////logger = java.util.logging.Logger.getLogger("birt.report.logger");
    val = [];
    ctr=0;

    function beforeRendering( gadget, fgsc )
    {
    ////logger.warning ( gadget.getResultValues().get(0).getValue() );
    ////logger.warning ( gadget.getResultValues().get(1).getValue() );

    // Save the values in an array
    //
    val.push( gadget.getResultValues().get(0).getValue() );
    val.push( gadget.getResultValues().get(1).getValue() );

    }

    function beforeDrawAddOn( addOn, fgsc )
    {
    ////logger.warning ( addOn.getName() + ': ' + addOn.getX() + ' - ' + addOn.getY() );
    ////logger.warning ( addOn.getLabel() );

    padding = 1;
    textPadding = 2.5;

    // Set the marker, or label
    switch (ctr) {
    case 0: { addOn.setX( new Number( val[0] - padding) ); break; }
    case 1: { addOn.setX( new Number( val[0] - textPadding) ); addOn.setLabel( val[0] ); break; }
    case 2: { addOn.setX( new Number( val[1] - padding) ); break; }
    case 3: { addOn.setX( new Number( val[1] - textPadding) ); addOn.setLabel( val[1] ); break; }
    }
    ctr++;
    }

    </pre>
    Warning No formatter is installed for the format ipb
  • <p>Clement,</p>
    <p>Thanks for the example!  I'll give it a shot and see what I get.</p>
    <p> </p>
    <p>Have a great afternoon!</p>
    <p> </p>
    <p>Scott</p>
  • <p>Clement,</p>
    <p>I must have something goofy somewhere, as I'm not getting it to work correctly.  I'm attaching the design, and when you get a moment, if you could take a look at it, I would be most appreciative.</p>
    <p> </p>
    <p>
  • <p>What's not working correctly since I can't run?  An error, something not showing, etc...?</p>
    <p> </p>
    <p>I used your .rptdesign and replaced the Data Source/Data Sets with a Static one.  I'm assuming the max of your gauge is 2000 because of the padding / textPadding values.</p>
    <p> </p>
    <p>The addOns order in the UI list is actually reversed since it's used for Z index stacking.  The bottom of the list is actually position 0.</p>
    <p> </p>
    <p>Attached is a revised version.  I updated the various functions in the <em>onRender </em>event.</p>
    <p> </p>
    Warning No formatter is installed for the format ipb
  • <p>Clement,</p>
    <p>Good morning!  Sorry I didn't go into detail....  Basically my new pointers weren't showing up.  I'm guessing the example you posted will take care of that matter.  I'll let you know how it works out.  Thanks!</p>
    <p> </p>
    <p>Have a great day!</p>
    <p> </p>
    <p>Scott</p>
  • <p>Clement,</p>
    <p>Your new code worked perfectly!  Thank you!  One issue I have run into, though.  I needed to scale down the gauge to the original size I had it, and now my pointers seem to be a bit 'off' on value vs. scale position (Consumed = 509, but marker shows less than 500, see pic).  I tried messing with the values in your code, along with those in the 'Add-Ons', but couldn't seem to find what needed to be changed to alleviate the issue.  What might be the cause of this?</p>
    <p> </p>
    <p>
  • Clement Wong
    Clement Wong E mod
    edited September 27, 2017 #8
    <p>The code shifts the needle, and the text left or right are in the section:</p>
    <pre class="_prettyXprint _lang-">
    if (ctr < 2) {
    if (val0 < 25) { padding = -2; textPadding = -1; }
    else if (val0 >= 25 && val0 <= 50) { padding = -.4; textPadding = 1; }
    else if (val0 > 50 && val0 <= 75) { padding = 0; textPadding = 1.5; }
    else { padding = 1.5; textPadding = 4; }
    }
    else {
    if (val1 < 25) { padding = -2; textPadding = -1; }
    else if (val1 >= 25 && val1 <= 50) { padding = -.4; textPadding = 1; }
    else if (val1 > 50 && val1 <= 75) { padding = 0; textPadding = 1.5; }
    else { padding = 1.5; textPadding = 4; }
    }
    </pre>
    <p>The values that the gauge is expecting is based on percentages.  When I took your report, I based the "padding" and "textPadding" values on your design.  So if you have resized the gauge and made it smaller, you'll need to adjust the padding values.</p>
    <p> </p>
    <p>I would suggest that you take my latest example, and size it down to what you have in the "real" report.  Then, change the values in the Data Set (use 250, 500, 750, 1000, 1250, 1500, 1750, 2000) to test the placements of both the marker (via 'padding') and the text (via 'textPadding').  You'll notice that I have 4 sections, and each section has a different padding, and that it's replicated for each set of needle/text.</p>
    Warning No formatter is installed for the format ipb
  • <p>Clement,</p>
    <p>Thanks for the clarification.  I think I'm going to have to break the sections down into finer separations.  The setting that was spot on for 500, I had to adjust for 750, even though they both fell in the <strong>else if (val0 >= 25 && val0 <= 50) { padding = -1.5; textPadding = .7; } </strong>section.  So, I can see what I'll be spending my afternoon doing.</p>
    <p> </p>
    <p>Thanks again for the help..... It is greatly appreciated.</p>
    <p> </p>
    <p>Scott</p>