How can I make a stacked bar chart not display zeros?

samwatson45 — Tue, 29 May 2018 12:50:00 GMT

Hi,

If I have a stacked bar graph and I want to display two types of values for each one, how can I make the null (0) values not be displayed like below?

Thanks,
Sam

Re: How can I make a stacked bar chart not display zeros?

somesoni2 — Tue, 29 May 2018 15:08:18 GMT

What's you query generating this graph? If one of the value is null/0, do you want to completely eliminate whole set of data for that month?

Re: How can I make a stacked bar chart not display zeros?

niketn — Tue, 29 May 2018 15:24:55 GMT

@samwatson45, I am on Splunk 7.1 and I tried to mimic 0 in Stacked Chart using Timechart and Chart commands. But 0 Data Label shows up only when Min/Max is used. 0 does not show up in 7.1 as data label when Show All option is used (refer to the screenshot below from 7.1).

Since you are on an older version I have the following example using Simple XML JS Extension and SplunkJS Stack to hide Data Label from ChartView based on condition (in your case it will be 0, in the example below it is 1). Please try out and confirm.

This same Example can be extended to hide Data Labels in specific range as well.

Following is the code for Simple XML Dashboard:

<dashboard script="hide_stacked_chart_datalabel_based_on_value.js">
  <label>Stacked Chart Hide Data Label Based On Value</label>
  <row>
    <panel>
      <chart id="myChart">
        <title>Table with jQuery Selector to Hide Data Label (Example Uses Data Label Value=1)</title>
        <search id="baseSearchTimeChart">
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| bin span=1h _time
| eval Time=strftime(_time,"%H").":00"
| chart count by Time log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">400</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</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">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">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>
      <chart id="myChartWithoutJqueryToHideDataLabels">
        <title>Table without jQuery Selector to Hide Data Label</title>
        <search base="baseSearchTimeChart">
          <query></query>
        </search>
        <option name="height">400</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</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">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">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>
  </row>
  <row>
    <panel>
      <table >
        <title>Table without jQuery Selector to Hide Data Label</title>
        <search base="baseSearchTimeChart">
          <query></query>
        </search>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </table>
    </panel>
  </row>  
</dashboard>

Following is the JavaScript Code for hide_stacked_chart_datalabel_based_on_value.js. The script file needs to be placed under appserver/static folder i.e. (if the folder appserver/staticdoes not exist, the same would need to be created: $SPLUNK_HOME/etc/apps/<yourSplunkAppName>/appserver/static. Following example hides 1 from Data Label but the same can be changed to 0 or any other value or range to hide data labels accordingly by changing the condition strDataLabel == "1". (For simplicity sake I have kept as string but the same can be converted to Int/Float as required)

require([
    "splunkjs/mvc",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/simplexml/ready!"
], function (
    mvc
) {
        //Get Single Value by id=singleValueWithMouseover set in SimpleXML <single id="singleValueWithMouseover">
        mvc.Components.get('myChart').getVisualization(function (chartView) {
            chartView.on('rendered', function () {
                // Select highcharts data labels with 0 value #myChart svg g.highcharts-data-labels g.highcharts-label text tspan
                $("#myChart svg g.highcharts-data-labels g.highcharts-label text tspan").each(function () {
                    //Iterate through each data label. Access through "$(this)" selector
                    var strDataLabel = $(this).text();
                    if (strDataLabel == "1") {
                        console.log("Hiding Unwanted Data Label");
                        $(this).hide();
                    };
                });
            });
        });
    });

PS: Since this example involves static JS file, it would require restart/refresh or bump of your Splunk instance and may need you to clear internet browser history for the changes to reflect.

Re: How can I make a stacked bar chart not display zeros?

samwatson45 — Tue, 29 May 2018 15:47:37 GMT

Thanks for your reply!

When you say the script needs to be placed in a folder, where do I go within the Splunk window to access this?

Thanks,
Sam

Re: How can I make a stacked bar chart not display zeros?

samwatson45 — Tue, 29 May 2018 15:56:11 GMT

The query is a bit odd, I am essentially using a manually uploaded csv to calculate the number of hours spent at certain locations for each month.

| inputlookup  file.csv   | eval hours=mondayhours + tuesdayhours+ wednesdayhours + thursdayhours + fridayhours+ saturdayhours + sundayhours | eval date=substr(date,4,len(date)-0) | chart sum(hours) by date, location | rename date AS "Month"

Re: How can I make a stacked bar chart not display zeros?

niketn — Tue, 29 May 2018 16:14:58 GMT

Ideally you can just navigate and put it under the specific folder where Splunk is installed under your app's folder.

If you want to do it from UI, you can navigate to Apps --> Manage App or directly from URL http://<yourSplunkURL>/en-US/manager/search/apps/local

Then Find your App and Click Edit Properties to navigate to App's Edit page. Choose Upload Asset and click on the JavaScript File to be uploaded to your App's Appserver static folder.

In order to test you can type in the following URL, which will show the uploaded JavaScript file code in the Browser or else throw 404 error if file is missing:

http://<yourSplunkURL>/en-US/static/app/<yourAppName>/<yourJSFile>.js

topic Re: How can I make a stacked bar chart not display zeros? in Dashboards & Visualizations

How can I make a stacked bar chart not display zeros?

Re: How can I make a stacked bar chart not display zeros?

Re: How can I make a stacked bar chart not display zeros?

Re: How can I make a stacked bar chart not display zeros?

Re: How can I make a stacked bar chart not display zeros?

Re: How can I make a stacked bar chart not display zeros?