Dashboards & Visualizations

How to modify the color coding of a forecast graph

mohfarha
New Member

I'm using forecast graph for my data and it shows the graph in below format:

1. Existing data shows in solid Blue line
2. Forecast data shows in dotted Blue line
3. Confidence level (upper limit and lower limit with blue)

I want to change the forecast data color (refer attached).Graph.png

Labels (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

There are a couple of ways you could do this as demonstrated below

<dashboard version="1.1" theme="light">
  <label>forecast</label>
  <row>
    <panel depends="$alwaysHidden$">
      <html>
        <style>
          #forecast g.highcharts-series-1.highcharts-line-series path.highcharts-graph {
            stroke: red;
          }
          #data g.highcharts-series-0.highcharts-line-series path.highcharts-graph {
            stroke: red;
            stroke-width: 3;
            data-z-index: 3;
          }
        </style>
      </html>
    </panel>
    <panel id="forecast">
      <viz type="Splunk_ML_Toolkit.ForecastViz">
        <search>
          <query>| inputlookup internet_traffic.csv | timechart span=120min avg("bits_transferred") as bits_transferred | eval bits_transferred=round(bits_transferred) | predict "bits_transferred" as prediction algorithm=LLP5 holdback=112 future_timespan=224 upper95=upper95 lower95=lower95 | `forecastviz(224, 112, "bits_transferred", 95)`</query>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="data">
      <viz type="Splunk_ML_Toolkit.ForecastViz">
        <search>
          <query>| inputlookup internet_traffic.csv | timechart span=120min avg("bits_transferred") as bits_transferred | eval bits_transferred=round(bits_transferred) | predict "bits_transferred" as prediction algorithm=LLP5 holdback=112 future_timespan=224 upper95=upper95 lower95=lower95 | `forecastviz(224, 112, "bits_transferred", 95)`</query>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>
0 Karma

mohfarha
New Member

Hi @ITWhisperer ,

Thank you for sharing the details. I configured the same in my source xml and I can modify the colors accordingly.

Can you also help me to change the legend color 'forecast' as it is not showing in green.

ColorGraph.png

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust
<dashboard version="1.1" theme="light">
  <label>forecast</label>
  <row>
    <panel depends="$alwaysHidden$">
      <html>
        <style>
          #forecast g.highcharts-series-1.highcharts-line-series path.highcharts-graph,
          #forecast g.highcharts-series-3.highcharts-legend-item path.highcharts-graph {
            stroke: red;
          }
          #data g.highcharts-series-0.highcharts-line-series path.highcharts-graph {
            stroke: red;
            stroke-width: 3;
            data-z-index: 3;
          }
        </style>
      </html>
    </panel>
    <panel id="forecast">
      <viz type="Splunk_ML_Toolkit.ForecastViz">
        <search>
          <query>| inputlookup internet_traffic.csv | timechart span=120min avg("bits_transferred") as bits_transferred | eval bits_transferred=round(bits_transferred) | predict "bits_transferred" as prediction algorithm=LLP5 holdback=112 future_timespan=224 upper95=upper95 lower95=lower95 | `forecastviz(224, 112, "bits_transferred", 95)`</query>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="data">
      <viz type="Splunk_ML_Toolkit.ForecastViz">
        <search>
          <query>| inputlookup internet_traffic.csv | timechart span=120min avg("bits_transferred") as bits_transferred | eval bits_transferred=round(bits_transferred) | predict "bits_transferred" as prediction algorithm=LLP5 holdback=112 future_timespan=224 upper95=upper95 lower95=lower95 | `forecastviz(224, 112, "bits_transferred", 95)`</query>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...

Splunk AppDynamics Agents Webinar Series

Mark your calendars! On June 24th at 12PM PST, we’re going live with the second session of our Splunk ...

SplunkTrust Application Period is Officially OPEN!

It's that time, folks! The application/nomination period for the 2025 SplunkTrust is officially open! If you ...