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
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>
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.
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>
Thanks so much. This worked perfectly!