title: Dynamic histogram Bokehjs
body: <p>I need to build a dynamic histogram with BokehJs. I initialize the histogram with a ColumnDataSource, for example I set up an histogram with 3 bars. Then I change the ColumnDataSource and update the histogram. When the new ColumnDataSource has 3 or less bars the histogram will update. However if the new ColumnDataSource has more than 3 bars only 3 bars will update, the additional bars will not show. 
  Anyone knows how can I update the histogram with a number of bars more than the initial value?
  Thank you. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;histogram&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.7.min.css" type="text/css" /&gt;
      &lt;script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.7.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;button id="removeBar"&gt;2 bars&lt;/button&gt;
  &lt;button id="addBar"&gt;3 bars&lt;/button&gt;
  &lt;button id="addAnotherBar"&gt;4 bars&lt;/button&gt;
  
  &lt;div id="plot"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      // the initial source has 3 bars
      var source = new Bokeh.ColumnDataSource({
        data: {       
            top:[2, 3, 4],
            bottom:[0,0,0],
            left:[-0.5, 0.5, 1.5],
            right:[0.5, 1.5, 2.5]
            }
      });
  
      var p = Bokeh.Plotting.figure({plot_width:400, plot_height:400});
  
      var quad = p.quad({
  
              top:{ field: "top" },
              bottom:{ field: 'bottom'},
              left:{ field: 'left'},
              right:{ field: 'right'},
              source: source,
  
              line_color:"#f0027f",
              fill_color:"#B3DE69"})
  
      Bokeh.Plotting.show(p, document.getElementById('plot'));
  
  
      var removeBar = document.getElementById('removeBar');
  
      // update source with 2 bars, this will work
      removeBar.addEventListener('click', function () {
  
          source.data.top=[1, 4]
          source.data.bottom=[0, 0]
          source.data.left=[-0.8, 0.2] 
          source.data.right=[0.1, 2.9]
          source.change.emit();
  
      });
  
      var addBar = document.getElementById('addBar');
  
      // update source with 3 bars, this will work
      addBar.addEventListener('click', function () {
  
          source.data.top=[1, 8, 5]
          source.data.bottom=[0, 0, 0]
          source.data.left=[-0.5, 0.5, 1.5]
          source.data.right=[0.2, 1.2, 2.5]
          source.change.emit();
      });     
  
      var addAnotherBar = document.getElementById('addAnotherBar');
  
      // update source with 4 bars, this will not work!!!
      addAnotherBar.addEventListener('click', function () {
  
          source.data.top = [5, 4, 6, 7]
          source.data.bottom = [0, 0, 0, 0]
          source.data.left = [-0.7, 0.5, 1.4, 2.9]
          source.data.right = [0.1, 1.3, 2.8, 3.1]
          source.change.emit();           
      }); 
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>