Solved: How to delete the date category on a visualization...

belomv · ‎02-01-2018

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

niketn · ‎02-01-2018

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

<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

niketn · ‎02-01-2018

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

<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!!!"

ohernandez · ‎11-12-2024

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!

felipesewaybric · ‎02-01-2018

you can change the timestamp format, one way is:

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

How to delete the date category on a visualization?

A Season of Skills: New Splunk Courses to Light Up Your Learning Journey

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to ...

Splunk Observability for AI

Join the Conversation

How to delete the date category on a visualization?

A Season of Skills: New Splunk Courses to Light Up Your Learning Journey

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to ...

Splunk Observability for AI