Skip to Content

I will assume you have taken the steps in the developer manual here :

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


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

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.$().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() {


             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.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()



       var yAxis = d3.svg.axis()






        if(typeof svg === ‘undefined’){

                    var svg =“.InterdobsBenchMark”)

              .attr(“width”, width + margin.left + margin.right)

              .attr(“height”, height + + margin.bottom)


                    .attr(“transform”, “translate(“ + margin.left + “,” + + “)”);




             data.sort(function(a, b) {

                return  b.frequency – a.frequency;


             data.forEach(function(d) {

                 d.frequency = +d.frequency;


               x.domain( { return d.letter; }));

               y.domain([0, d3.max(data, function(d) { return d.frequency; })]);


                   .attr(“class”, “x axis”)

                   .attr(“transform”, “translate(0,” + height + “)”)



                   .attr(“class”, “y axis”)



                   .attr(“transform”, “rotate(-90)”)

                   .attr(“y”, 6)

                   .attr(“dy”, “.61em”)

                   .style(“text-anchor”, “end”)






                   .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); })



                        .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.

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Dmitriy Buslov

    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;) 



          1. Dirk Raschke

            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.

    1. Srikanth Guna

      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.

      1. Jeroen van der A Post author

        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 :

        var container = this.$()[0];
        chart =“svg:svg”).attr(“width”, “100%”).attr(“height”, “100%”)
        1. Srikanth Guna

          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 ??


          1. var benchmarkcompany = null
          2.   this.benchmark = function(value) { 
          3.   if (value === undefined) { 
          4.   return benchmarkcompany; 
          5.   } else
          6.   benchmarkcompany = value; 
          7.   return this
          8.   } 
          9.   }; 

          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

          1. Jeroen van der A Post author

            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 😉



Leave a Reply