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

[Julia1231]

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!

[bowesmana]

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>

[Julia1231]

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?

[bowesmana]

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

<panel>
  <single>
...
  </single>
  <single>
...
  </single>
</panel>

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.

[Julia1231]

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

[vinod743374]

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

[Julia1231]

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

[vinod743374]

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

[vinod743374]

@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