Solved: How do I center the sparkline column in a chart/ta...

damucka · ‎11-23-2018

Hello,

I have the following search for my sparkling line chart / table:

index=mlbso LogReplay* sourcetype=$SYSID$_hanatraces  earliest=-30m | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"

Everything is working fine, but my last column with the sparkling line chart is left-adjusted, which I do not like.

How would I center the sparkling chart in my last column?

Kind Regards,
Kamil

kamlesh_vaghela · ‎11-23-2018

@damucka

You can achieve this by CSS. Can you please try below XML for reference.

<dashboard>
  <label>Sparkline</label>
  <row>
    <panel>
      <table id="mytable">
        <search>
          <query>index="_internal"  | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <style>
        .sparkline {
          text-align: center !important;
        }
#mytable table th:nth-child(3) {
          text-align: center !important;
        }
      </style>
    </html>
  </row>
</dashboard>

Thanks

View solution in original post

kamlesh_vaghela · ‎11-23-2018

@damucka

You can achieve this by CSS. Can you please try below XML for reference.

<dashboard>
  <label>Sparkline</label>
  <row>
    <panel>
      <table id="mytable">
        <search>
          <query>index="_internal"  | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <style>
        .sparkline {
          text-align: center !important;
        }
#mytable table th:nth-child(3) {
          text-align: center !important;
        }
      </style>
    </html>
  </row>
</dashboard>

Thanks

damucka · ‎11-23-2018

Kamlesh,

Thank you, it works.
The only thing is that now the sparkling line is centered, but the column header still left-adjusted.
How would I center also this one?

Kind Regards,
Kamil

kamlesh_vaghela · ‎11-23-2018

@damucka
I have updated my answer. Please check.

Thanks

damucka · ‎11-23-2018

Thank you, it works.
Kind Regards,
Kamil

How do I center the sparkline column in a chart/table?

Index This | Why did the turkey cross the road?

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

Feel the Splunk Love: Real Stories from Real Customers

Are you a member of the Splunk Community?

How do I center the sparkline column in a chart/table?

Index This | Why did the turkey cross the road?

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

Feel the Splunk Love: Real Stories from Real Customers