Dashboards & Visualizations

How to get chart and table on same row in dashboard html

RVDowning
Contributor

In the following, I removed the div ending the first row, and rmoved the div starting the second row, but the chart and its inline table still appear on different lines. Any clue what I am doing wrong?

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 25%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
                <div class="dashboard-element table" id="element2" style="width: 25%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
1 Solution

somesoni2
Revered Legend

Try like this

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 100%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>            
            </div>
        </div>
    </div>
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">    
                <div class="dashboard-element table" id="element2" style="width: 100%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

View solution in original post

somesoni2
Revered Legend

Try like this

<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">
                <div class="dashboard-element chart" id="element1" style="width: 100%">
                    <div class="panel-head">
                        <h3>Datasets Created by Type</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>            
            </div>
        </div>
    </div>
    <div class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">                
            <div class="panel-element-row">    
                <div class="dashboard-element table" id="element2" style="width: 100%">
                    <div class="panel-head">
                        <h3>Chart for &#34;$type_tok$&#34;</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

RVDowning
Contributor

Yep, that did it. Thanks!

0 Karma
Get Updates on the Splunk Community!

Automatic Discovery Part 1: What is Automatic Discovery in Splunk Observability Cloud ...

If you’ve ever deployed a new database cluster, spun up a caching layer, or added a load balancer, you know it ...

Real-Time Fraud Detection: How Splunk Dashboards Protect Financial Institutions

Financial fraud isn't slowing down. If anything, it's getting more sophisticated. Account takeovers, credit ...

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...

 Are you tired of troubleshooting delays caused by siloed frontend, application, and network data? We've got a ...