Dashboards & Visualizations

Javascript on drilldown

dsiob
Communicator

I have a map and two charts. When click on particular state on map, data in charts changes using tokens. I have applied javascript to keep the width ratio of charts as 65% and 35%.

Javascript Code:
`require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {

 var secondRow = $('.dashboard-row').eq(2);                           /*selects second row*/
 var panelCells = $(secondRow ).children('.dashboard-cell');    
     $(panelCells[0]).css('width', '65%');                       /*sets first chart width to 65% */        
     $(panelCells[1]).css('width', '35%');                      /*sets second chart width to 65% */

});
`

Problem:
When dashboard is loaded, javascript works fine and charts width shows as 65% and 35% ratio.
But when I click on any state on map and two charts gets refreshed, Javascript does not seems working!! Charts again comes as inbuilt ratio 50% and 50%
When dashboard loaded:
alt text

Does not work when charts refreshed:

alt text

0 Karma
1 Solution

rjthibod
Champion

You can put the CSS inline with your SimpleXML and side-step this issue. You will have to assign an ID to the panels in order to do it this way, e.g., in the SimpleXML definition use this for "Product Plane Details" panel: <panel id="panel_row_2_col_1">

Here is the inline CSS to add to the bottom of the dashboard.

  <row depends="$hiddenCSS$">
    <html>
      <style>
        #panel_row_2_col_1 {
          width: 65% !important;
        }
        #panel_row_2_col_2 {
          width: 35% !important;
        }
      </style>
    </html>
  </row>

View solution in original post

rjthibod
Champion

You can put the CSS inline with your SimpleXML and side-step this issue. You will have to assign an ID to the panels in order to do it this way, e.g., in the SimpleXML definition use this for "Product Plane Details" panel: <panel id="panel_row_2_col_1">

Here is the inline CSS to add to the bottom of the dashboard.

  <row depends="$hiddenCSS$">
    <html>
      <style>
        #panel_row_2_col_1 {
          width: 65% !important;
        }
        #panel_row_2_col_2 {
          width: 35% !important;
        }
      </style>
    </html>
  </row>

dsiob
Communicator

worked perfectly!! thanks rjthibod

0 Karma
Get Updates on the Splunk Community!

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Announcing the General Availability of Splunk Enterprise Security 8.1!

We are pleased to announce the general availability of Splunk Enterprise Security 8.1. Splunk becomes the only ...

Developer Spotlight with William Searle

The Splunk Guy: A Developer’s Path from Web to Cloud William is a Splunk Professional Services Consultant with ...