Splunk Search

How to set a fixed height for all tables or charts in a panel?

edrivera3
Builder

Hi

I have the following panel that has to two different charts/visualizations. The table changes its height depending on the results. I would like to know how to set a fixed height for all charts/visualizations in this panel or at least for the table.

\<div class="dashboard-row"\>
<div class="dashboard-cell" style="width: 50%;">
    <div class="dashboard-panel">
    <div class="dashboard-element">
        <div class="panel-head">
        <h3> Transaction Heat Map</h3>
        <div class="panel-body">
            <div id="heat_transaction"></div>
        </div>
        </div>
    </div>
    </div>
</div>
<div class="dashboard-cell" style="width: 50%;">
    <div class="dashboard-panel">
    <div class="dashboard-element">
        <div class="panel-head">
        <h3>Transactions</h3>
        <div class="panel-body">
            <div id="tableTransaction"></div>
        </div>
        </div>
    </div>
    </div>
</div>
</div>    

{% block js %}
<script>
var deps = [
"splunkjs/ready!",
"jquery",
"splunk_wftoolkit/components/calendarheatmap/calendarheatmap",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/chartview",
"splunkjs/mvc/singleview",
"splunkjs/mvc/timelineview",
"splunkjs/mvc/tableview"

];
require(deps, function(mvc) {
// Load individual components
var SearchManager = require("splunkjs/mvc/searchmanager");
var ChartView = require("splunkjs/mvc/chartview");
var SingleView = require("splunkjs/mvc/singleview");
var TableView = require("splunkjs/mvc/tableview");
var TimelineView = require("splunkjs/mvc/timelineview");
var CalendarMap = require("splunk_wftoolkit/components/calendarheatmap/calendarheatmap");

// table
var transactions = new SearchManager({
        id: "transactions",
        preview: true,
        cache: true,
        status_buckets: 1000,
    search: 'index=transactions earliest="3/1/2015:00:00:00" latest="5/23/2015:00:00:00" | table id,trans'
    });

var tableTransaction = new TableView({
    id: "tableTransaction",
    managerid: "transactions",
    el: $("#tableTransaction")
}).render();

// Heat
    var trans_heat = new SearchManager({
    id: "trans_heat",
    preview: true,
    catche: true,
    status_buckets: 1000,
    search: 'index=transactions earliest="5/19/2015:00:00:00" latest="5/23/2015:00:00:00"  | timechart span=1h count by index',
});

var heat_transaction = new CalendarMap({
    id: "heat_transaction",
    managerid: "trans_heat",
    domain: "day",
    subDomain: "hour",
    el: $("#heat_transaction")
}).render();

});

</script>
{% endblock js %}

0 Karma

edrivera3
Builder

I added the js section of my app page.

0 Karma

lguinn2
Legend

So now you can use CSS and HTML style settings to set the widths, heights - whatever you want.

0 Karma

edrivera3
Builder

But how???

0 Karma

lguinn2
Legend

Now you will either need to learn some HTML and CSS, or hire someone who knows this stuff.

There are tons of resources on the Internet: I typed "learn CSS" into Google and got 45 million hits... http://www.w3schools.com/css/ is a nice resource.

lguinn2
Legend

There is nothing in Simple XML that will set fixed panel sizes. But you can convert your dashboard to HTML and then use HTML/CSS to format it however you want.

I suggest that you do everything you can using the visual editor and Simple XML - then convert and format.

0 Karma

edrivera3
Builder

How can I convert my app page to HTML?

0 Karma
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 ...