Dashboards & Visualizations

Can we have any background image on a line chart in Splunk?

nadlurinadluri
Communicator

Can we have any background image on a line chart in Splunk? Like I will have my line chart, which does its job (with a plain background image); But, I want to have a different image (not background color alone) altogether, and I want to display my line chart on top of it, instead of that plain background image.

Please suggest.

Thanks

0 Karma
1 Solution

vnravikumar
Champion

Hi @nadlurinadluri

Try this and let me know

<dashboard>
  <label>chart background</label>
  <row>
    <panel>
      <html>
        <style>
           #test{
            background-image: url("/static/app/search/bg.jpg");
          }
         #test rect {
          fill:none;
          }

        </style>
      </html>
      <chart id="test">
        <title>Test Image background</title>
        <search>
          <query>index=_internal | timechart  count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</dashboard>

alt text

View solution in original post

Bart
Engager

Hi,

how do I implement this as simple as possible  in Version:7.3.5, seems not working as per above example, I have tried to play around with no avail. Thanks

0 Karma

vnravikumar
Champion

Hi @nadlurinadluri

Try this and let me know

<dashboard>
  <label>chart background</label>
  <row>
    <panel>
      <html>
        <style>
           #test{
            background-image: url("/static/app/search/bg.jpg");
          }
         #test rect {
          fill:none;
          }

        </style>
      </html>
      <chart id="test">
        <title>Test Image background</title>
        <search>
          <query>index=_internal | timechart  count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</dashboard>

alt text

nadlurinadluri
Communicator

Thanks for the answer. It certainly worked.

0 Karma

vnravikumar
Champion

Welcome 🙂

0 Karma

preacher_15
Explorer

Hi, I have one question, in background-image: url ("/static/app/search/bg.jpg");
which URL i am supposed to put?
path: C:\Program Files\Splunk\etc\apps\aapname\appserver\static\images
this is my path.
when i put the image in above mentioned path and use the same in xml its not reflecting....can you help me out?

0 Karma

vnravikumar
Champion

Hi @preacher_15

I had image in appserver/static folder

0 Karma

vnravikumar
Champion

under search app

0 Karma

preacher_15
Explorer

I am still not able to get it....i have a placed an image under C:\Program Files\Splunk\etc\apps\aapname\appserver\static and copied the same url in xml.....what am i missing here?
and one more thing in your case if search is the app why have you put it inside the static folder? shouldn't it be something like app\search(appname)\static\image?
I am still a novice in splunk...so please help.

0 Karma

vnravikumar
Champion

Hi @preacher_15

Try the following

<html>
         <style>
            #test{
             background-image: url("/static/app/test/img/yoga-1805784_1280.png");
           }
          #test rect {
           fill:none;
           }

         </style>
       </html>

Here test is the app and I had created img folder under /opt/splunk/etc/apps/test/appserver/static/img/

check the url for the folder structures

http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUC

preacher_15
Explorer

Hi @vnravikumar
I tried doing the way you told but no luck 😞
Anyways thank you very much for the help.

0 Karma

vnravikumar
Champion

Hi @preacher_15

Can you please inspect the corresponding div with the browser, to know whether the path is substituted correctly for the image.

0 Karma

preacher_15
Explorer

Hi @vnravikumar i did as you told..
Failed to load resource: the server responded with a status of 404 (Not Found)
this is the error its showing.

0 Karma

@preacher_15 if the following location is where you have static image: C:\Program Files\Splunk\etc\apps\aapname\appserver\static\images you should try out

 background-image: url("/static/app/aapname/images/<yourImageFileName>.png");

You can also test the static file whether it is loaded successfully or not (since static files need bump, refresh or restart of Splunk along with Internet Browser history cleanup). Typing the following in the browser URL should ideally open the image file if the same has loaded successfully.

http://<yourSplunkServer>/en-US/static/app/<yourAppName>/images/<yourFileName.png>;

When any image does not load and you get 404 error, you can always click on the Browser's console log error and expand to the the resolved URL path in the browser. If it is navigating to incorrect path you would need to correct the same.
Refer to one of my older answers: https://answers.splunk.com/answers/552333/how-do-i-add-a-picture-to-my-dashboard-v-66.html

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

preacher_15
Explorer

thank you.. it worked. 🙂

0 Karma

jkat54
SplunkTrust
SplunkTrust
0 Karma
Get Updates on the Splunk Community!

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...

Ready, Set, SOAR: How Utility Apps Can Up Level Your Playbooks!

 WATCH NOW Powering your capabilities has never been so easy with ready-made Splunk® SOAR Utility Apps. Parse ...