Dashboards & Visualizations

Using charting.lineDashStyle to edit only one line in graph

Explorer

I have created a stacked bar chart with two line overlays, of which one line is a target and therefore would like to edit the xml so that this appears in a dash format, whilst the other line remains solid. Is this possible? Or can this only be done for all lines in graph.

0 Karma
1 Solution

SplunkTrust
SplunkTrust

@jackreeves, fromSplunk Enterprise 7.0 this feature is inbuilt i.e. different series can have different styles applied through new Simple XML Chart Configuration called charting.fieldDashStyles

Foe example if you have two series field1 and field2 you can apply the following:

<option name="charting.fieldDashStyles">{"field1":"solid", "field2":"shortDash"}</option>

You can check out the same in Splunk 7.0 Overview App from Splunkbase
or read the documentation for Simple XML Chart Configuration and various series style options: http://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_pro...

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

View solution in original post

SplunkTrust
SplunkTrust

@jackreeves, fromSplunk Enterprise 7.0 this feature is inbuilt i.e. different series can have different styles applied through new Simple XML Chart Configuration called charting.fieldDashStyles

Foe example if you have two series field1 and field2 you can apply the following:

<option name="charting.fieldDashStyles">{"field1":"solid", "field2":"shortDash"}</option>

You can check out the same in Splunk 7.0 Overview App from Splunkbase
or read the documentation for Simple XML Chart Configuration and various series style options: http://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_pro...

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

View solution in original post

SplunkTrust
SplunkTrust

@jackreeves, you can do this using Simple XML CSS Extension.

svg displays series lines with various dash styles using stroke-dasharray while drawing the path. Refer to svg example on w3schools: https://www.w3schools.com/graphics/svg_stroking.asp

Since you know the CSS selector for override is based on position of series rather than name of the series in svg chart, you would need to ensure the following:
1) Your field target should be at specific position and should always be present. In following example there are two series and target series is at second position. Following are the selectors provided chart id is id="chart1". The CSS override converts target series to Solid (even the Legend for target field). The other series/s should retain the line dash style set by Simple XML Chart configuration charting.lineDashStyle i.e. <option name="charting.lineDashStyle">dashDot</option>

  <html depends="$alwaysHideCSS$">
    <style>
      #chart1 svg g.highcharts-series-group g.highcharts-series:nth-child(3) path:nth-child(1){
        stroke-dasharray:none;
      }
      #chart1 svg g.highcharts-legend g g g.highcharts-legend-item:nth-child(2) path{
        stroke-dasharray:none;
      }
    </style>
  </html>

alt text

Following is the complete Simple XML example with a run anywhere search:

<dashboard>
  <label>Line Dash Style CSS Override</label>
  <row>
    <panel>
      <html depends="$alwaysHideCSS$">
        <style>
          #chart1 svg g.highcharts-series-group g.highcharts-series:nth-child(3) path:nth-child(1){
            stroke-dasharray:none;
          }
          #chart1 svg g.highcharts-legend g g g.highcharts-legend-item:nth-child(2) path{
            stroke-dasharray:none;
          }
        </style>
      </html>
      <chart id="chart1">
        <search>
          <query>index=_internal sourcetype=splunkd
| stats count by component
| accum count as target</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">500</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-90</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.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</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.overlayFields">Cumu</option>
        <option name="charting.chart.showDataLabels">none</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">ellipsisStart</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineDashStyle">dashDot</option>        
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"