,Create dashboard xml file
<label>Circle chart</label>
<row>
<html>
<div align="center" valign="middle" id="custom"
class="splunk-view"
data-require="app/<Your_app>/components/circlechart/circlechart"
'>
</div>
</html>
</row>
then next create app//components/circlechart/circlechart.js file and paste the code given below.
/*
* Simple TagCloud visualization
* This view is an example for a simple visualization based on search results
*/
define(function(require, module) {
var _ = require('underscore'), $ = require('jquery');
var d3 = require("../d3.v3.min.js"); // create //d3js.org/d3.v3.min.js inside components folder
var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');
var Drilldown = require('splunkjs/mvc/drilldown');
var Circle= SimpleSplunkView.extend({
moduleId: module.id,
output_mode: 'json',
/* Create svg inside the create view*/
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};
},
/* result svg append to g tag inside the update view*/
updateView: function(viz, data) {
var diameter = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
viz.svg.
.append("g")
.attr("transform", "translate(2,2)");
d3.json("./flare.json", function(error, root) {
if (error) throw error;
var node = svg.datum(root).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.children; }).append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.name.substring(0, d.r / 3); });
});
d3.select(self.frameElement).style("height", diameter + "px");
}
});
return Circle;
});
at last return Circle will display the Circle chart
... View more