topic Re: SplunkJS code check in Dashboards & Visualizations

SplunkJS code check

ChrisCLewis — Fri, 13 Sep 2019 09:59:34 GMT

I am new to JS in general and shiny new to SplunkJS.

I've been looking for ways to change labels on a chart graph and came across this JS suggestion here ( https://jsfiddle.net/BlackLabel/nqb7fxd3 ).

From what I can see Splunk needs a 'wrapper' to go around the JS to work properly, so my question to the great and wise is the code below going to work?

require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
],var labels = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth']
Highcharts.chart('container', {
yAxis: {
labels: {
formatter: function() {
return labels[this.pos - 1]
}
}
},
series: [{
data: [3, 2, 4, 5]
}]
});

Re: SplunkJS code check

kamlesh_vaghela — Fri, 13 Sep 2019 10:38:03 GMT

@ChrisCLewis

Do you want to create Custom Splunk view in Splunk? If so then please check below link.
http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEQ8

Re: SplunkJS code check

ChrisCLewis — Fri, 13 Sep 2019 11:14:28 GMT

Hi, Thanks for the link, I am working my way through it.

I'm not going for a whole view, just change labels on graphs from numeric to a string.
using |chart sum(X) over Y by Z means you have to have numeric scales on the Y axis but need a description rather than numbers.
Using a script appears to be the only way

Re: SplunkJS code check

RngFox — Thu, 07 Nov 2019 08:27:00 GMT

Hi Chris,

in general the question is: why would you change your data, when it gets visualized?
I would shape the data in the Splunk-search and try to get away with it. 🙂

If you really want to the JS-path I would check out this Tutorial:
https://docs.splunk.com/Documentation/SplunkCloud/8.0.0/AdvancedDev/CustomVizTutorial

It will also tell you how to import JS-modules (like Highcharts used in your fiddle) and in the examples visualization_source.js you can aswell see how data is processed before it gets fed to the visual. So for which ever transformation on the data you need, it could be done in the formatData. In the updateView function, you could then feed the data to a Highcharts.chart().