Dashboards & Visualizations

Integrate highcharts.js or D3.js or charts.js into Splunk for advanced visualizations ?

pgadhari
Builder

Hi All,

I am currently looking for and want to evaluate various js charts into Splunk. I need suggestion what would be the best JS libraries to easily integrate with Splunk without much development efforts ? Also, I need to know what JD charts are licensed and which once are free, so that I can budget the requirements accordingly.

Also, how easy it would be to integrate without much knowledge on javascript and XML ? Please advise ? I can add more questions, once I get reply on this. Thanks.

0 Karma
1 Solution

chrisyounger
SplunkTrust
SplunkTrust

Hi pgadhari,

You can create custom visualisations using any chart library you like. Splunk has some good examples for how to do this for example here: https://docs.splunk.com/Documentation/Splunk/7.2.3/AdvancedDev/CustomVizTutorial

I would say this is "easy" if you already have some javascript/web development experience, but its hard if you don't.

  • Don't pay for full version chart libraries until you have determined if it will work for you or not. Pretty much all chart libraries provide a trial version.
  • D3 is free
  • Paying for support to highcharts for example, they typically won't know how to integrate it with Splunk.

Maybe try ask another question asking more specifically about exactly you are trying to achieve. The user group here will probably be able to suggest good options to you.

All the best 🙂

View solution in original post

chrisyounger
SplunkTrust
SplunkTrust

Hi pgadhari,

You can create custom visualisations using any chart library you like. Splunk has some good examples for how to do this for example here: https://docs.splunk.com/Documentation/Splunk/7.2.3/AdvancedDev/CustomVizTutorial

I would say this is "easy" if you already have some javascript/web development experience, but its hard if you don't.

  • Don't pay for full version chart libraries until you have determined if it will work for you or not. Pretty much all chart libraries provide a trial version.
  • D3 is free
  • Paying for support to highcharts for example, they typically won't know how to integrate it with Splunk.

Maybe try ask another question asking more specifically about exactly you are trying to achieve. The user group here will probably be able to suggest good options to you.

All the best 🙂

pgadhari
Builder

ok thanks for that information. suppose I want to integrate one of the doughnut chart.js in Splunk ? can you help on how to do it from the scratch, as the javascript is already available for that ? I know there is a donut chart visualization, but in that I cannot do Semi-circule donut chart ? I am looking for semi-circle donut chart. Hence, please help as to how we can integrate this with Splunk ? Thanks.

https://www.chartjs.org/samples/latest/charts/doughnut.html

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

Hi @pgadhari

I needed to sharpen my visualisation skills anyway, so I created an app for you. See screenshots and example usage here: https://github.com/ChrisYounger/semicircle_donut you can download the app from here: https://github.com/ChrisYounger/semicircle_donut/releases

I have submitted it to Splunkbase for approval so hopefully it will be approved on Monday.

Hope you find it helpful.
Chris.

pgadhari
Builder

Thanks Chris. I will check it out and revert for any queries.

0 Karma

pgadhari
Builder

@chrisyoungerjds - The semicircle_donut app is working fine. But I cannot do the drilldown on that ? How can we enable the drilldown option in it ?

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

Hmm I'll need to look into that for you. Ill try add the functionality in the next couple of days.

0 Karma

pgadhari
Builder

Sure thanks. But appreciate - if it can be done early.

Also can you let me know the steps you did for integrating that semicircle_donut into Splunk ? I am also trying to integrate some of the charts.js into Splunk.

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

OK there is a new version on splunkbase with drilldowns

pgadhari
Builder

Thank you so much @chrisyoungerjds for your extended support. Appreciate it.

Can you also send me the step by step guide of how we can integrate other Charts.js into Splunk ? I am also trying to learn, so that I can use other visualizations from charts.js in my Splunk apps.

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

I am sorry but I don't have time to write a guide. I just learnt from the documentation here: https://docs.splunk.com/Documentation/Splunk/7.2.4/AdvancedDev/CustomVizDevOverview and you can see how I implemented chart.js mostly here: https://github.com/ChrisYounger/semicircle_donut/blob/master/appserver/static/visualizations/semicir...

I looked at the other chart.js samples and chart types but I was unable to find anything particularly unique and that doesn't already exist.

pgadhari
Builder

Actually I am looking for below linechart to be integrated into Splunk from charts.js library, wherein we can click on each line to make it disappear and visualize the needed one. That is the reason I asked, how once should start with it ?

I understand your time commitments, but thanks again for your time. I will go through the documentation and try myself for below chart integration.

https://www.chartjs.org/samples/latest/charts/line/basic.html

0 Karma

niketn
Legend

@pgadhari I think this requirement of yours for a Line Chart with Series Compare from your original question for Donut Chart integration which @chrisyoungerjds has already provided. However, if you are on Splunk Enterprise 7+ you can use charting.legend.mode as seriesCompare to enable Series Comparison for Line or Area chart. Refer to documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#Area.2C_Bubble.2...

You can also try out Horizon Chart Custom Visualization built by Splunk.

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

pgadhari
Builder

@niketnilay - Currently, I am on 6.6.3 and we are planning for upgrade to latest versions in sometime. I think by that time, I will hold on checking the option you have specified.

0 Karma

niketn
Legend

@pgadhari Then try out Horizon Chart Custom Visaulization.

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

pgadhari
Builder

Sure.. will check on that. thanks.

0 Karma

niketn
Legend

@pgadhari if you want to integrate something without coding JS and XML then you should search for Custom Visualizations that have already been built on Splunkbase: https://splunkbase.splunk.com/apps/#/search/Custom%20visualization/

If you can code JS and XML you can import D3, Highcharts and other JS libraries as Custom Visualizations using Splunk Custom Visualization API

Do let us know which custom visualization are you looking for.

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

pgadhari
Builder

@niketnilay - I have gone through most of the custom visualizations on Splunk base, but some of them only are applicable to my use cases so far. But, I am planning to show some advanced visualizations for the dashboards, so was thinking that whether I should go for licensed versions of Highcharts ?. I know :

  1. Chart.js is free, but how easy is to integrate it with Splunk ?
  2. Whether it is worth, buying licensed version of highcharts libraries ? whether this integration will be simple ?
  3. I am not sure whether D3.js is free or licensed ? do you have any idea on that ?

I can learn the JS and XML to further integrate above libraries, but I want to know which library to go for or buying licensed version will provide me support from highcharts for Splunk integration stuff ? Please advise ?

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...