Dashboards & Visualizations

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

Path Finder

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?

alt text

Thanks,
Sam

0 Karma

SplunkTrust
SplunkTrust

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

alt text

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.

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

Path Finder

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

0 Karma

SplunkTrust
SplunkTrust

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
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

SplunkTrust
SplunkTrust

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?

0 Karma

Path Finder

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"
0 Karma