diff --git a/Modules/QmitkExt/QmitkHistogramJSWidget.cpp b/Modules/QmitkExt/QmitkHistogramJSWidget.cpp
index eecb8be6c0..8754651fa7 100644
--- a/Modules/QmitkExt/QmitkHistogramJSWidget.cpp
+++ b/Modules/QmitkExt/QmitkHistogramJSWidget.cpp
@@ -1,96 +1,93 @@
 /*===================================================================
 
 The Medical Imaging Interaction Toolkit (MITK)
 
 Copyright (c) German Cancer Research Center,
 Division of Medical and Biological Informatics.
 All rights reserved.
 
 This software is distributed WITHOUT ANY WARRANTY; without
 even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.
 
 See LICENSE.txt or http://www.mitk.org for details.
 
 ===================================================================*/
 
 
 #include "QmitkHistogramJSWidget.h"
 
 QmitkHistogramJSWidget::QmitkHistogramJSWidget(QWidget *parent) :
   QWebView(parent)
 {
-
   connect(page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject()));
   QUrl myUrl = QUrl("qrc:/qmitk/Histogram.html");
   setUrl(myUrl);
 
   // set Scrollbars to always disabled
   page()->mainFrame()->setScrollBarPolicy(Qt::Horizontal, Qt::ScrollBarAlwaysOff);
   page()->mainFrame()->setScrollBarPolicy(Qt::Vertical, Qt::ScrollBarAlwaysOff);
 }
 
 QmitkHistogramJSWidget::~QmitkHistogramJSWidget()
 {
 
 }
 
 // adds an Object of Type QmitkHistogramJSWidget to the JavaScript
 void QmitkHistogramJSWidget::addJSObject()
 {
   page()->mainFrame()->addToJavaScriptWindowObject(QString("histogramData"), this);
   this->clearData();
 }
 
 
 // reloads WebView, everytime its size has been changed, so the size of the Histogram fits to the size of the widget
 void QmitkHistogramJSWidget::resizeEvent(QResizeEvent* resizeEvent)
 {
   QWebView::resizeEvent(resizeEvent);
-  this->reload();
+  this->sizeChanged();
 }
 
 void QmitkHistogramJSWidget::ComputeHistogram(HistogramType* histogram)
 {
   //this->clearData();
   m_Histogram = histogram;
   HistogramConstIteratorType startIt = m_Histogram->End();
   HistogramConstIteratorType endIt = m_Histogram->End();
   HistogramConstIteratorType it;
   m_Frequency.clear();
   m_Measurement.clear();
   unsigned int i = 0;
   for (it = m_Histogram->Begin() ; it != m_Histogram->End(); ++it, ++i)
   {
     QVariant frequency = it.GetFrequency();
     QVariant measurement = it.GetMeasurementVector()[0];
     m_Frequency.insert(i, frequency);
     m_Measurement.insert(i, measurement);
   }
 
   this->DataChanged();
 }
 
 void QmitkHistogramJSWidget::clearData()
 {
   m_Frequency.clear();
   m_Measurement.clear();
-  m_Frequency.insert(0,0);
-  m_Measurement.insert(0,0);
 }
 
 void QmitkHistogramJSWidget::clearHistogram()
 {
   this->clearData();
   this->DataChanged();
 }
 
 QList<QVariant> QmitkHistogramJSWidget::getFrequency()
 {
   return m_Frequency;
 }
 
 QList<QVariant> QmitkHistogramJSWidget::getMeasurement()
 {
   return m_Measurement;
 }
diff --git a/Modules/QmitkExt/QmitkHistogramJSWidget.h b/Modules/QmitkExt/QmitkHistogramJSWidget.h
index b4162f65dc..bcf77fef9a 100644
--- a/Modules/QmitkExt/QmitkHistogramJSWidget.h
+++ b/Modules/QmitkExt/QmitkHistogramJSWidget.h
@@ -1,67 +1,65 @@
 /*===================================================================
 
 The Medical Imaging Interaction Toolkit (MITK)
 
 Copyright (c) German Cancer Research Center,
 Division of Medical and Biological Informatics.
 All rights reserved.
 
 This software is distributed WITHOUT ANY WARRANTY; without
 even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.
 
 See LICENSE.txt or http://www.mitk.org for details.
 
 ===================================================================*/
 
 
 #ifndef QMITKHISTOGRAMJSWIDGET_H
 #define QMITKHISTOGRAMJSWIDGET_H
 
 #include <QWidget>
 #include <QUrl>
 #include <QtWebKit/QtWebKit>
 #include "QmitkExtExports.h"
 #include <QVariant>
 #include "mitkImage.h"
 
 
 
 class QmitkExt_EXPORT QmitkHistogramJSWidget : public QWebView
 {
   Q_OBJECT
   Q_PROPERTY(QList<QVariant> measurement
              READ getMeasurement)
   Q_PROPERTY(QList<QVariant> frequency
              READ getFrequency)
 
 public:
   typedef mitk::Image::HistogramType HistogramType;
   typedef mitk::Image::HistogramType::ConstIterator HistogramConstIteratorType;
 
   explicit QmitkHistogramJSWidget(QWidget *parent = 0);
   ~QmitkHistogramJSWidget();
   void resizeEvent(QResizeEvent* resizeEvent);
   void ComputeHistogram(HistogramType* histogram);
   void clearHistogram();
   QList<QVariant> getMeasurement();
   QList<QVariant> getFrequency();
 
 private:
   QList<QVariant> m_Frequency;
   QList<QVariant> m_Measurement;
   HistogramType::ConstPointer m_Histogram;
 
   void clearData();
 
 private slots:
   void addJSObject();
 
 signals:
   void DataChanged();
-
-public slots:
-
+  void sizeChanged();
 };
 
 #endif // QMITKHISTOGRAMJSWIDGET_H
diff --git a/Modules/QmitkExt/resources/Histogram.css b/Modules/QmitkExt/resources/Histogram.css
index 9d9358fcb3..5da5b4b6f6 100644
--- a/Modules/QmitkExt/resources/Histogram.css
+++ b/Modules/QmitkExt/resources/Histogram.css
@@ -1,29 +1,28 @@
 body {
     font: 10px sans-serif;
 }
 
-/**.bar {
-    fill: grey;
-    opacity: 0.5;
+.bar {
+    fill: steelblue;
     shape-rendering: crispEdges;
 }
 
 .area {
     fill: steelblue;
     opacity: 0.5;
 }
 
 .line {
     fill: none
     stroke: black
     stroke-width: 1
-}**/
+}
 
 .axis path, .axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
 }
 
 
 
diff --git a/Modules/QmitkExt/resources/Histogram.html b/Modules/QmitkExt/resources/Histogram.html
index a8ee79fca0..c296e5c856 100644
--- a/Modules/QmitkExt/resources/Histogram.html
+++ b/Modules/QmitkExt/resources/Histogram.html
@@ -1,13 +1,12 @@
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Histogram</title>
         <script type="text/javascript" src="d3.v2.js"></script>
         <link type="text/css" href="Histogram.css" rel="stylesheet" />
     </head>
     <body>
-        <script type="text/javascript" src="Histogram.js">
-        </script>
+        <script type="text/javascript" src="Histogram.js"></script>
     </body>
 </html>
 
diff --git a/Modules/QmitkExt/resources/Histogram.js b/Modules/QmitkExt/resources/Histogram.js
index 7d3fb9566e..31c60ffeee 100644
--- a/Modules/QmitkExt/resources/Histogram.js
+++ b/Modules/QmitkExt/resources/Histogram.js
@@ -1,163 +1,202 @@
 /**
  * @author Moritz Petry
  */
 //var dataset = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 7, 18, 19, 22];
 
 /*var indexNumber = Math.round(Math.random()*10+30);
  for (var i = 0; i< indexNumber; i++) {
  var newNumber = Math.random() * 100;
  dataset.push(newNumber);
  }*/
 
 var dataset = new Array();
 var frequency = new Array();
 var measurement = new Array();
 var dataset;
 
 var margin = {
     top : 30,
-    bottom : 0,
+    bottom : 50,
     left : 50,
-    right : -20,
+    right : 20,
     };
 var height = histogramData.height - margin.top - margin.bottom;
 var width = histogramData.width - margin.left - margin.right;
 var tension = 0.8;
 var connected = false;
+var dur = 1000;
+
    /*  var line = d3.svg.line()
                     .interpolate("cardinal")
                     .x(function(d,i) {
                         return xScale(histogramData.measurement[i]);
                     })
                     .y(function(d,i) {
                         return yScale(d);
                     })
                     .tension(tension);
 
     var area = d3.svg.area()
                     .interpolate("cardinal")
                     .tension(tension)
                     .x(function(d,i) {
                         return xScale(histogramData.measurement[i]);
                     })
                     .y0(height)
                     .y1(function(d,i) {
                         return yScale(d);
                     }); */
 
 if (!connected)
-    {
-        connected = true;
-        histogramData.DataChanged.connect(changeHistogram);
-        //makeHistogram();
-    }
+{
+    connected = true;
+    histogramData.DataChanged.connect(changeHistogram);
+    histogramData.sizeChanged.connect(changeSize);
+}
 
 
 
-    var xScale = d3.scale.linear()
-                        .domain([d3.min(histogramData.measurement), d3.max(histogramData.measurement)])
-                        .range([margin.left, width]);
+var xScale = d3.scale.linear()
+                .domain([d3.min(histogramData.measurement), d3.max(histogramData.measurement)])
+                .range([margin.left, width]);
 
-    var yScale = d3.scale.linear()
-                        .domain([0, d3.max(histogramData.frequency)])
-                        .range([height, margin.top]);
+var yScale = d3.scale.linear()
+                .domain([0, d3.max(histogramData.frequency)])
+                .range([height, margin.top]);
 
-    var xAxis = d3.svg.axis()
-                    .scale(xScale)
-                    .orient("bottom");
+var xAxis = d3.svg.axis()
+                .scale(xScale)
+                .orient("bottom");
 
-    var yAxis = d3.svg.axis()
-                    .scale(yScale)
-                    .orient("left");
+var yAxis = d3.svg.axis()
+                .scale(yScale)
+                .orient("left");
 
-    var svg = d3.select("body")
-                .append("svg")
-                .attr("class", "svg")
-                .attr("width", width + margin.left + margin.right)
-                .attr("height", height + margin.bottom + margin.top)
-                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+var svg = d3.select("body")
+            .append("svg")
+            .attr("class", "svg")
+            .attr("width", width + margin.right + margin.left)
+            .attr("height", height + margin.top + margin.bottom);
 
     // svg.append("path")
             // .attr("class", "area")
             // .attr("fill", "steelblue")
             // .attr("opacity", 0.5)
             // .attr("d", area(histogramData.frequency));
 
     // svg.append("path")
             // .attr("class", "line")
             // .attr("fill", "none")
             // .attr("stroke", "black")
             // .attr("stroke-width", 1)
             // .attr("d", line(histogramData.frequency));
 
     // var bar = svg.selectAll("rect")
                     // .data(histogramData.frequency)
                     // .enter()
                     // .append("rect")
                     // .attr("class", "bar")
                     // .attr("x", function(d,i) {
                         // return xScale(histogramData.measurement[i]);
                     // })
                     // .attr("y", function(d,i) {
                         // return yScale(d);
                     // })
                     // .attr("width", 1)
                     // .attr("height", function(d) {
                         // return height - yScale(d);
                     // })
                     // .attr("fill", "grey")
                     // .attr("opacity", 0.5);
 
-    svg.append("g")
-            .attr("class", "axis")
-            .attr("transform", "translate(" + 0 + "," + height + ")")
-            .call(xAxis);
+svg.append("g")
+    .attr("class", "axis")
+    .attr("transform", "translate(" + 0 + "," + height + ")")
+    .call(xAxis);
 
-    svg.append("g")
-            .attr("class", "axis")
-            .attr("transform", "translate(" + margin.left + "," + 0 + ")")
-            .call(yAxis);
+svg.append("g")
+    .attr("class", "axis")
+    .attr("transform", "translate(" + margin.left + "," + 0 + ")")
+    .call(yAxis);
 
+function changeSize ()
+{
+    height = histogramData.height - margin.top - margin.bottom;
+    width = histogramData.width - margin.left - margin.right;
+    svg = d3.select("body")
+            .append("svg")
+            .attr("class", "svg")
+            .attr("width", width + margin.right + margin.left)
+            .attr("height", height + margin.top + margin.bottom);
+    changeHistogram();
+}
 
-function changeHistogram ()
+function changeHistogram()
 {
-    var bar = svg.selectAll("rect")
-                .data(data);
+    xScale = d3.scale.linear()
+                .domain([d3.min(histogramData.measurement),d3.max(histogramData.measurement)])
+                .range([margin.left,width]);
+
+    yScale = d3.scale.linear()
+                .domain([0,d3.max(histogramData.frequency)])
+                .range([height,margin.bottom]);
+
+    xAxis = d3.svg.axis()
+                .scale(xScale)
+                .ticks(5)
+                .orient("bottom");
 
-    bar.data(histogramData.frequency).enter().append("rect")
+    yAxis = d3.svg.axis()
+                .scale(yScale)
+                .orient("left");
+
+    var bar = svg.selectAll("rect").data(histogramData.frequency);
+
+    bar.enter().append("rect")
         .attr("class", "bar")
         .attr("x", function(d,i) {
             return xScale(histogramData.measurement[i]);
         })
         .attr("y", height)
         .attr("height", 0)
-        .attr("width", 1)
-        .attr("fill", "grey")
-        .transition()
+        .attr("width", (width/(histogramData.frequency.length + 1)))
+        .transition().duration(dur)
         .attr("height", function(d) {
             return (height-yScale(d));
         })
-        .attr("width", 1)
+        .attr("width", (width/(histogramData.frequency.length + 1)))
         .attr("y", function(d) {
-            return yScale(d);
-        });
+           return yScale(d);
+       });
 
-    bar.transition()
+    bar.transition().duration(dur)
         .attr("x", function(d,i) {
             return xScale(histogramData.measurement[i]);
         })
         .attr("y", function(d) {
             return yScale(d);
         })
         .attr("height", function(d) {
             return (height-yScale(d));
         })
-        .attr("width", 1)
-        .attr("fill", "grey");
+        .attr("width", (width/(histogramData.frequency.length + 1)))
 
-    bar.exit().transition()
+    bar.exit().transition().duration(dur)
         .attr("y", height)
         .attr("height", 0)
         .remove();
+
+    svg.selectAll("g").transition().duration(dur).attr("opacity", 0).remove();
+    svg.append("g")
+        .attr("class", "axis")
+        .attr("transform", "translate(" + 0 + "," + height + ")")
+        .transition().duration(dur)
+        .call(xAxis);
+
+    svg.append("g")
+        .attr("class", "axis")
+        .attr("transform", "translate(" + margin.left + "," + 0 + ")")
+        .transition()
+        .call(yAxis);
 }