topic Re: How to modify the color coding of a forecast graph in Dashboards & Visualizations

How to modify the color coding of a forecast graph

mohfarha — Fri, 04 Apr 2025 09:45:31 GMT

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

Re: How to modify the color coding of a forecast graph

ITWhisperer — Fri, 04 Apr 2025 10:53:26 GMT

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>

Re: How to modify the color coding of a forecast graph

mohfarha — Fri, 04 Apr 2025 12:21:29 GMT

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.

Re: How to modify the color coding of a forecast graph

ITWhisperer — Sat, 05 Apr 2025 07:57:09 GMT

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