For completeness, I thought I'd post the js I ended up using to help other novice web developers.
I needed to manipulate the panels in rows 2, 3 and 4 of my dashboard, so the script I've used is
require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
// Grab the DOM for the first dashboard row
var panelRow = $('.dashboard-row').first();
// Grab the DOM for the second dashboard row
panelRow = $(panelRow).next();
// 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', '60%');
$(panelCells[1]).css('width', '40%');
// Manipulate the third dashboard row
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');
$(panelCells[0]).css('width', '60%');
$(panelCells[1]).css('width', '40%');
// Manipulate the fourth dashboard row
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');
$(panelCells[0]).css('width', '60%');
$(panelCells[1]).css('width', '40%');
// Force visualizations (esp. charts) to be redrawn with their new size
$(window).trigger('resize');
});
I'm sure the code could be improved, but it works for me.
Thanks for the pointer to the "Layout Customization: Panel Width" in the Splunk 6.x Dashboard Examples.
Dave
... View more