How to properly add an event listener for mouseover a column in a chart using simple XML and splunkjs?

[lyndac]

I recently got an awesome answer to this question about changing the tooltip when hovering over a pie chart. I am now trying to apply the same strategy to a column chart and am getting weird results. I've added code to my javascript to add the event listener and print the two items that I want in the tooltip (userid and name) when I hover over a column in the chart.

From the previous question, my search and data look like this:

index=yc | stats sum(counts) as counts values(fullName) as fullName by userid| sort -counts | head 10

userid count fullName
jdoe 35424 John Doe
bsmith 4342 Bob Smith
mjones 4212 Mary Jones
jdoeadeer 1234 John Doe

And just like the previous question, if the user hovers over the tallest column I'd like the tooltip to display
userid: jdoe
fullName: John Doe
counts: 35424
counts%: 78.2

What I expect to happen is: If I move the mouse over the tallest column, the title=jdoe, myname=John Doe should print to the console.

What is happening is this: If I move the mouse over the tallest column, 'title: "" myname: ""' prints. If I then move the mouse over column 3, 'title: jdoe myname: John Doe' prints. (This should have printed when I was over the first column). This behavior continues each time I move the mouse to a different column, the values for the previous columns are printed.

To confuse things more, when I do add the code to add myname to the tooltip, it doesn't render unless I move off the column and then back on. so weird.

This is the code I'm using to add the event listener and print the values. Any ideas what I'm doing wrong. This strategy works great for pie charts (thanks @jeffland)
:

//Get the search results from the search manager
var search=splunkjs.mvc.Components.get("mychartsearch");
var myresults = search.data("results");
var myResultArray = [];
myresults.on("data", function() {
    myResultArray=myresults.data().rows;
});

//register the mouseover event
$("#mychart").on("mouseover", "[id^highcharts].highcharts-container > svg > g.highcharts-series-group > g.highcharts-series", function() {

        //get the title (the userid) from the tooltip
        var title= $("#mychart").find("table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2)").text();

        // get the name from the results array for the given userid
        var myname="";
        for (var i=0; i< results.length; i++) {
            if (title == results[i][0]) {
                myname=results[i][2];
                 break;
            }
        }
        console.log("title: ", title); 
        console.log("myname: ", myname);  
})

[bmacias84]

This is only a thought but you could assume the following about column charts. All items in the child elements in the parent in both the chart and legend have the same index. I've checked a few charts and it seems to be the case.

Then create jquery detect which element in the array being selected then query the legend for that element.

<g class="highcharts-series-group" zIndex="3"></g>

<g class="highcharts-legend" zIndex="7" transform="translate(827,80)"></g>

I hope that makes sense. Cheers.

[splunk24]

i am facing a similar issue but this is because tooltip data elements have not come when our click event started
so for example
when you refresh the page and click on any of the bar
both title and myname will be emty because table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2) is emty
2nd time
it has the previous table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2) value so it is changing this part
if you can hover to any bar and when some tootltip will come then slowly hover to tooltip and come back to the same bar .. then you will be able to see your changes because again hover event will start.

[splunk24]

please help @jeffland

[jeffland]

I'm sorry, I didn't quite get what the problem is. But based on what I did understand, you may simply need to use a different css selector. Also, these might change from splunk version to version.

[lyndac]

I don't have much javascript/jquery experience but I cannot figure out which bar is being hovered over.

When I inspect the bar, I can see the "highcharts-axis-labels highcharts-xaxis-labels" which looks to be all of the userids that are labeled on the x-axis. I don't see a similar structure under the highcharts-series-group. All I see is:

<g class="highcharts-series-group" zIndex="3">
   <g class="highcharts-series" ...zIndex="0.1"  ... >
       <path fill="rgb(204, 80, 104)" d="M 3 24 L 43 171 L 3 171 Z M ..." zIndex=0" </path>
       <path class="highcharts-tracker" fill="rgba(192,192,192,0.001)" d="M 3 25 L 43 25 L 43 171 L 3 171 Z ..." </path>
   </g>
   <g class=highcharts-markers highcharts-tracker" ...></g>
</g>
<g class="highcharts-legend" .. ></g>
<g class="highcharts-axis-labels highcharts-xaxis-labels" zIndex="7"> ...</g>

I honestly don't understand how to correlate from the series to the xaxis labels. What am I missing?

[bmacias84]

Use firebug or jconsole in Chrome which will allow you to hover over objects providing you with the information you need.

The number class="highcharts-series" under class="highcharts-series-group" should match class="highcharts-legend-item" under class="highcharts-legend".

You will need to figure out Jquery, but just bind to the class "highcharts-series" then find the parent node then find
class="highcharts-legend-item". This should return an array.

[lyndac]

I've been using firebug to inspect the objects in the column chart. When I inspect a column in the chart, there is only ONE class="highcharts-series" under class="highcharts-series-group". I think this is the whole problem. where you are seeing a class="highcharts-series" for each column in the chart, I only see one.

Also, the class="highcharts-legend" contains one item and it is basically the label for the legend ("total files"). However there is an class="highcharts-axis-labels highcharts-xaxis-labels" which contains an entry for each column in the chart (there are 37).

So, I can't figure out how to relate the ONE highcharts-series that is available to the 37 xaxis labels.

I'm super confused as to why the hierarchy would be different for you. I am running splunk Enterprise 6.3.1