Splunk Search
Highlighted

Table Data Bar - Customize

Path Finder

I have a question for someone who's much better at JS and CSS than I am.

I'm looking to place a data bar within a table, in a dashboard. There is a handy example in the app Splunk 6.x Dashboard Examples called Table Data Bar, which I have successfully used. I will post the code for the example below. The example does nearly exactly what I need, although my management is asking for the "negative space" of the bar to be filled with a color as well. Here's an example of a bar in a table, using green as the percentage marker, and red in the negative space of the bar:
alt text

Any help is greatly appreciated. Thank you!

App: Splunk 6.x Dashboard Examples code:

customtabledata_bar.xml:

<dashboard script="table_data_bar.js" stylesheet="table_data_bar.css">
    <label>Table Data Bar</label>
    <description>Custom table cell renderer that replaces a field value with a data bar.</description>
    <row>
        <table id="table1">
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype source</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
    </row>
</dashboard>

tabledatabar.js:

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'views/shared/results_table/renderers/BaseCellRenderer',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
    var DataBarCellRenderer = BaseCellRenderer.extend({
        canRender: function(cell) {
            return (cell.field === 'percent');
        },
        render: function($td, cell) {
            $td.addClass('data-bar-cell').html(_.template('<div class="data-bar-wrapper"><div class="data-bar" style="width:<%- percent %>%"></div></div>', {
                percent: Math.min(Math.max(parseFloat(cell.value), 0), 100)
            }));
        }
    });
    mvc.Components.get('table1').getVisualization(function(tableView) {
        tableView.addCellRenderer(new DataBarCellRenderer());
    });
});

tabledatabar.css:

td.data-bar-cell {
    padding: 4px 8px;
}
td.data-bar-cell .data-bar-wrapper .data-bar {
    height: 16px;
    min-width: 1px;
    background-color: #5479AF;
}

Any thoughts?

Highlighted

Re: Table Data Bar - Customize

Legend

What is the query for your stats? Or in other what how are you calculating percent? What is it going to represent?




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Table Data Bar - Customize

Path Finder

Number of "foo"s + number of "bar"s = 100%

When the bar in the table is displayed, I'd like percentage of "foo"s to be represented by a green portion, and percentage of "bar"s to be represented by a red portion, where the green+ red make up the entirety of the bar. (Similar to the pic I posted in the question)

The form of the examples I've posted works, and I'm not looking for assistance with the calculations, just advice for how to add a second colored bar, to fill the remainder of the empty space above the percentage value. E.g., if the value is 0.30, I'd like bar to be 30% green, and 70% red.

Thanks again.

0 Karma
Highlighted

Re: Table Data Bar - Customize

Splunk Employee
Splunk Employee

I managed to achieve this by putting a second div in the background of the table cell.
This code updates a column titled: "Progress" in a table with id : "table_instances"

tabledatabar.js:

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'views/shared/results_table/renderers/BaseCellRenderer',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
    var DataBarCellRenderer = BaseCellRenderer.extend({
        canRender: function(cell) {
            return (cell.field === 'Progress');
        },
        render: function($td, cell) {
            $td.addClass('data-bar-cell').html(_.template('<div class="data-bar-wrapper"><div class="data-bar-back" style="width:100%"><div class="data-bar" style="width:<%- percent %>%"></div></div></div>', {
                percent: Math.min(Math.max(parseFloat(cell.value), 0), 100)
            }));
        }
    });
    mvc.Components.get('table_instances').getVisualization(function(tableView) {
        tableView.addCellRenderer(new DataBarCellRenderer());
    });
});

tabledatabar.css:

td.data-bar-cell {
    padding: 7px 4px;
}
td.data-bar-cell .data-bar-wrapper .data-bar-back .data-bar {
    position: relative;
    top: 0;
    right: 0;
    height: 10px;
    min-width: 1px;
    background-color: #30b5e2;
    border-radius: 5px;
}
td.data-bar-cell .data-bar-wrapper .data-bar-back {

    height: 10px;
    min-width: 1px;
    background-color: #e5e5e5;
    border-radius: 5px;
}
0 Karma
Highlighted

Re: Table Data Bar - Customize

Legend

@roryab [Splunk], I think adding a div will just complicate. All that is required is to add background-color as red for .data-bar-wrapper class and green for .data-bar class. However, I was not sure of the intention of this request.

Following is the only change required for Splunk Dashboard Example App's Table with Data Bars example:

td.data-bar-cell .data-bar-wrapper{
     background-color: red;
}

td.data-bar-cell .data-bar-wrapper .data-bar {
     height: 16px;
     min-width: 1px;
     background-color: green;
}



| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Table Data Bar - Customize

Splunk Employee
Splunk Employee

I had added rounded corners to the bar to make it look cool, just changing the background would not have sufficed for me but it looks like it would probably fit the OP's request.

0 Karma
Highlighted

Re: Table Data Bar - Customize

Legend

@adamsmith47 @roryab, refer to my answer : https://answers.splunk.com/answers/694309/how-do-you-create-the-below-chart-in-splunk.html#answer-69... to create multiple sections in table data bar based on percent. The example display the value by default but shows actual percent of each segment as Tooltip text.




| eval message="Happy Splunking!!!"


0 Karma