How to get the HtmlElement by Idfrom the current Extension

[agnie_john]

Hi,

I am  trying to create Timeline chart with with reference line for today().

I use the RebootTimeline extension.but this extension doesnt provide to show the current date vertical line.So i am trying to change this extension to draw a vertical line.

I could achieve this by getting the Html Div element by document.getElementsByTagName("svg").

The problem here is the id is not dynamic. I manually find the id of the corresponding div by checking the source.

I would like to get this id dynamically. Is there anyway to get this details?

Current Logic: 

call addMarker function on Chart ready event

google.visualization.events.addListener(chart, 'ready', function() {

console.log($element);
dateRangeStart = data.getColumnRange(1);
dateRangeEnd = data.getColumnRange(2);
//console.log(this)
addMarker(new Date());

});

In the add Marker function i get the div using document.getElementById

function addMarker(markerDate) {
var container = document.getElementById('mZHuk_content');      
chartElements = container.getElementsByTagName('svg');
if (chartElements.length > 0) {
svg = chartElements[0];
}

..

...

}

[AustinSpivey]

There's probably a "correct" way to get that ID dynamically from the Capabilities API (or Nebula, whichever you're using underneath the hood).

I would not suggest getting the ID this way, but as a test you can do this:

let obj = document.querySelector('article.qv-object-googletimeline div[id$="_content"]');
let obj_id = obj.id.split('_')[0];

I made up the googletimeline part, you'd need to look at the source and see what that object is called.

Assuming you're using the Capabilities API, you could probably use the getProperties() method to ultimately get the ID for the object.

[agnie_john]

Hello Austin,

Thanks for you reply.

I could get the ID from the element like below 

$element.prevObject.prevObject[0].id

Now my problem is, i could see the marker line on GoogleTimeline chart only if the timeline chart doesn't have the vertical scroll.

             

When the number of rows increases the vertical scroll is visible at that time the marker is not showing on the timeline chart.

How to achieve the marker even if the Timeline chart has scrollbar?

Thanks,

John

[AustinSpivey]

It looks like when there are few enough items to not require scrolling, the axis and timeline bars are all contained in a single SVG element:

However, when there are enough items that scrolling becomes necessary, a second SVG element is generated. The original SVG displays the x-axis values and the second SVG holds the timeline bars:

From the above screenshot, 1. is the original SVG with the axis labels and 2. is the second SVG with the timeline bars.

Now, my guess is that you are drawing the x-axis lines on the x-axis SVG <g> which would explain why it's not being shown when there's scrolling: the second SVG element has absolute positioning and sits on top of the original SVG. They're also "parallel" child nodes so I don't think you can easily fix that with a high z-index in this case.

I think one possible solution would be to place your axis lines in a separate SVG element that also has absolute positioning, but with a high z-index so that it is on top of the both the original and the second SVGs that are currently in play.

From the above screenshot, 1. is the original SVG with the axis labels and 2. is the second SVG with the timeline bars, and 3. is the new SVG element that holds just your axis lines.

Note that absolute positioning and use of z-index in that screenshot. I used a really high z-index for that example but you should probably use a more reasonable one so that you don't accidentally break other sheet/mashup UI behaviors.

For reference, this is the SVG element code I use in that example:

<svg width="713" height="277" aria-label="A chart." style="overflow: hidden; position: absolute; top: 0; left: 0;">
    <defs id="_ABSTRACT_RENDERER_ID_117"></defs>
    <g>
        <line
            style="stroke: rgb(255, 0, 0); stroke-width: 4; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0, 0, 0); fill-rule: nonzero; opacity: 1;"
            vector-effect="non-scaling-stroke"
            x1="600"
            y1="0"
            x2="600"
            y2="250"
        ></line>
    </g>
</svg>