Splunk Enterprise

help on row panel

jip31
Motivator

Hi

I need to display a table panel and 4 chart panel like in the screenshot 

could you help please?

row.pngHere is my xml

<form>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
       
          #map{
            width:60% !important;
            
             #chart{
            width:20% !important;
          }
          #chart2{
            width:20% !important;
          }
          }
        </style>
      </html>
    </panel>
    <panel id="map">
      <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="chart4">
      <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>
    <panel id="chart">
      <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">
      <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>
    <panel id="chart3">
      <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>
  </row>
</form>

 

Labels (1)
Tags (1)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

@jip31 

You can do it by making a 3 panel dashboard, the first is your 60% map panel, then two panels to the right are each 20% and each of those has 2 charts, i.e.

<panel>
  <chart>
  </chart>
  <chart>
  </chart>
</panel>

Certain visualisations stack vertically and chart is one of them, so see this

<form>
  <row depends="$hideCSS$">
    <panel>
      <html>
        <style>
          #id_row .dashboard-cell:nth-child(1){
            width:60% !important;
          }
          #id_row .dashboard-cell:nth-child(2){
            width:20% !important;
          }
          #id_row .dashboard-cell:nth-child(3){
            width:20% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="id_row">
    <panel id="map">
      <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="chart4">
      <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>
      <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">
      <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>
      <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>
  </row>
</form>

View solution in original post

0 Karma

bowesmana
SplunkTrust
SplunkTrust

@jip31 

You can do it by making a 3 panel dashboard, the first is your 60% map panel, then two panels to the right are each 20% and each of those has 2 charts, i.e.

<panel>
  <chart>
  </chart>
  <chart>
  </chart>
</panel>

Certain visualisations stack vertically and chart is one of them, so see this

<form>
  <row depends="$hideCSS$">
    <panel>
      <html>
        <style>
          #id_row .dashboard-cell:nth-child(1){
            width:60% !important;
          }
          #id_row .dashboard-cell:nth-child(2){
            width:20% !important;
          }
          #id_row .dashboard-cell:nth-child(3){
            width:20% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="id_row">
    <panel id="map">
      <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="chart4">
      <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>
      <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">
      <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>
      <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>
  </row>
</form>
0 Karma

jip31
Motivator

it's perfect but I need one more thing

in fact I have 8 chart to display and not four

<panel>
  <chart>
  </chart>
  <chart>
  </chart>
 <chart>
  </chart>
 <chart>
  </chart>
</panel>

so how to make my viz map aligned following the 8 chart please?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

This is not possible with Simple XML

However, if your charts can be created from the same search query, some chart forms provide trellis options which may allow you to display your charts that way, but it is dependent on the searches you are using and the chart types.

0 Karma

SinghK
Builder

Why are you doing this by XML now have you tried dashboard studio? https://splunkbase.splunk.com/app/4710/ This is to meke dash boards easily and you can place your tiles the way you want.

0 Karma

jip31
Motivator

yes I tried but my company use a beta version of dashboard studio and I cant use map viz....

0 Karma
Get Updates on the Splunk Community!

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...

Edge Processor Scaling, Energy & Manufacturing Use Cases, and More New Articles on ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Get More Out of Your Security Practice With a SIEM

Get More Out of Your Security Practice With a SIEMWednesday, July 31, 2024  |  11AM PT / 2PM ETREGISTER ...