Dashboards & Visualizations

SplunkJS code check

ChrisCLewis
Communicator

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]
}]
});

0 Karma

RngFox
Explorer

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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

0 Karma

ChrisCLewis
Communicator

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

0 Karma