Setting up a SDK bar chart

Hi,

i´m adding this code to simple table. Simple Table was a sample of the SDK.

There are no errors while compiling it, but when i start the Design Studio and put the custom component in the field to view i only see the table?

What is to do to see the table and the chart?

sap.designstudio.sdk.Component.subclass("com.sap.sample.simpletable.SimpleTable", function() {

	var CSS_CLASS_DIV = "sapzencrosstab-TableDiv";
	var CSS_CLASS_TABLE = "sapzencrosstab-Crosstab";
	var CSS_CLASS_TR_HEADER = 'sapzencrosstab-HeaderRow sapzencrosstab-DimensionHeaderArea';
	var CSS_CLASS_TD_HEADER = "sapzencrosstab-HeaderCellFirstInRow sapzencrosstab-HeaderCellDefault";
	var CSS_CLASS_TD_DEFAULT = "sapzencrosstab-DataCellDefault";

	var column1_data = null;
	var column2_data = null;
	var column3_data = null;
	var columnDif = null;
	var meta_data = null;
	
    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; });

        };



	this.init = function() {
		this.$().addClass(CSS_CLASS_DIV);
		this.$().css("overflow-y", "scroll");
		this.jqTable = $("<table class=\"" + CSS_CLASS_TABLE + "\"/>");
		this.$().append(this.jqTable);
	};

	this.afterUpdate = function() {
		this.jqTable.empty();
		var column_data = getAnySetColumn_Data();
		if (column_data) {
			var jqHeader = $("<thead/>").appendTo(this.jqTable);
			var jqHeaderRow = $("<tr class=\"" + CSS_CLASS_TR_HEADER + "\"/>").appendTo(jqHeader);
			jqHeaderRow.append($("<td class=\"" + CSS_CLASS_TD_HEADER + "\"/>"));
			appendColumnHeaderCell(jqHeaderRow, column1_data);
			appendColumnHeaderCell(jqHeaderRow, column2_data);
			appendColumnHeaderCell(jqHeaderRow, column3_data);
			$("<td class=\"" + CSS_CLASS_TD_HEADER + "\">Differenz</td>").appendTo(jqHeaderRow);

			for (var i = 0; i < column_data.formattedData.length; i++) {
				var jqRow = $("<tr/>");
				this.jqTable.append(jqRow);
				appendRowHeaderCell(jqRow, i);
				appendCell(jqRow, column1_data, i);
				appendCell(jqRow, column2_data, i);
				appendCell(jqRow, column3_data, i);
				calculateDiff(jqRow,column1_data, column2_data, i);
			}
		}
	};
	
	function calculateDiff(jqRow, column1_data, column2_data, i) {		
		var data1 = split(column1_data, i);
		var data2 = split(column2_data, i);
		var dif = data1 - data2;
		console.log(dif);
		jqRow.append($("<td class=\"" + CSS_CLASS_TD_DEFAULT + "\">" + Math.round(dif*100)/100 + "</td>"));
		
		
	}
	
	function split(column_data, i){
		var res = column_data.formattedData[i].split(" ");
		var num = res[1].split(".");
		var jessi = "";
		for (var i = 0; i < num.length; i++) {
			jessi = jessi + num[i];
		}
		var filip = jessi.replace(",",".");
		var intNum = parseFloat(filip);
		return intNum;
	}
	
	function appendColumnHeaderCell(jqHeaderRow, column_data) {
		if (column_data && column_data.formattedData) {
			var headerText = "";
			for (var i = 0; i < column_data.selection.length; i++) {
				var selectionIndex = column_data.selection[i];
				if (selectionIndex != -1) {
					headerText += " " + meta_data.dimensions[i].members[selectionIndex].text;
				}
			}
			$("<td class=\"" + CSS_CLASS_TD_HEADER + "\">" + headerText + "</td>").appendTo(jqHeaderRow);
		}
	}

	function appendCell(jqRow, column_data, i) {
		if (column_data && column_data.formattedData && (i < column_data.formattedData.length)) {
			var cellText = column_data.formattedData[i];
			jqRow.append($("<td class=\"" + CSS_CLASS_TD_DEFAULT + "\">" + cellText + "</td>"));
		}
	}

	function appendRowHeaderCell(jqRow, i) {
		var column_data = getAnySetColumn_Data();
		if (meta_data && column_data && column_data.formattedData && (i < column_data.tuples.length)) {
			var tuple = column_data.tuples[i];
			var headerText = "";
			for (var j = 0; j < tuple.length; j++) {
				if (column_data.selection[j] == -1) {
					headerText += " " + meta_data.dimensions[j].members[tuple[j]].text;
				}
			}
			headerText = headerText.replace("|", " "); // Delimiter used for multiple presentations
			jqRow.append($("<td class=\"" + CSS_CLASS_TD_HEADER + "\">" + headerText + "</td>"));
		}
	}

	function getAnySetColumn_Data() {
		if (column1_data && column1_data.formattedData) {
			return column1_data;
		} else if (column2_data && column2_data.formattedData) {
			return column2_data; 
		} else if (column3_data && column3_data.formattedData) {
			return column3_data;
		}
		return null;
	}

	// called from Additional Properties Sheet JavaScript file

	this.getMetadataAsString = function() {
		return JSON.stringify(this.metadata());
	};

	// property setter/getter functions	
	this.column1 = function(value) {
		if (value === undefined) {
			return column1_data;
		} else {
			column1_data = value;
			return this;
		}
	};

	this.column2 = function(value) {
		if (value === undefined) {
			return column2_data;
		} else {
			column2_data = value;
			return this;
		}
	};

	this.column3 = function(value) {
		if (value === undefined) {
			return column3_data;
		} else {
			column3_data = value;
			return this;
		}
	};
	
	this.metadata = function(value) {
		if (value === undefined) {
			return meta_data;
		} else {
			meta_data = value;
			return this;
		}
	};
});