The data would be passed from splunk enterprise search.
I am following this tutorial
http://dev.splunk.com/view/SP-CAAAE2X#UIandvisualization
but still Formatdata function is unclear to me with respect to the circle packing chart. Please tell me how can i embed the code given here
http://bl.ocks.org/mbostock/4063530
in the formatdata function in wrapper code here
The xml code for the main dashboard is :-
<dashboard script="autodiscover.js" >
<row>
<panel>
<html>
<h2>Vulnerability Chart</h2>
<div id="circle_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager"
data-options='{"search":"| tstats summariesonly=true count from datamodel=Vulnerabilities where Vulnerabilities.dest="10.0.1.4" by Vulnerabilities.signature,Vulnerabilities.severity,Vulnerabilities.vendor_product | join max=0 Vulnerabilities.signature [| tstats summariesonly=true count from datamodel=Vulnerabilities where earliest=-4h@m latest=+0s by Vulnerabilities.signature,Vulnerabilities.dest ] | search Vulnerabilities.severity ="high" |stats count(Vulnerabilities.dest) as count by Vulnerabilities.signature,Vulnerabilities.dest "
,
"preview": true,
"earliest_time": "-1d@d",
"latest_time": "@d"
}'>
</div>
<div id="circle_chart" class="splunk-view" data-require="app/acalvio_app/components/circle_packing/circle_packing"
data-options='{
"managerid": "circle_search",
"root_label": "Vulnerability"
}'></div>
</html>
</panel>
</row>
</dashboard>
circle_packing.js code :-
define(function(require, exports, module) {
var _ = require("underscore");
var d3 = require("../d3/d3");
var SimpleSplunkView = require("splunkjs/mvc/simplesplunkview");
require("css!./circle_packing.css");
var Circle_chart = SimpleSplunkView.extend({
//className: "splunk-toolkit-chord-chart",
options: {
"managerid": null,
"data": "preview"
},
output_mode: "json",
initialize: function() {
SimpleSplunkView.prototype.initialize.apply(this, arguments);
},
createView: function() {
this.$el.html('');
var svg=d3.select(this.el).append("svg")
.attr("width", diameter)
.attr("height", diameter)
return { container: this.$el, svg: svg};
//return true;
},
// Making the data look how we want it to for updateView to do its job
formatData: function(data) {
var newData = { name :"root", children : [] },
levels = ["Vulnerabilities.signature"];
// For each data row, loop through the expected levels traversing the output tree
data.forEach(function(d){
// Keep this as a reference to the current level
var depthCursor = newData.children;
// Go down one level at a time
levels.forEach(function( property, depth ){
// Look to see if a branch has already been created
var index;
depthCursor.forEach(function(child,i){
if ( d[property] == child.name ) index = i;
});
// Add a branch if it isn't there
if ( isNaN(index) ) {
depthCursor.push({ name : d[property], children : []});
index = depthCursor.length - 1;
}
// Now reference the new child array as we go deeper into the tree
depthCursor = depthCursor[index].children;
// This is a leaf, so add the last element to the specified branch
if ( depth === levels.length - 1 ) depthCursor.push({ name : d.Vulnerabilities.dest, size : d.count });
});
});
return {
"name": this.settings.get("root_label"),
"children": data
};
//return formatted_data; // this is passed into updateView as 'data'
},
updateView: function(viz, data) {
this.$el.html("");
var diameter = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var vis = d3.select(this.el).append("svg:svg")
.attr("width", diameter)
.attr("height", diameter)
.append("svg:g")
.attr("transform", "translate(2,2)");
}
});
return Circle_chart;
});
circle_packing.css
circle {
fill: rgb(31, 119, 180);
fill-opacity: .25;
stroke: rgb(31, 119, 180);
stroke-width: 1px;
}
.leaf circle {
fill: #ff7f0e;
fill-opacity: 1;
}
text {
font: 10px sans-serif;
}
autodiscover.js
require.config({
paths: {
"app": "../app"
}
});
require(["splunkjs/mvc",'splunkjs/mvc/simplexml/ready!'], function(mvc){
require(['splunkjs/ready!'], function(){
// The splunkjs/ready loader script will automatically instantiate all elements
// declared in the dashboard's HTML.
});
});
I have no idea whether search query result data is incompatible to the flare.json or there's some error in my files . but when i open the dashboard it says "No search set" and no chart appears. Please help me figure this out.
Thanks in advance.
... View more