title: Bokeh: Upon callback, the new plot is overlaid on top of the old plot
body: <p>I am trying to embed my plots. I have Select widgets for x-axis and y-axis selection. The plot gets updated as expected when I change the y-axis (fig 1); however, changing x-axis is giving me problems. 
  Upon changing the x-axis option, the new line graph gets overlaid on top of the old graph (fig 2). Only when I refresh the page, the graph is rendered as expected (fig 3). How can I refresh my plot without having to refresh the entire page?</p>
  
  <p>This is the working example of what I am trying:</p>
  
  <pre><code>import io
  import pandas as pd
  
  from bokeh.plotting import figure
  from bokeh.layouts import row, column
  from bokeh.models import ColumnDataSource, Range1d
  from bokeh.models.widgets import Select
  from bokeh.client import push_session
  from bokeh.document import Document
  from bokeh.embed import server_session
  
  document = Document()
  session = push_session(document)
  
  trip_data = [{"trip": '1', "totalDistanceTravelled": "4.66", "totalTimeTaken": "765083", "time": "1504189219256",
                "carRegNo": "ABC123", "driverName": "Anne"},
               {"trip": '2', "totalDistanceTravelled": "14.63", "totalTimeTaken": "1282369", "time": "1504189219256",
                "carRegNo": "DEF345", "driverName": "Harry"},
               {"trip": '3', "totalDistanceTravelled": "3.66", "totalTimeTaken": "602713", "time": "1504189219256",
                "carRegNo": "XYZ890", "driverName": "Ron"},
               {"trip": '4', "totalDistanceTravelled": "7.11", "totalTimeTaken": "2234282", "time": "1504189219256",
                "carRegNo": "ABC123", "driverName": "Anne"},
               {"trip": '5', "totalDistanceTravelled": "14.14", "totalTimeTaken": "1282369", "time": "1504189219256",
                "carRegNo": "DEF345", "driverName": "Harry"},
               {"trip": '6', "totalDistanceTravelled": "4.33", "totalTimeTaken": "748446", "time": "1504189219256",
                "carRegNo": "DEF345", "driverName": "Harry"},
               {"trip": '7', "totalDistanceTravelled": "10.66", "totalTimeTaken": "960362", "time": "1504189219256",
                "carRegNo": "XYZ890", "driverName": "Ron"}]
  
  df = pd.DataFrame(trip_data)
  drivers = df['driverName'].str.strip()
  vehicles = df['carRegNo'].str.strip()
  time_stamp = df['time'].astype(float)
  total_distance_travelled = df['totalDistanceTravelled'].astype(float)
  df['totalTimeTaken'] = df['totalTimeTaken'].astype(float)
  df['totalTimeTaken'] /= 1000 * 3600
  
  # Create Input controls
  x_axis = Select(title="X Axis", options=sorted(["Drivers", "Vehicle Reg. Number"]), value="Drivers")
  y_axis = Select(title="Y Axis", options=sorted(["Distance Travelled (kms)", "Time Taken (hours)"]),
                  value="Time Taken (hours)")
  source = ColumnDataSource(data=dict(x=[], y=[]))
  p = figure(x_range=[], y_range=Range1d(), plot_height=600, plot_width=700, title="")
  
  def update():
      print "UPDATE"
      col_key_values = {
          "Time Taken (hours)": 'totalTimeTaken',
          "Distance Travelled (kms)": 'totalDistanceTravelled'
      }
  
      x_map = {
          "Drivers": drivers,
          "Vehicle Reg. Number": vehicles
      }
  
      x_name = x_map[x_axis.value]
      x_y_values = {}
      for x in x_name.unique():
          x_y_values[x] = round(df.loc[x_name == x, col_key_values[y_axis.value]].astype(float).sum(), 2)
      source.data = dict(
          x=list(x_y_values.keys()),
          y=list(x_y_values.values())
      )
      p.y_range.start = min(x_y_values.values())-1
      p.y_range.end = max(x_y_values.values())+1
      p.xaxis.axis_label = x_axis.value
      p.yaxis.axis_label = y_axis.value
      p.x_range.factors = list(x_y_values.keys())
      p.line(x="x", y="y", source=source)
      print source.data
      return p
  
  def on_x_change(attr, old, new):
      global x_axis
      x_axis.value = new
      update()
  
  
  def on_y_change(attr, old, new):
      global y_axis
      y_axis.value = new
      update()
  
  
  def create_layout():
      print 'CREATE LAYOUT'
      x_axis.on_change('value', on_x_change)
      y_axis.on_change('value', on_y_change)
      controls = column(children=[x_axis, y_axis])
      layout = column(children=[controls, update()])
      return layout
  
  
  layout = create_layout()
  
  html = u"""
  &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          %s
      &lt;/body&gt;
  &lt;/html&gt;
  """ % server_session(layout, session_id=session.id, relative_urls=False)
  
  with io.open("sample.html", mode='w+', encoding='utf-8') as f:
      f.write(html)
  
  print(__doc__)
  
  document.add_root(layout)
  
  if __name__ == "__main__":
      print("\npress ctrl-C to exit")
      session.loop_until_closed()
  </code></pre>
  
  <p>Attachments:
  <a href="https://i.stack.imgur.com/bG8E8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bG8E8.png" alt="First plot"></a></p>
  
  <p><a href="https://i.stack.imgur.com/gkCPf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gkCPf.png" alt="Second plot overlaid over first"></a></p>
  
  <p><a href="https://i.stack.imgur.com/oyP6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oyP6I.png" alt="Second plot after refreshing the webpage"></a></p>