All Apps and Add-ons

Heap Map Viz panel Sizing

coreyCLI
Communicator

I need to make the heat map viz larger then 1000px, something close to 1500 or maybe even as much as 2000px.  It looks like there may be a cap set at 1000px?  I was using the "height" option to set the size statically on other dashboards but in this instance there are too many results and the heat map is not tall enough to read them.  Any suggestions?  @spavin 

 

 

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

bowesmana
SplunkTrust
SplunkTrust

@coreyCLI 

It looks like there is a div height that forcibly limits the height to 1000

<div data-cid="view88334" version="2" class="shared-reportvisualizer ui-resizable" data-view="views/shared/ReportVisualizer" data-render-time="0" style="width: 100%; height: 1000px; overflow: hidden;">

I had a look through the code and could not find where it forced that limit, but luckily you can override the height using inline CSS in your dashboard.

See this example, where the inline CSS sets the height to 1500px (along with the <height> of 1500 and this works. Add the id="xx" to the <viz> element and then limit the CSS to just that id.

<dashboard version="1.1" theme="light">
  <label>heatmap</label>
  <row>
    <panel>
      <html>
        <style>
          #viz_height_1500 .shared-reportvisualizer.ui-resizable {
            height: 1500px !important;
            overflow: hidden;
          }
        </style>
      </html>
      <viz id="viz_height_1500" type="heat-map-viz.heat-map-viz">
        <search>
          <query>| gentimes start=-7 increment=4h 
| eval "Server Availability"=random()%100, "Customer Satisfaction"=random()%100,"Server Performance"=random()%100, _time=starttime 
| table _time, "Server Availability","Customer Satisfaction","Server Performance"</query>
          <earliest>-30m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="heat-map-viz.heat-map-viz.colorCritical">#DC4E41</option>
        <option name="heat-map-viz.heat-map-viz.colorHigh">#F1813F</option>
        <option name="heat-map-viz.heat-map-viz.colorLow">#53A051</option>
        <option name="heat-map-viz.heat-map-viz.colorMedium">#F8BE34</option>
        <option name="heat-map-viz.heat-map-viz.convertTimeToUTC">false</option>
        <option name="heat-map-viz.heat-map-viz.enableAnimation">true</option>
        <option name="heat-map-viz.heat-map-viz.enableShades">true</option>
        <option name="heat-map-viz.heat-map-viz.hideCellBorders">false</option>
        <option name="heat-map-viz.heat-map-viz.labelCritical">Critical</option>
        <option name="heat-map-viz.heat-map-viz.labelFontSize">18</option>
        <option name="heat-map-viz.heat-map-viz.labelHigh">High</option>
        <option name="heat-map-viz.heat-map-viz.labelLow">Low</option>
        <option name="heat-map-viz.heat-map-viz.labelMedium">Medium</option>
        <option name="heat-map-viz.heat-map-viz.legendPosition">top</option>
        <option name="heat-map-viz.heat-map-viz.legendText">categories</option>
        <option name="heat-map-viz.heat-map-viz.reverseNegativeShade">false</option>
        <option name="heat-map-viz.heat-map-viz.shape">square</option>
        <option name="heat-map-viz.heat-map-viz.showDateInTooltip">true</option>
        <option name="heat-map-viz.heat-map-viz.showLegend">true</option>
        <option name="heat-map-viz.heat-map-viz.showValues">false</option>
        <option name="heat-map-viz.heat-map-viz.tokenLabel">hm_token_label</option>
        <option name="heat-map-viz.heat-map-viz.tokenTime">hm_token_time</option>
        <option name="heat-map-viz.heat-map-viz.tokenValue">hm_token_value</option>
        <option name="heat-map-viz.heat-map-viz.tooltipDateFormat">auto</option>
        <option name="heat-map-viz.heat-map-viz.valHigh">75</option>
        <option name="heat-map-viz.heat-map-viz.valLow">10</option>
        <option name="heat-map-viz.heat-map-viz.valMedium">40</option>
        <option name="heat-map-viz.heat-map-viz.xAxisDateFormat">auto</option>
        <option name="heat-map-viz.heat-map-viz.xAxisRotate">false</option>
        <option name="heat-map-viz.heat-map-viz.xAxisTickCount">0</option>
        <option name="heat-map-viz.heat-map-viz.yaxiswidth">auto</option>
        <option name="heat-map-viz.heat-map-viz.yaxiswidthpx">250</option>
        <option name="height">1500</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>
      </viz>
    </panel>
  </row>
</dashboard>

 

View solution in original post

0 Karma

danspav
SplunkTrust
SplunkTrust

Hi @coreyCLI 

 

The 1000 pixel limit is imposed by Splunk Simple XML. Any height value over 1000 is ignored.

@bowesmana has found a good way to get around this limit, by setting the CSS on the dashboard to override the Splunk maximum.

 

0 Karma

bowesmana
SplunkTrust
SplunkTrust

@coreyCLI 

It looks like there is a div height that forcibly limits the height to 1000

<div data-cid="view88334" version="2" class="shared-reportvisualizer ui-resizable" data-view="views/shared/ReportVisualizer" data-render-time="0" style="width: 100%; height: 1000px; overflow: hidden;">

I had a look through the code and could not find where it forced that limit, but luckily you can override the height using inline CSS in your dashboard.

See this example, where the inline CSS sets the height to 1500px (along with the <height> of 1500 and this works. Add the id="xx" to the <viz> element and then limit the CSS to just that id.

<dashboard version="1.1" theme="light">
  <label>heatmap</label>
  <row>
    <panel>
      <html>
        <style>
          #viz_height_1500 .shared-reportvisualizer.ui-resizable {
            height: 1500px !important;
            overflow: hidden;
          }
        </style>
      </html>
      <viz id="viz_height_1500" type="heat-map-viz.heat-map-viz">
        <search>
          <query>| gentimes start=-7 increment=4h 
| eval "Server Availability"=random()%100, "Customer Satisfaction"=random()%100,"Server Performance"=random()%100, _time=starttime 
| table _time, "Server Availability","Customer Satisfaction","Server Performance"</query>
          <earliest>-30m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="heat-map-viz.heat-map-viz.colorCritical">#DC4E41</option>
        <option name="heat-map-viz.heat-map-viz.colorHigh">#F1813F</option>
        <option name="heat-map-viz.heat-map-viz.colorLow">#53A051</option>
        <option name="heat-map-viz.heat-map-viz.colorMedium">#F8BE34</option>
        <option name="heat-map-viz.heat-map-viz.convertTimeToUTC">false</option>
        <option name="heat-map-viz.heat-map-viz.enableAnimation">true</option>
        <option name="heat-map-viz.heat-map-viz.enableShades">true</option>
        <option name="heat-map-viz.heat-map-viz.hideCellBorders">false</option>
        <option name="heat-map-viz.heat-map-viz.labelCritical">Critical</option>
        <option name="heat-map-viz.heat-map-viz.labelFontSize">18</option>
        <option name="heat-map-viz.heat-map-viz.labelHigh">High</option>
        <option name="heat-map-viz.heat-map-viz.labelLow">Low</option>
        <option name="heat-map-viz.heat-map-viz.labelMedium">Medium</option>
        <option name="heat-map-viz.heat-map-viz.legendPosition">top</option>
        <option name="heat-map-viz.heat-map-viz.legendText">categories</option>
        <option name="heat-map-viz.heat-map-viz.reverseNegativeShade">false</option>
        <option name="heat-map-viz.heat-map-viz.shape">square</option>
        <option name="heat-map-viz.heat-map-viz.showDateInTooltip">true</option>
        <option name="heat-map-viz.heat-map-viz.showLegend">true</option>
        <option name="heat-map-viz.heat-map-viz.showValues">false</option>
        <option name="heat-map-viz.heat-map-viz.tokenLabel">hm_token_label</option>
        <option name="heat-map-viz.heat-map-viz.tokenTime">hm_token_time</option>
        <option name="heat-map-viz.heat-map-viz.tokenValue">hm_token_value</option>
        <option name="heat-map-viz.heat-map-viz.tooltipDateFormat">auto</option>
        <option name="heat-map-viz.heat-map-viz.valHigh">75</option>
        <option name="heat-map-viz.heat-map-viz.valLow">10</option>
        <option name="heat-map-viz.heat-map-viz.valMedium">40</option>
        <option name="heat-map-viz.heat-map-viz.xAxisDateFormat">auto</option>
        <option name="heat-map-viz.heat-map-viz.xAxisRotate">false</option>
        <option name="heat-map-viz.heat-map-viz.xAxisTickCount">0</option>
        <option name="heat-map-viz.heat-map-viz.yaxiswidth">auto</option>
        <option name="heat-map-viz.heat-map-viz.yaxiswidthpx">250</option>
        <option name="height">1500</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>
      </viz>
    </panel>
  </row>
</dashboard>

 

0 Karma

coreyCLI
Communicator

Thanks so much.  This worked perfectly!

0 Karma
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

We are excited to announce that the upcoming releases of Splunk Enterprise 10.2.x and Splunk Cloud Platform ...

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

After a whole week of being on call, you fell asleep on your keyboard, and you hit a sequence of buttons that ...