Solved: 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.

Federated Search for Snowflake Is Now Generally Available on Splunk Cloud Platform

Help Us Build Better Splunk Regex Puzzles (And Win Prizes!)

Fuel Your Journey: What’s Waiting for You at the .conf26 Acceleration Station

Join the Conversation