Get the hex number of a color (in a chart) associated with a specific value?

[brinley]

I'd like to add an icon to a value in a table whose color matches the color associated with that value in a chart. I can't hard-core the color in my script because the color must be set randomly. Any ideas?

[niketn]

@brinley, if the Table color matches the color in the chart would that suffice your need? Can you try the following run anywhere example based on Splunk's _internal index?

Following is the Simple XML code for run anywhere example used above

<dashboard>
  <label>Chart and Table Colors</label>
  <search id="baseSearch">
    <query>index=_internal sourcetype=splunkd log_level!=INFO
    | bin _time span=1h
    | stats count by _time component
    </query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <title>Top 10 Error Components</title>
      <chart>
        <title>Timechart</title>
        <search base="baseSearch">
          <query>| timechart count by component useother=f usenull=f limit=0</query>
        </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">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">minimal</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>
      <table>
        <title>Total Tabular</title>
        <search base="baseSearch">
          <query>| stats sum(count) as Total by component</query>
        </search>
        <format type="color" field="component">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

[brinley]

@niketnilay Thanks for this. Can you show me how to do this using html and splunkJS?

[niketn]

@brinley any specific reason for SplunkJS when this can be done directly in SimpleXML?

If you really want SplunkJS you will have to get the Series Colors in JS as an array, iterate though the Cell which needs to be colored based on index.

Following is the Splunk Documentation which gives the seriesColors used in Splunk. PS: It has changed post 6.6. So pick the documentation as per your need.

https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_pr...

[0x1e93c6, 0xf2b827, 0xd6563c, 0x6a5c9e, 0x31a35f, 0xed8440, 0x3863a0, 0xa2cc3e, 0xcc5068, 0x73427f, 0x11a88b, 0xea9600, 0x0e776d, 0xffb380, 0xaa3977, 0x91af27, 0x4453aa, 0x99712b, 0x553577, 0x97bc71, 0xd35c2d, 0x314d5b, 0x99962b, 0x844539, 0x00b290, 0xe2c188, 0xa34a41, 0x44416d, 0xe29847, 0x8c8910, 0x0b416d, 0x774772, 0x3d9988, 0xbdbd5e, 0x5f7396, 0x844539]

[brinley]

@niketnilay I need to do this in SplunkJS because I'm working on an application that has been fully converted to html, and I'm assuming there's no way to do this in html so my only option is SplunkJS.

How do I "iterate through" each cell? Can you provide some example code to show me how to do this?

Thanks!

[niketn]

@brinley you are right. Table Color formatting through colorPalette is only available in Simple XML dashboards and not HTML dashboards. So you would need to use a SimpleXML JS extension hack to color table cell using values from other cell.

Refer to Option 2 of one of my older answers which merges two columns i.e. one column with values to be colored and second column with the logic for color to be applied: https://answers.splunk.com/answers/686288/how-do-you-highlight-a-table-cell-based-on-a-field.html

You can mold this approach to create a new column with sequence numbers (indexForColor) from 0 to n-1 where your table has n results. Each of this indexForColor value can then be used to access the color code in the static series color list that I had provided above.

Following streamstats command created the index field which along with your existing field can be used to create a new field which will be iterated using SplunkJS.

 <yourCurrentSearchWithResults>
| streamstats count as indexForColor
| eval indexForColor=indexForColor-1

Please try out this approach and let us know if you need further details.