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 %}
I added the js section of my app page.
So now you can use CSS and HTML style settings to set the widths, heights - whatever you want.
But how???
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.
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.
How can I convert my app page to HTML?