I will assume you have taken the steps in the developer manual here : http://help.sap.com/businessobject/product_guides/AAD12/en/ds12_dev_guide_en.pdf
To create a new SDK extension. The steps are described in paragraph 3.2.
The following code will result in this graph :
1 Create CSS :
Add the following line to contribution.xml
<cssInclude>res/css/component.css</cssInclude>
Add the following CSS code to res/css/component.css
.axistext{
font:10pxsans-serif;
}
.axispath,
.axisline{
fill:none;
stroke:#000;
shape-rendering:crispEdges;
}
.x.axispath{
display:none;
}
benchmarkbar_label{
position:absolute;
top:10px;
right:10px;
}
.benchmarkbar_benchmark{
fill:steelblue;
fill-opacity:.9;
}
.benchmarkbar_other{
fill:steelblue;
fill-opacity:.6;
}
2 Create the component
Make sure that the following line is in the contribution.xml file
<jsInclude>res/js/component.js</jsInclude>
Add the following code to res/js/component.js
varBENCHMARKBAR = "benchmarkbar_benchmark";
varOTHERBAR = "benchmarkbar_other";
varthat = this;
this.init = function() {
this.jqGraph = $("<SVG CLASS = 'InterdobsBenchMark'> </SVG>");
this.$().append(this.jqGraph);
this.$().click(function() {
that.fireEvent("onclick"); });
};
varbenchmarkcompany = null;
this.benchmark = function(value) {
if (value === undefined) {
return benchmarkcompany;
} else {
benchmarkcompany = value;
returnthis;
}
};
this.afterUpdate = function() {
this.jqGraph.empty();
var data = [
{letter: "A", frequency: .18167},
{letter: "B", frequency: .03492},
{letter: "C", frequency: .02780},
{letter: "D", frequency: .04253},
{letter: "E", frequency: .12702},
{letter: "F", frequency: .22288}
];
var margin = {top: 10, right: 5, bottom: 30, left: 40};
width = that.$().width() - margin.left - margin.right,
height = that.$().height() - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([20, width], .1, 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(5)
.orient("left")
.tickFormat(formatPercent);
if(typeof svg === 'undefined'){
var svg = d3.select(".InterdobsBenchMark")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
};
data.sort(function(a, b) {
return b.frequency - a.frequency;
});
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".61em")
.style("text-anchor", "end")
.text("marktpercentage");
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d) { if (benchmarkcompany == d.letter) {return BENCHMARKBAR;} else {return OTHERBAR;}})
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", function(d) { return y(d.frequency); })
.attr("dy", ".35em")
.text( function(d) { return d.letter; });
};
3 add the methods
Add the following functions:
/* Returns the current Benchmarkee of the benchmark */
String getBenchmark() {*
returnthis.benchmark;
*}
/* Sets the current Benchmarkee of the box */
void setBenchmark(/* the new benchmark */ String newBenchmark) {*
this.benchmark = newBenchmark;
*}
}
There is a bug in Design studio (version 1.2), that the graph will only render in the web browser if another graph is in the application. When testing be sure to add another graph. This graph does not have to show any data.