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

[pgadhari]

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.

[chrisyounger · Accepted solution]

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]

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

[chrisyounger]

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]

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

[pgadhari]

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

[chrisyounger]

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

[pgadhari]

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.

[chrisyounger]

OK there is a new version on splunkbase with drilldowns

[pgadhari]

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.

[chrisyounger]

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]

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

[niketn]

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

[pgadhari]

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

[niketn]

@pgadhari Then try out Horizon Chart Custom Visaulization.

[pgadhari]

Sure.. will check on that. thanks.

[niketn]

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

[pgadhari]

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