topic Re: How to set a fixed height for all tables or charts in a panel? in Splunk Search

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

edrivera3 — Tue, 29 Sep 2020 06:52:28 GMT

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 %}

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

lguinn2 — Mon, 03 Aug 2015 16:09:55 GMT

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.

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

edrivera3 — Mon, 03 Aug 2015 16:28:49 GMT

How can I convert my app page to HTML?

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

edrivera3 — Mon, 03 Aug 2015 16:42:35 GMT

I added the js section of my app page.

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

lguinn2 — Mon, 03 Aug 2015 18:45:11 GMT

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

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

edrivera3 — Mon, 03 Aug 2015 18:47:54 GMT

But how???

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

lguinn2 — Mon, 03 Aug 2015 19:50:32 GMT

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.