Dashboards & Visualizations
×

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

How to delete the date category on a visualization?

belomv
Engager
‎02-01-2018 07:18 AM

Hello
How can I hide or delete the DATE category on a visualization? I want to see only time on the graph.

Search:

index...source… sourcetype… | timechart sum(CNT) by DELIVER_STATUS

alt text

Preview file
22 KB
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎02-01-2018 10:38 AM

@belomv, you can do this by adding the following CSS Style Override to hide x-axis label text with tspan at 2nd and 3rd position which are used for "Week Day, Month, Date" and "Year" resepectively. For the following example Chart id is myTimeChart1 to apply the CSS to specific chart (you can generalize as per your use case). Also in order for such change you should ensure that Hours are returned only for one day i.e. Today, Yesterday etc.

      <html>
        <style>
          #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
            visibility: hidden !important;
          }
        </style>
      </html>

Following is a run anywhere dashboard example based on timechart built on Splunk's _internal index.

alt text

<dashboard>
  <label>Hide Weekday Date and Year from Timechart</label>
  <row>
    <panel>
      <html>
        <style>
          #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
            visibility: hidden !important;
          }
        </style>
      </html>
      <chart id="myTimeChart">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component!="Conf*"
| timechart count by component limit=5 useother=f usenull=f</query>
          <earliest>@d</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">area</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">stacked</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">ellipsisEnd</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>
  </row>
</dashboard>

Please try out and confirm!

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

View solution in original post

Reply
Solved! Jump to solution
Solution

niketn
Legend
‎02-01-2018 10:38 AM

@belomv, you can do this by adding the following CSS Style Override to hide x-axis label text with tspan at 2nd and 3rd position which are used for "Week Day, Month, Date" and "Year" resepectively. For the following example Chart id is myTimeChart1 to apply the CSS to specific chart (you can generalize as per your use case). Also in order for such change you should ensure that Hours are returned only for one day i.e. Today, Yesterday etc.

      <html>
        <style>
          #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
            visibility: hidden !important;
          }
        </style>
      </html>

Following is a run anywhere dashboard example based on timechart built on Splunk's _internal index.

alt text

<dashboard>
  <label>Hide Weekday Date and Year from Timechart</label>
  <row>
    <panel>
      <html>
        <style>
          #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
            visibility: hidden !important;
          }
        </style>
      </html>
      <chart id="myTimeChart">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component!="Conf*"
| timechart count by component limit=5 useother=f usenull=f</query>
          <earliest>@d</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">area</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">stacked</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">ellipsisEnd</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>
  </row>
</dashboard>

Please try out and confirm!

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

ohernandez
New Member
‎11-12-2024 04:29 PM

Hello @niketn , 

Thanks your help and contributions to the Splunking community. 

I have a question for you: Can we remove the categories from a Splunk Dashboard made with the Dashboard Studio app? Since they're json I tried using "xAxisText":"" to no avail. 

 

Thanks in advance!

0 Karma
Reply
Solved! Jump to solution

felipesewaybric
Contributor
‎02-01-2018 09:55 AM

you can change the timestamp format, one way is:

| timechart span=1d count by source | convert timeformat=""%H:%M"" ctime(_time) AS _time

0 Karma
Reply
Get Updates on the Splunk Community!

Building Reliable Asset and Identity Frameworks in Splunk ES

 Accurate asset and identity resolution is the backbone of security operations. Without it, alerts are ...

Cloud Monitoring Console - Unlocking Greater Visibility in SVC Usage Reporting

For Splunk Cloud customers, understanding and optimizing Splunk Virtual Compute (SVC) usage and resource ...

Automatic Discovery Part 3: Practical Use Cases

If you’ve enabled Automatic Discovery in your install of the Splunk Distribution of the OpenTelemetry ...