Solved: help on row panel

jip31 · ‎01-22-2022

Hi

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

could you help please?

Here 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>

bowesmana · ‎01-23-2022

@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

bowesmana · ‎01-23-2022

@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>

jip31 · ‎01-23-2022

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?

ITWhisperer · ‎01-23-2022

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.

SinghK · ‎01-22-2022

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.

jip31 · ‎01-23-2022

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

help on row panel

other

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!