Setting up a SDK bar chart

[jeroenvandera]

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.