Solved: Re: help on a CSS dashboard structure

jip31 · ‎01-21-2022

hi

as you can see, I display 3 differents panels (one map viz and 2 chart viz) in a same row

I have modified the standard width of these panels in CSS

Now, i woould like to add in the same row 2 other chart viz and to expand the height of the row

could you help me please?

<form>
  <label>XXX</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #chart{
            width:20% !important;
          }
          #chart2{
            width:20% !important;
          }
          #map{
            width:60% !important;
          
          }
        </style>
      </html>
    </panel>
    <panel id="map">
      <title>XXX</title>
      <map>
        <search>
          <query></query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="mapping.map.center">(46,2)</option>
        <option name="mapping.map.zoom">5</option>
        <option name="mapping.type">marker</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </map>
    </panel>
    <panel id="chart">
      <title>XXX</title>
      <chart>
        <search>
          <query></query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
           <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.text">Bureaux</option>
        <option name="charting.axisTitleY.text">Nb utilisateurs</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.showDataLabels">all</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.fieldColors">{"nbsam":#f70505}</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">230</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel id="chart2">
      <title>XXX</title>
      <chart>
        <search>
          <query></query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
             <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.text">Bureaux</option>
        <option name="charting.axisTitleY.text">Nb utilisateurs</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.showDataLabels">all</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.fieldColors">{"nbsam":#27B508}</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">230</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>

SinghK · ‎01-22-2022

Trey dashboard afdon from splunk. You will be easily able to design this ..

View solution in original post

jip31 · ‎01-22-2022

Is anybody can help please ?

SinghK · ‎01-22-2022

Trey dashboard afdon from splunk. You will be easily able to design this ..

jip31 · ‎01-23-2022

yes but the problem I have is that addon is not actually deployed in production...

And I have to do a dashboard like explained in my message

Is there any way to do it without dashboard studio and without the splunk dashboard app?

jip31 · ‎01-23-2022

thanks to you both

ITWhisperer · ‎01-23-2022

It depends on your search queries and chart types and whether a trellis option would solve the problem for you.

help on a CSS dashboard structure

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Persistent Queue at TcpOut — One of Splunk's Most Practical Features

Skip the Awkward Silence: Have a .conf-ersation at .conf26

Rethinking Zero Trust: From Product Purchases to Logical Control Evidence

Join the Conversation