Hovertext: Correct Units

  • Resolved Gowtham

    (@sgowtham)


    1 year, 7 months ago

    Greetings.

    I have many maps using your plugin in my website (one example: https://sgowtham.com/journal/2023-grandmas-marathon/ – I used just altitude on the y-axis and distance on the x-axis). When I hover the mouse pointer over this graph, I see the hover text as “3 ft Altitude: 667 ft” instead of “3 mi Altitude: 667 ft”.

    Any chance you are willing to fix this in the next version of this plugin? It’d also be great if the distance can be more granular. For example, “3.15 mi Altitude: 667 ft”.

    Thank you for your work on this!

    Gowtham (G)

    • This topic was modified 1 year, 7 months ago by Gowtham.
    • This topic was modified 1 year, 7 months ago by Gowtham.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Gowtham

    (@sgowtham)

    Greetings.

    I was able to resolve both issues. All edits are in js/WP-GPX-Maps.js.

    ******************************

    For issue #1 (incorrect units in the hovertext/tooltip), the solution was replacing

    _formats.push( l_y );

    with

    _formats.push( l_x );

    in the if ( graphEle != '' ) { block – around line #1220.

    ******************************

    For issue #2 (number of decimal places in the graph’s tooltip/hovertext), the solution was replacing

    return Math.round( tooltipItems[0].xLabel, fpt.dec ) + fpt.suf;

    with

    return tooltipItems[0].xLabel + fpt.suf;

    in the tooltips: { section of the var hoptions = { block – around line #1130.

    ******************************

    Furthermore, I opted to add a single space between the metric and its unit. This was accomplished by making l_x and l_y look as follows (I just use uom = 1 and uom = 2) – around line #1040.

                        if ( '1' == unit ) {

                            /* feet / miles */
                            l_x = { suf: ' mi', dec: 1 };
                            l_y = { suf: ' ft', dec: 0 };

                    } else if ( '2' == unit ) {

                            /* meters / kilometers */
                            l_x = { suf: ' km', dec: 1 };
                            l_y = { suf: ' m', dec: 0 };

    ******************************

    A couple pages where the solution can be observed are

    https://sgowtham.com/journal/2023-grandmas-marathon/ (uom = 1)

    https://sgowtham.com/journal/2023-american-birkebeiner/ (uom = 2)

    I hope these help someone looking for similar solution.

    My best,

    Gowtham (G)

    • This reply was modified 1 year, 7 months ago by Gowtham.
    • This reply was modified 1 year, 7 months ago by Gowtham.
    • This reply was modified 1 year, 7 months ago by Gowtham.
    • This reply was modified 1 year, 7 months ago by Gowtham.
Viewing 1 replies (of 1 total)
  • The topic ‘Hovertext: Correct Units’ is closed to new replies.