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!

How to find the worst searches in your Splunk environment and how to fix them

Everyone knows Splunk is a powerful platform for running searches and doing data analytics. Your ...

Share Your Feedback: On Admin Config Service (ACS)!

Help Us Build a Better Admin Config Service Experience (ACS)   We Want Your Feedback on Admin Config Service ...

Build the Future of Agentic AI: Join the Splunk Agentic Ops Hackathon

AI is changing how teams investigate incidents, detect threats, automate workflows, and build intelligent ...