Is it possible to make a chart with lineDashStyle with random linestyles

[rrovers]

I want to use different linestyles in my chart without using fieldDashStyle because I don't want to make changes when the fieldname (which is a result of my search) changes.

If I use linedashstyle ALL the lines in the chart have the same style. I wonder if it is possible to let splunk choose different styles for each line within a chart.

example:

| chart values(cost) by Month Message

I want a chart with a different style for each Message without using fieldDashStyle.

[ITWhisperer]

For a bit more chaos / fun, you could set up some tokens with random values, however, this only works for the chart, the legend remains as complete lines but still with the correct colour

First, in an init block at the top of the dashboard set up some tokens; these are going to be used in a revolving set; I have used a set size of 5 but you can use more (or fewer)

  <init>
    <eval token="dashes_0">tostring((random() % 10) * 3 + 5).",".tostring((random() %5) * 2 + 5)</eval>
    <eval token="dashes_1">tostring((random() % 10) * 3 + 5).",".tostring((random() %5) * 2 + 5)</eval>
    <eval token="dashes_2">tostring((random() % 10) * 3 + 5).",".tostring((random() %5) * 2 + 5)</eval>
    <eval token="dashes_3">tostring((random() % 10) * 3 + 5).",".tostring((random() %5) * 2 + 5)</eval>
    <eval token="dashes_4">tostring((random() % 10) * 3 + 5).",".tostring((random() %5) * 2 + 5)</eval>
  </init>

Then in your style block, use one of the tokens for each child in the set

        <style>
          div[id="lineStyles"] g.highcharts-series-group g:nth-child(5n+0) path {
            stroke-dasharray: $dashes_0$ !important;
          }
          div[id="lineStyles"] g.highcharts-series-group g:nth-child(5n+1) path {
            stroke-dasharray: $dashes_1$ !important;
          }
          div[id="lineStyles"] g.highcharts-series-group g:nth-child(5n+2) path {
            stroke-dasharray: $dashes_2$ !important;
          }
          div[id="lineStyles"] g.highcharts-series-group g:nth-child(5n+3) path {
            stroke-dasharray: $dashes_3$ !important;
          }
          div[id="lineStyles"] g.highcharts-series-group g:nth-child(5n+4) path {
            stroke-dasharray: $dashes_4$ !important;
          }
        </style>

 The highcharts-series-group is the svg group that contains all the lines on the chart. This is why it only works for the chart and not the legend. The 5n+x is what selects one of the styles from the set of 5. If you had 10 different styles, you would use 10n+x where x goes from 0 to 9.

If you want to change the legend as well, you could use

div[id^="lineStyles"] g.highcharts-legend g g g:nth-child(5n+0) path

However, you might want to change the numbers used when setting up the tokens as, in this case, the dashes might be too long to distinguish between them in the legend.

[bowesmana · Accepted solution]

You could have a base search that will run a similar search as the main search producing your chart and then use the <done> clause of the search to assign tokens to the field values.

See this example where it creates 20 random host names and plots a 30 minute time chart. Each of the random host names is assigned a random line style and this is set up by the done clause of the base search - each reload of the dashboard will show different host names and different line styles.

Perhaps this can work if you have a limited set of results being returned - this handles 20

<dashboard>
  <label>Field Dash Style</label>
  <init>
    <set token="admin_tok">admin</set>
  </init>
  <search id="base">
    <query>
| makeresults
| eval h=mvrange(1,20)
| mvexpand h
| eval host="host".(random() % 4096 + 20)
| eval t=mvrange(1,31)
| mvexpand t
| eval v=random() % 60
| eval _time=_time-(t*60)
| timechart limit=20 fixedrange=f span=1m max(v) by host
    </query>
  </search>
  <search base="base">
    <query>
| head 1
| fields - _time _span
| transpose 0
| streamstats c
| fields - "row 1"
| transpose 0 header_field=c      
| foreach * [ eval "&lt;&lt;MATCHSTR&gt;&gt;_ls"=mvindex(split("dash|dashDot|dot|longDash|longDashDot|longDashDotDot|shortDash|shortDot|shortDashDot|shortDashDotDot|solid", "|"), random() % 11) ]
    </query>
    <done>
      <set token="f1">$result.1$</set>
      <set token="f2">$result.2$</set>
      <set token="f3">$result.3$</set>
      <set token="f4">$result.4$</set>
      <set token="f5">$result.5$</set>
      <set token="f6">$result.6$</set>
      <set token="f7">$result.7$</set>
      <set token="f8">$result.8$</set>
      <set token="f9">$result.9$</set>
      <set token="f10">$result.10$</set>
      <set token="f11">$result.11$</set>
      <set token="f12">$result.12$</set>
      <set token="f13">$result.13$</set>
      <set token="f14">$result.14$</set>
      <set token="f15">$result.15$</set>
      <set token="f16">$result.16$</set>
      <set token="f17">$result.17$</set>
      <set token="f18">$result.18$</set>
      <set token="f19">$result.19$</set>
      <set token="f20">$result.20$</set>
      <set token="ls_f1">$result.1_ls$</set>
      <set token="ls_f2">$result.2_ls$</set>
      <set token="ls_f3">$result.3_ls$</set>
      <set token="ls_f4">$result.4_ls$</set>
      <set token="ls_f5">$result.5_ls$</set>
      <set token="ls_f6">$result.6_ls$</set>
      <set token="ls_f7">$result.7_ls$</set>
      <set token="ls_f8">$result.8_ls$</set>
      <set token="ls_f9">$result.9_ls$</set>
      <set token="ls_f10">$result.10_ls$</set>
      <set token="ls_f11">$result.11_ls$</set>
      <set token="ls_f12">$result.12_ls$</set>
      <set token="ls_f13">$result.13_ls$</set>
      <set token="ls_f14">$result.14_ls$</set>
      <set token="ls_f15">$result.15_ls$</set>
      <set token="ls_f16">$result.16_ls$</set>
      <set token="ls_f17">$result.17_ls$</set>
      <set token="ls_f18">$result.18_ls$</set>
      <set token="ls_f19">$result.19_ls$</set>
      <set token="ls_f20">$result.20_ls$</set>
    </done>
  </search>
  <row>
    <panel>
      <chart>
        <search base="base">
          <query/>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">collapsed</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">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.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.fieldDashStyles">{"$f1$": "$ls_f1$", "$f2$": "$ls_f2$", "$f3$": "$ls_f3$", "$f4$": "$ls_f4$", "$f5$": "$ls_f5$", "$f6$": "$ls_f6$", "$f7$": "$ls_f7$", "$f8$": "$ls_f8$", "$f9$": "$ls_f9$", "$f10$": "$ls_f10$", "$f11$": "$ls_f11$", "$f12$": "$ls_f12$", "$f13$": "$ls_f13$", "$f14$": "$ls_f14$", "$f15$": "$ls_f15$", "$f16$": "$ls_f16$", "$f17$": "$ls_f17$", "$f18$": "$ls_f18$", "$f19$": "$ls_f19$", "$f20$": "$ls_f20$}</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="height">428</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

[rrovers]

I've tried this. Because the result of my program looks something like "myprogram: Message1-v1" and "myprogram: Message2-v1" it doesn't seem to work. When I rename it, it works fine. But my goal is to use no renames because then I have to change the search when something changes in the result of the search (for example when the result is also "myprogram: Message1-v2 ).

[rrovers]

@bowesmana After replacing the ":" by "-" in myprogram: Message1-v1 it works fine for me. Thanks!

[ITWhisperer]

Give your chart an id and apply styles to the different highcharts-series path e.g for the first series

    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="lineStyles"] g.highcharts-series-1 path {
            stroke-dasharray: 3,3 !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <chart id="lineStyles">