All Apps and Add-ons
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Can we turn on the Data Values in order to see the exact number of in chart visualizations?

vreddy28
Engager
‎05-31-2018 09:33 AM

In the chart visualization we can turn on the Data Values in order to see the exact number however when plotting 1 month worth of data these numbers can get tight when displaying a 4 or 5 digit data set. I’m looking for a way to rotate the data set (like I have it on the X-axis) to that I may not have to worry about it so much. At this point I’m not sure if I want it at a 45, 90 or some other degree angle but I want to have the option to change that. My guess is that it is somewhere using the CSS selector with rotate option I don’t know what to edit/modify to get the chart to perform this change.

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎05-31-2018 11:54 AM

@vreddy28, you can use CSS Style override for Data Label text rotation using following CSS Selector where chart id is #chartWithRotatedDataLabel.

#chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
     transform: translateY(20px)rotate(-90deg)
}

Following is a run anywhere dashboard to flip Data Label Orientation between Horizontal and Vertical.

alt text
Following is the Simple XML Dashboard code:

<form>
  <label>Chart Data Label Rotate</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
              transform: $tokDataLabelRotation$ !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="radio" token="tokDataLabelRotation" searchWhenChanged="true">
        <label>Data Label Rotation</label>
        <choice value="horizontal">Horizontal</choice>
        <choice value="vertical">Vertical</choice>
        <default>horizontal</default>
        <change>
          <condition value="vertical">
            <set token="tokDataLabelRotation">translateY(20px)rotate(-90deg)</set>
          </condition>
          <condition>
            <set token="tokDataLabelRotation">initial</set>
          </condition>
        </change>
      </input>
      <chart id="chartWithRotatedDataLabel">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart span=1h count</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">column</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">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
26 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎05-31-2018 11:54 AM

@vreddy28, you can use CSS Style override for Data Label text rotation using following CSS Selector where chart id is #chartWithRotatedDataLabel.

#chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
     transform: translateY(20px)rotate(-90deg)
}

Following is a run anywhere dashboard to flip Data Label Orientation between Horizontal and Vertical.

alt text
Following is the Simple XML Dashboard code:

<form>
  <label>Chart Data Label Rotate</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
              transform: $tokDataLabelRotation$ !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="radio" token="tokDataLabelRotation" searchWhenChanged="true">
        <label>Data Label Rotation</label>
        <choice value="horizontal">Horizontal</choice>
        <choice value="vertical">Vertical</choice>
        <default>horizontal</default>
        <change>
          <condition value="vertical">
            <set token="tokDataLabelRotation">translateY(20px)rotate(-90deg)</set>
          </condition>
          <condition>
            <set token="tokDataLabelRotation">initial</set>
          </condition>
        </change>
      </input>
      <chart id="chartWithRotatedDataLabel">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart span=1h count</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">column</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">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
26 KB
Reply
Solved! Jump to solution

niketn
Legend
‎06-04-2018 06:11 AM

@vreddy28 do accept the answer to mark this question as answered and help out others facing similar challenge.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

james_n
Path Finder
‎04-23-2019 01:52 AM

@niketnilay this is working fine in Chrome but not working in explorer. could you please help me on this.

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎04-23-2019 09:07 AM

@james_n I could not get this to work on Internet Explorer. This is more of a CSS question rather than Splunk capability for IE. I event tried the following CSS for all browser and it worked on Chrome, Edge, Firefox but not on IE 😞

       #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
           transform: $tokDataLabelRotation$ !important;
          -ms-transform: $tokDataLabelRotation$ !important;
          -webkit-transform: $tokDataLabelRotation$ !important;
          -moz-transform: $tokDataLabelRotation$ !important;
          -o-transform: $tokDataLabelRotation$ !important;
       }
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey
Get Updates on the Splunk Community!

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...

Data Persistence in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. What happens if the OpenTelemetry collector ...

Thanks for the Memories! Splunk University, .conf25, and our Community

Thank you to everyone in the Splunk Community who joined us for .conf25, which kicked off with our iconic ...