So, the error was in circle_packing.js file with formatdata function i.e. the data was not in the proper flare format which is required for circle packing chart. Also there was a little change in the query syntax.
Here are the updated files which worked for me.
Dashboard Xml file -
<form script="autodiscover.js">
<row>
<html>
<div id="customsearch1"
class="splunk-manager"
data-require="splunkjs/mvc/searchmanager"
data-options='{
"search": { "type": "token_safe", "value": "| tstats summariesonly=true count from
datamodel=Vulnerabilities where Vulnerabilities.dest=\"192.168.1.84\" by Vulnerabilities.signature,Vulnerabilities.severity| 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
| rename Vulnerabilities.signature as signature | rename Vulnerabilities.dest as dest" }
}'>
</div>
<div align="center" valign="middle" id="custom"
class="splunk-view"
data-require="app/acalvio_app2/components/circle_packing/circle_packing"
data-options='{
"managerid": "customsearch1"
}'>
</div>
</html>
</row>
</form>
circle_packing.js -
/*Chart-cloud visualization
* This view is an example for a simple visualization based on search results
*/
define(function(require, module) {
var _ = require('underscore');
var d3 = require("../d3/d3");
var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');
var Drilldown = require('splunkjs/mvc/drilldown');
require("css!./circle_packing.css");
var CircleChart = SimpleSplunkView.extend({
moduleId: module.id,
className: 'circlechart-viz',
options: {
data: 'preview'
},
output_mode: 'json',
createView: function() {
this.$el.html('');
return true;
},
formatData: function(data) {
console.log(data);
var newData = { name :"", children : [] };
var map = [];
for( i in data){
var sign = data[i].signature;
if(!map[sign]) map[sign] = [];
map[sign].push({"dest":data[i].dest,"count":data[i].count});
}
for(j in map){
var hosts = [];
for(k in map[j]){
if(map[j][k].count){
hosts.push({"name":map[j][k].dest,"size":map[j][k].count});
}
}
if(hosts.length > 0)
newData.children.push({"name":j,"children":hosts});
}
console.log(newData);
return newData;
},
updateView: function(viz, data) {
console.log(data);
var diameter = 500,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var svg = d3.select(this.el).append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g");
//if (error) throw error;
var node = svg.datum(data).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
node.append("circle").attr("r", function(d) { return d.r; });
node.filter(function(d) { return d.depth>0; }).append("text")
.attr("dy", function(d){
if(!d.name)
return "-7em";
}
)
.attr("dx",function(d){
if(!d.name) return "3em";
})
.style("text-anchor", function(d){
if(!d.name) return "end";
if(d.depth === 2) return "middle";
return "start";
}
)
.text(function(d) {
if(d && d.depth === 2 && d.name)
return "*." + d.name.substring(d.r / 3);
if(d.parent)
return d.parent.name.substring(0,15);
return d.name;
});
d3.select(self.frameElement).style("height", diameter + "px");
}
});
return CircleChart;
});
... View more
