Dashboards & Visualizations

Create a Bar Graph from a CSV and on click of each Bar display details /or on hover of that bar cretes pop up to display details.

abhishekroy168
Path Finder

Create a Bar Graph from a CSV and on click of each Bar display details /or on hover of that bar creates pop up to display details.

0 Karma
1 Solution

niketn
Legend

@abhishekroy168, refer to one of previous answers which highlights this issue of including setTimeOut() for JavaScript to work. https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html
I think this issue is also on similar lines. If you have tried a code like below please confirm and accept the answers, otherwise requesting you to provide and accept your own answer to help the others.

  $("#element1").on("mouseover", " g.highcharts-series-group > g.highcharts-series-hover", function(){
        setTimeout(function(){
              var title = $("table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2)").text();
              alert(title);
         }, 10);
  });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@abhishekroy168, refer to one of previous answers which highlights this issue of including setTimeOut() for JavaScript to work. https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html
I think this issue is also on similar lines. If you have tried a code like below please confirm and accept the answers, otherwise requesting you to provide and accept your own answer to help the others.

  $("#element1").on("mouseover", " g.highcharts-series-group > g.highcharts-series-hover", function(){
        setTimeout(function(){
              var title = $("table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2)").text();
              alert(title);
         }, 10);
  });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

493669
Super Champion

Refer this docs: https://docs.splunk.com/Documentation/Splunk/7.0.2/Viz/ColumnBarCharts
and as per requirement use stats or chart command
by default on hover it shows details.

0 Karma

abhishekroy168
Path Finder

But it only explains how to create charts.My requirement is once the graph gets generated then on hover of each bar total incidents information should be there on the area that appears while hovering.
Reply if any clue.

0 Karma

abhishekroy168
Path Finder

But i dont have access to this path to add any files...
$SPLUNK_HOME\etc\app\appserver\static

0 Karma

niketn
Legend

@abhishekroy168 if you have admin rights in Splunk you can try to upload static file via Splunk UI. See if you have access to upload the file through this.

http://<YourSplunkServer>/en-US/manager/<YourSplunkApp>/apps/local/search?action=edit

If the above does not work your option is to convert from Simple XML to HTML Dashboard so that JavaScript code can exist in the same html dashboard without the need of external script file.

On second note if your requirement is to have dynamic Tooltip text in your Chart you should try the answer from @jeffland (PS: even that requires Simple XML JavaScript Extension)

https://answers.splunk.com/answers/337329/is-it-possible-to-show-a-custom-tooltip-whenever-a.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

abhishekroy168
Path Finder

hi niketnilay,
thanks for the reply..
I did that by adding mouseover event
$("#element1").on("mouseover", " g.highcharts-series-group > g.highcharts-series-hover", function(){
var title = $("table.highcharts-tooltip > tbody > tr:nth-child(1) > td:nth-child(2)").text();
alert(title);

     });

in variable title i am storing date value which i get when default tooltip event occurs.
The problem i am facing ryt now is my mouseover event occurs before default tooltip event and hence the date which i am storing in the title variable is mismatch(date value of previous hover is getting displayed on current bar hover.) as after tooltip event completes the value for date updates.Please see if i am doing some mistake.

0 Karma

abhishekroy168
Path Finder

it worked by adding delay to the event.:)

Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...