Dashboards & Visualizations

Is there an easy way to set the widths of different panel groups so they're NOT equal?

valentrm
Explorer

Is there an easy way to set the widths of different groups so they're NOT equal? For example, I have a panel with 2 groups, and I want the first to be 70%, and the second to be 30% of the total panel width.

Tags (3)

masonmorales
Influencer

Yes, you can use javascript to accomplish this. Here's an example

custom_layout_panel_width.xml

<dashboard script="custom_layout_width.js">
  <label>Layout Customization: Panel Width</label>
  <row>
      <single>
        <searchString>index=_internal sourcetype=splunkd | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">splunkd events</option>
        <option name="linkView">search</option>
        <option name="drilldown">none</option>
      </single>
      <single>
        <searchString>index=_internal sourcetype=*access | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">access events</option>
      </single>
      <chart>
        <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </chart>
  </row>
  <row>
      <table>
        <searchString>index=_internal | stats count by sourcetype</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </table>
  </row>

custom_layout_width.js

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    // Grab the DOM for the first dashboard row
    var firstRow = $('.dashboard-row').first();
    // Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
    var panelCells = $(firstRow).children('.dashboard-cell');
    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '20%');
    $(panelCells[2]).css('width', '60%');
    // Force visualizations (esp. charts) to be redrawn with their new size
    $(window).trigger('resize');
});

valentrm
Explorer

Thank you very munch for the answer, i'll try to make it. Actually i didn't mention that i'm using sideview.
The answers still the same right?

Best regards

0 Karma

jpmorris_splunk
Engager

Hi,

I realise this is an old thread but I have the above example working and now I am trying to appy the same column widths to the 2nd row.

I have the java script as detailed below but the panels in the 2nd row do not show any data saying 'search is waiting for input' Can anyone see what I am doing wrong?

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

// Grab the DOM for the first dashboard row
var panelRow = $('.dashboard-row').first();

// Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
var panelCells = $(panelRow).children('.dashboard-cell');

// Adjust the cells' width
$(panelCells[0]).css('width', '20%');
$(panelCells[1]).css('width', '80%');

// Manipulate the second dashboard row
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');

// Adjust the cells' width in second row
$(panelCells[0]).css('width', '20%');
$(panelCells[1]).css('width', '80%');

// Force visualizations (esp. charts) to be redrawn with their new size
$(window).trigger('resize');    

});

0 Karma

nicolas_perreau
Explorer

Hi valentrm,

I think you'll get the answer you want in this post :
http://answers.splunk.com/answers/149563/simple-xml-display-2-panels-in-a-row-with-different-widths....

Otherwise, maybe converting your xml dashboard to html will permit you to adjust the layout.

Hope this helps!

0 Karma

valentrm
Explorer

Thank you very munch for the answer, i'll try to make it. Actually i didn't mention that i'm using sideview.
The answers still the same right?

Best regards

0 Karma
*NEW* Splunk Love Promo!
Snag a $25 Visa Gift Card for Giving Your Review!

It's another Splunk Love Special! For a limited time, you can review one of our select Splunk products through Gartner Peer Insights and receive a $25 Visa gift card!

Review:





Or Learn More in Our Blog >>