topic Re: How to put a chart and a single value in a same row in Splunk Search

How to put a chart and a single value in a same row?

Julia1231 — Tue, 17 May 2022 17:04:02 GMT

Hi,

I have a chart to display value by time. Then I calculate the average of the value.

I want to display the avg next to the chart, what can I do please?

Thanks in advanced!

Re: How to put a chart and a single value in a same row

bowesmana — Thu, 12 May 2022 04:06:15 GMT

Just have two panels in the same row - here's an example defining a base search for the timechart and then using that search to calculate the average in the next panel.

<dashboard> <label>Example dual chart</label> <row> <panel> <chart> <search id="timechart"> <query>| makeresults count=100 | eval r=random() % 100 | streamstats c | eval _time=now() - (c*60) | timechart fixedrange=f span=1m max(r) as r</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option> <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option> <option name="charting.axisTitleX.visibility">visible</option> <option name="charting.axisTitleY.visibility">visible</option> <option name="charting.axisTitleY2.visibility">visible</option> <option name="charting.axisX.abbreviation">none</option> <option name="charting.axisX.scale">linear</option> <option name="charting.axisY.abbreviation">none</option> <option name="charting.axisY.scale">linear</option> <option name="charting.axisY2.abbreviation">none</option> <option name="charting.axisY2.enabled">0</option> <option name="charting.axisY2.scale">inherit</option> <option name="charting.chart">line</option> <option name="charting.chart.bubbleMaximumSize">50</option> <option name="charting.chart.bubbleMinimumSize">10</option> <option name="charting.chart.bubbleSizeBy">area</option> <option name="charting.chart.nullValueMode">gaps</option> <option name="charting.chart.showDataLabels">none</option> <option name="charting.chart.sliceCollapsingThreshold">0.01</option> <option name="charting.chart.stackMode">default</option> <option name="charting.chart.style">shiny</option> <option name="charting.drilldown">none</option> <option name="charting.layout.splitSeries">0</option> <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option> <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option> <option name="charting.legend.mode">standard</option> <option name="charting.legend.placement">right</option> <option name="charting.lineWidth">2</option> <option name="trellis.enabled">0</option> <option name="trellis.scales.shared">1</option> <option name="trellis.size">medium</option> </chart> </panel> <panel> <title>Average</title> <single> <search base="timechart"> <query> | stats avg(r) </query> </search> </single> </panel> </row> </dashboard>

Re: How to put a chart and a single value in a same row

Julia1231 — Thu, 12 May 2022 07:28:56 GMT

Hi @bowesmana ,

Thank you for you feedback.

Sorry it's not clearly mentioned but the idea is I have, for ex 8 charts and 6 single values that I want to display in the same dashboard.

So I want to put 4 charts and 4 single values which have the same meaning together in a same panel, is it possible?

Re: How to put a chart and a single value in a same row

bowesmana — Thu, 12 May 2022 07:34:25 GMT

You can put multiple visualisations in a single panel and you can also use trellis view for an individual visualisation to show multiple values, so you could have a <single> viz with 4 attributes trellised, or 4 <single>, each with one value.

If you have

the singles will display horizontally in the single panel. If you have <chart> or <table> elements in the panel, they will stack vertically. You can play around with this horizontal/vertical stacking by interleaving <chart>+<single> to get different results.

So the chances are that you can do what you want, it's just a matter of working out the SPL to get the results to populate the panels visualisations.

Re: How to put a chart and a single value in a same row

Julia1231 — Fri, 13 May 2022 08:57:42 GMT

@bowesmana

Here: "If you have <chart> or <table> elements in the panel, they will stack vertically."

Is it possible to put a chart and a single value in a same row?

Re: How to put a chart and a single value in a same row

vinod743374 — Mon, 16 May 2022 06:42:24 GMT

@Julia1231

Is this your requirement,
your can try by adding an html panel,
I am Pasting the code of it, You can try.

<dashboard>
<label>Example dual chart</label>
<row>
<panel>
<chart>
<title>Chart</title>
<search id="timechart">
<query>| makeresults count=100
| eval r=random() % 100
| streamstats c
| eval _time=now() - (c*60)
| timechart fixedrange=f span=1m max(r) as r</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">line</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">none</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
<single>
<title>Average</title>
<search base="timechart">
<query>
| stats avg(r)
</query>
</search>
</single>
</panel>
</row>
<row depends="$nevermatch$">
<panel>
<html>
<style>
#element1{

width: 70%!important;
}

.shared-reportvisualizer.ui-resizable {
height: 250px!important;
}

#element2 {
float: right!important;
margin-top: -17%!important;
width: 30%!important;

}
</style>
</html>
</panel>
</row>
</dashboard>

Thankyou.

Re: How to put a chart and a single value in a same row

Julia1231 — Mon, 16 May 2022 13:22:51 GMT

@vinod743374 thanks.

Yes, it's exactly what I am looking for., but the code doesn't work for me because of some parts that I don't understand to modify.

I don't see where do you define the $nevermatch$. What does it do?

Re: How to put a chart and a single value in a same row

vinod743374 — Mon, 16 May 2022 13:30:44 GMT

@Julia1231

The token (nevermatch) which i am using is just a dummy one , it is used to hide the panel, which i have written the html code and style tag in it.

Apart from that

the element id’s which i used in the style tags may differ from you,

inspect the page and you can find the ids of the particular panel, then apply for your ids

Re: How to put a chart and a single value in a same row

vinod743374 — Tue, 17 May 2022 04:40:37 GMT

@Julia1231

you can try this Code for better Understand,

<dashboard>
<label>Example dual chart</label>
<row>
<panel>
<chart id="element1">
<title>Chart</title>
<search id="timechart">
<query>| makeresults count=100
| eval r=random() % 100
| streamstats c
| eval _time=now() - (c*60)
| timechart fixedrange=f span=1m max(r) as r</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">line</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">none</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
<single id="element2">
<title>Average</title>
<search base="timechart">
<query>
| stats avg(r)
</query>
</search>
</single>
</panel>
</row>
<row depends="$nevermatch$">
<panel>
<html>
<style>
#element1{

width: 70%!important;
}

.shared-reportvisualizer.ui-resizable {
height: 250px!important;
}

#element2 {
float: right!important;
margin-top: -17%!important;
width: 30%!important;

}
</style>
</html>
</panel>
</row>
</dashboard>

Thankyou.