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
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
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
var BENCHMARKBAR = “benchmarkbar_benchmark”;
var OTHERBAR = “benchmarkbar_other”;
var that = this;
this.init = function() {
this.jqGraph = $(“<SVG CLASS = ‘InterdobsBenchMark’> </SVG>”);
this.$().append(this.jqGraph);
this.$().click(function() {
that.fireEvent(“onclick”); });
};
var benchmarkcompany = null;
this.benchmark = function(value) {
if (value === undefined) {
return benchmarkcompany;
} else {
benchmarkcompany = value;
return this;
}
};
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() {*
return this.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.
If y want to use d3 you need to load library with stdInclude -> kind = d3
If y add another chart – another chart load this library…
Thx for share this example;)
Same for cvom as well.
Hi Michael, Hi Jeroen,
did you try it, like Dimitry said?
“stdInclude -> kind = d3“
Br,
Dirk
Not sure where you guys are getting that syntax… The syntax to apply d3 in contribution.xml would be:
yes, your syntax should be fine. <stdInclude kind=”d3″ />
and it doesn’t work?
For my sample I used <jsInclude>res/js/d3.v3.min.js</jsInclude>… and put it in a folder, but I know, its not the right way.
No, it should work. I only commented to say that d3 and cvom are valid stdInclude kinds.
Jeroen,
Mind if I run with your d3 example and post a follow-up blog on how to make this databound?
hi Michael,
no problem, good luck!
Jeroen
Hi Michael,
How to refer to D3 Library in component.js File ?? Or is it available by default for use.
And where should I include the last 2 methods for getting and setting the benchmark.
Hi Srikanth,
you refer to the D3 library in the contribution.xml
by adding the line :
<stdInclude kind=”d3″/> within the component definition
your base D3 reference in the component.js is then :
Thanks Jeroen for the reply. I got above piece of code successfully imported to my Design Studio as a Component. Couple of questions –
1. None of the Bars have a different color as expected, Even when I called the setbenchmark() method ??
2. When the graph first loads do we expect one of the letters to be benchmarked in the Graph ??
3.
How and when the above code gets executed ?? this.benchmark has never been initialized before and let’s say once I set the benchmark code, Do I need to call a function that redraws the Benchmark Graph ???
Hoping you could reply ..Thanks once again
Hi Srikanth,
this part is a getter/setter to interact with the properties that you can define in the contribution.xml There should be a propery “benchmark” defined.
If you look in DS you should see the property in the property panel when you select the component. Additionally you have the script option setBenchmark to change the value when you run the application.
a getter/setter is code that if someone passes a new value it will pick that up and assign it internally (the benchmarkcompany variale). If someone calls the function without the parameter it returns the current value.
By the way: this graph represents my babysteps in SDK development, so take everything with a grain of salt 😉
Jeroen