Imbedding a Linked candlestick graph with signal data.

Hello folks,
I met Paddy briefly in Oxford and he convinced me to give Bokeh a try.I was wondering if you could help me with with the following code.Im generating a candlestick graph which shares an axis with a signal display.
The graphs are created perfectly but I am unsure know how to effectively imbed them as elements in a larger webpage.Ideally the graphs need to be stored on the plot server as a lot of data can be moved around.

If I use create_html_snippet() it will generate an embedable file however passing create_html_snippet(server=True) errors out with AttributeError: 'Session' object has no attribute 'docid'

The embed tool does not seem to work in this instance at all.Im having some trouble understanding how the higher level objects doc,session etc interact and hang together.

Best

Mark

    def create_bokeh_graphdata(self):
        session = output_server("Candlestick Data")

        #Create plotobject
        doc = Document()
        session = Session()
        session.use_doc('Candlestick Graaph')
        session.load_document(doc)
        #Create Tools
        pantool = PanTool(dimensions=["width", "height"])
        wheelzoomtool = WheelZoomTool(dimensions=["width", "height"])
        embedtool = EmbedTool()
        #Create Candlestick.
        tradedata = self.active_underlying['data']
        inc = tradedata.bid_close > tradedata.bid_open
        dec = tradedata.bid_open > tradedata.bid_close
        mids = (tradedata.bid_open + tradedata.bid_close)/2
        spans = abs(tradedata.bid_close-tradedata.bid_open)
        if 1 in self.signal_data:
            signal_1 = self.signal_data[1]
        else:
            signal_1 = np.zeros(len(tradedata))
        if 2 in self.signal_data:
            signal_2 =self.signal_data[2]
        else:
            signal_2 = np.zeros(len(tradedata))
        width = self.frequency
        source = ColumnDataSource(
            data=dict(
                bid_open=tradedata.bid_open,
                times=tradedata.index,
                bid_close =tradedata.bid_close,
                bid_high = tradedata.bid_high,
                bid_low = tradedata.bid_low,
                signal = tradedata.bid_close,
                times_increase = tradedata.index[inc],
                times_decrease = tradedata.index[dec],
                spans_increase = spans[inc],
                spans_decrease = spans[dec],
                mids_increase =mids[inc],
                mids_decrease = mids[dec],
                signal_1 = signal_1,
                signal_2 = signal_2
                    )
        )
        xdr = DataRange1d(sources=[source.columns('times')])
        y_candlestick_range = DataRange1d(sources=[source.columns('bid_high'),source.columns('bid_low')])
        signal_range = DataRange1d(sources=[source.columns('signal_1'),source.columns('signal_2')])
        max_min_bar = Segment(x0='times',y0='bid_low',x1='times',y1='bid_high',line_color='black')
        low_candlestick = Rect(x='times_decrease',y='mids_decrease',width=width,height='spans_decrease', fill_color="#F2583E", line_color="black")
        high_candlestick = Rect(x='times_increase',y='mids_increase',width=width,height='spans_increase',fill_color="#D5E1DD", line_color="black")
        signal_1_line = Line(x='times',y='signal_1',line_color='black')
        signal_2_line = Line(x='times',y='signal_2',line_color='red')
        low_candlestick_renderer = Glyph(
        data_source=source,
        xdata_range=xdr,
        ydata_range=y_candlestick_range,
        glyph=low_candlestick
        )

        high_candlestick_renderer = Glyph(
            data_source=source,
            xdata_range=xdr,
            ydata_range=y_candlestick_range,
            glyph=high_candlestick
        )
        max_min_bar_renderer = Glyph(
        data_source=source,
        xdata_range=xdr,
        ydata_range=y_candlestick_range,
        glyph=max_min_bar,
        )
        #Signals
        signal_1_line_glyph = Glyph(data_source=source,
                xdata_range=xdr,
                    ydata_range=signal_range,
                    glyph=signal_1_line,
                )
        signal_2_line_glyph = Glyph(data_source=source,
                xdata_range=xdr,
                    ydata_range=signal_range,
                    glyph=signal_2_line,
            )
        signal_plot = Plot(x_range=xdr, y_range=signal_range, data_sources=[source], min_border=10,title='Signals')
        candlestick_plot = Plot(x_range=xdr, y_range=y_candlestick_range, data_sources=[source], min_border=10,title='Candlestick Data')
        candlestick_xaxis = DatetimeAxis(plot=candlestick_plot, dimension=0, location="min")
        candlestick_yaxis = LinearAxis(plot=candlestick_plot, dimension=1, location="min")
        signal_x_axis= DatetimeAxis(plot=signal_plot, dimension=0, location="min")
        signal_y_axis = LinearAxis(plot=signal_plot, dimension=1, location="min")
        candlestick_plot.renderers.append(max_min_bar_renderer)
        candlestick_plot.renderers.append(low_candlestick_renderer)
        candlestick_plot.renderers.append(high_candlestick_renderer)
        signal_plot.renderers.append(signal_1_line_glyph)
        signal_plot.renderers.append(signal_2_line_glyph)
        candlestick_plot.tools = [pantool,wheelzoomtool,embedtool]
        signal_plot.tools = [pantool,wheelzoomtool,embedtool]
        doc.add(candlestick_plot)
        doc.add(signal_plot)
        session.store_document(doc)
  #Link points correctly at the plot server
        link = session.object_link(doc._plotcontext)
        print 'view at %s’%link
  print candestick_plot.create_html_snippet() #This works fine but creates a local file,
  print candlestick_plot.create_html_snippet() # this gives AttributeError: 'Session' object has no attribute 'docid'

Hi Martin, recently we have refactored all the embed API.
To get benefit of it, you will need to use our dev build or use the git master. Or you can wait for the next release in a couple of days.

You have here: https://github.com/ContinuumIO/bokeh/tree/master/examples/embed, some examples of embedding Bokeh plots interacting with the bokeh-server under the hood. Try to look into them to get a better idea of how to use the new API.

···

On Tue, Jun 24, 2014 at 8:08 AM, Mark Hartney [email protected] wrote:

Hello folks,

I met Paddy briefly in Oxford and he convinced me to give Bokeh a try.I was wondering if you could help me with with the following code.Im generating a candlestick graph which shares an axis with a signal display.

The graphs are created perfectly but I am unsure know how to effectively imbed them as elements in a larger webpage.Ideally the graphs need to be stored on the plot server as a lot of data can be moved around.

If I use create_html_snippet() it will generate an embedable file however passing create_html_snippet(server=True) errors out with AttributeError: ‘Session’ object has no attribute ‘docid’

The embed tool does not seem to work in this instance at all.Im having some trouble understanding how the higher level objects doc,session etc interact and hang together.

Best

Mark

def create_bokeh_graphdata(self):

    session = output_server("Candlestick Data")



    #Create plotobject

    doc = Document()

    session = Session()

    session.use_doc('Candlestick Graaph')

    session.load_document(doc)

    #Create Tools

    pantool = PanTool(dimensions=["width", "height"])

    wheelzoomtool = WheelZoomTool(dimensions=["width", "height"])

    embedtool = EmbedTool()

    #Create Candlestick.

    tradedata   = self.active_underlying['data']

    inc = tradedata.bid_close > tradedata.bid_open

    dec = tradedata.bid_open > tradedata.bid_close

    mids = (tradedata.bid_open + tradedata.bid_close)/2

    spans = abs(tradedata.bid_close-tradedata.bid_open)

    if 1 in self.signal_data:

        signal_1 = self.signal_data[1]

    else:

        signal_1 = np.zeros(len(tradedata))

    if 2 in self.signal_data:

        signal_2 =self.signal_data[2]

    else:

        signal_2 = np.zeros(len(tradedata))

    width = self.frequency

    source = ColumnDataSource(

        data=dict(

            bid_open=tradedata.bid_open,

            times=tradedata.index,

            bid_close =tradedata.bid_close,

            bid_high = tradedata.bid_high,

            bid_low = tradedata.bid_low,

            signal = tradedata.bid_close,

            times_increase = tradedata.index[inc],

            times_decrease = tradedata.index[dec],

            spans_increase =  spans[inc],

            spans_decrease  = spans[dec],

            mids_increase  =mids[inc],

            mids_decrease = mids[dec],

            signal_1 = signal_1,

            signal_2 = signal_2

                )

    )

    xdr = DataRange1d(sources=[source.columns('times')])

    y_candlestick_range  = DataRange1d(sources=[source.columns('bid_high'),source.columns('bid_low')])

    signal_range = DataRange1d(sources=[source.columns('signal_1'),source.columns('signal_2')])

    max_min_bar = Segment(x0='times',y0='bid_low',x1='times',y1='bid_high',line_color='black')

    low_candlestick = Rect(x='times_decrease',y='mids_decrease',width=width,height='spans_decrease', fill_color="#F2583E", line_color="black")

    high_candlestick = Rect(x='times_increase',y='mids_increase',width=width,height='spans_increase',fill_color="#D5E1DD", line_color="black")

    signal_1_line = Line(x='times',y='signal_1',line_color='black')

    signal_2_line = Line(x='times',y='signal_2',line_color='red')

    low_candlestick_renderer = Glyph(

    data_source=source,

    xdata_range=xdr,

    ydata_range=y_candlestick_range,

    glyph=low_candlestick

    )



    high_candlestick_renderer = Glyph(

        data_source=source,

        xdata_range=xdr,

        ydata_range=y_candlestick_range,

        glyph=high_candlestick

    )

    max_min_bar_renderer = Glyph(

    data_source=source,

    xdata_range=xdr,

    ydata_range=y_candlestick_range,

    glyph=max_min_bar,

    )

    #Signals

    signal_1_line_glyph = Glyph(data_source=source,

            xdata_range=xdr,

                ydata_range=signal_range,

                glyph=signal_1_line,

            )

    signal_2_line_glyph = Glyph(data_source=source,

            xdata_range=xdr,

                ydata_range=signal_range,

                glyph=signal_2_line,

        )

    signal_plot = Plot(x_range=xdr, y_range=signal_range, data_sources=[source], min_border=10,title='Signals')

    candlestick_plot = Plot(x_range=xdr, y_range=y_candlestick_range, data_sources=[source], min_border=10,title='Candlestick Data')

    candlestick_xaxis = DatetimeAxis(plot=candlestick_plot, dimension=0, location="min")

    candlestick_yaxis = LinearAxis(plot=candlestick_plot, dimension=1, location="min")

    signal_x_axis= DatetimeAxis(plot=signal_plot, dimension=0, location="min")

    signal_y_axis = LinearAxis(plot=signal_plot, dimension=1, location="min")

    candlestick_plot.renderers.append(max_min_bar_renderer)

    candlestick_plot.renderers.append(low_candlestick_renderer)

    candlestick_plot.renderers.append(high_candlestick_renderer)

    signal_plot.renderers.append(signal_1_line_glyph)

    signal_plot.renderers.append(signal_2_line_glyph)

    candlestick_plot.tools = [pantool,wheelzoomtool,embedtool]

    signal_plot.tools = [pantool,wheelzoomtool,embedtool]

    doc.add(candlestick_plot)

    doc.add(signal_plot)

    session.store_document(doc)

    #Link points correctly at the plot server

    link = session.object_link(doc._plotcontext)

    print 'view at %s’%link

    print candestick_plot.create_html_snippet() #This works fine but creates a local file,

    print candlestick_plot.create_html_snippet() #  this gives AttributeError: 'Session' object has no attribute 'docid'

Hi Mark,

Thanks for checking out Bokeh. A quick mention that create_html_snippet() has been deprecated (it will still be in the upcoming 0.5 release). There is a new bokeh.embed module that separates the different embedding scenarios more cleanly, and is also better documented. Basically there is a much simpler autoload_server() function that returns a div you can drop a document anywhere you'd like the plot to be, it will automatically load bokehjs (if necessary) as well as the plot and data from the server. You can see some examples in:

  https://github.com/ContinuumIO/bokeh/tree/master/examples/embed

The target release date for 0.5 is July 7th, the beginning of the Scipy Conference, but there are also conda and pip dev builds on binstar that you can try out today. (Instructions recently posted on this list but let me know of you need more info.)

If you really need to use the current API then please post an issue on GH (with a complete example if possible), as this seems like a possible bug.

Thanks,

Bryan

···

On Jun 24, 2014, at 6:08 AM, Mark Hartney <[email protected]> wrote:

Hello folks,
I met Paddy briefly in Oxford and he convinced me to give Bokeh a try.I was wondering if you could help me with with the following code.Im generating a candlestick graph which shares an axis with a signal display.
The graphs are created perfectly but I am unsure know how to effectively imbed them as elements in a larger webpage.Ideally the graphs need to be stored on the plot server as a lot of data can be moved around.

If I use create_html_snippet() it will generate an embedable file however passing create_html_snippet(server=True) errors out with AttributeError: 'Session' object has no attribute 'docid'

The embed tool does not seem to work in this instance at all.Im having some trouble understanding how the higher level objects doc,session etc interact and hang together.

Best

Mark

   def create_bokeh_graphdata(self):
       session = output_server("Candlestick Data")

       #Create plotobject
       doc = Document()
       session = Session()
       session.use_doc('Candlestick Graaph')
       session.load_document(doc)
       #Create Tools
       pantool = PanTool(dimensions=["width", "height"])
       wheelzoomtool = WheelZoomTool(dimensions=["width", "height"])
       embedtool = EmbedTool()
       #Create Candlestick.
       tradedata = self.active_underlying['data']
       inc = tradedata.bid_close > tradedata.bid_open
       dec = tradedata.bid_open > tradedata.bid_close
       mids = (tradedata.bid_open + tradedata.bid_close)/2
       spans = abs(tradedata.bid_close-tradedata.bid_open)
       if 1 in self.signal_data:
           signal_1 = self.signal_data[1]
       else:
           signal_1 = np.zeros(len(tradedata))
       if 2 in self.signal_data:
           signal_2 =self.signal_data[2]
       else:
           signal_2 = np.zeros(len(tradedata))
       width = self.frequency
       source = ColumnDataSource(
           data=dict(
               bid_open=tradedata.bid_open,
               times=tradedata.index,
               bid_close =tradedata.bid_close,
               bid_high = tradedata.bid_high,
               bid_low = tradedata.bid_low,
               signal = tradedata.bid_close,
               times_increase = tradedata.index[inc],
               times_decrease = tradedata.index[dec],
               spans_increase = spans[inc],
               spans_decrease = spans[dec],
               mids_increase =mids[inc],
               mids_decrease = mids[dec],
               signal_1 = signal_1,
               signal_2 = signal_2
                   )
       )
       xdr = DataRange1d(sources=[source.columns('times')])
       y_candlestick_range = DataRange1d(sources=[source.columns('bid_high'),source.columns('bid_low')])
       signal_range = DataRange1d(sources=[source.columns('signal_1'),source.columns('signal_2')])
       max_min_bar = Segment(x0='times',y0='bid_low',x1='times',y1='bid_high',line_color='black')
       low_candlestick = Rect(x='times_decrease',y='mids_decrease',width=width,height='spans_decrease', fill_color="#F2583E", line_color="black")
       high_candlestick = Rect(x='times_increase',y='mids_increase',width=width,height='spans_increase',fill_color="#D5E1DD", line_color="black")
       signal_1_line = Line(x='times',y='signal_1',line_color='black')
       signal_2_line = Line(x='times',y='signal_2',line_color='red')
       low_candlestick_renderer = Glyph(
       data_source=source,
       xdata_range=xdr,
       ydata_range=y_candlestick_range,
       glyph=low_candlestick
       )

       high_candlestick_renderer = Glyph(
           data_source=source,
           xdata_range=xdr,
           ydata_range=y_candlestick_range,
           glyph=high_candlestick
       )
       max_min_bar_renderer = Glyph(
       data_source=source,
       xdata_range=xdr,
       ydata_range=y_candlestick_range,
       glyph=max_min_bar,
       )
       #Signals
       signal_1_line_glyph = Glyph(data_source=source,
               xdata_range=xdr,
                   ydata_range=signal_range,
                   glyph=signal_1_line,
               )
       signal_2_line_glyph = Glyph(data_source=source,
               xdata_range=xdr,
                   ydata_range=signal_range,
                   glyph=signal_2_line,
           )
       signal_plot = Plot(x_range=xdr, y_range=signal_range, data_sources=[source], min_border=10,title='Signals')
       candlestick_plot = Plot(x_range=xdr, y_range=y_candlestick_range, data_sources=[source], min_border=10,title='Candlestick Data')
       candlestick_xaxis = DatetimeAxis(plot=candlestick_plot, dimension=0, location="min")
       candlestick_yaxis = LinearAxis(plot=candlestick_plot, dimension=1, location="min")
       signal_x_axis= DatetimeAxis(plot=signal_plot, dimension=0, location="min")
       signal_y_axis = LinearAxis(plot=signal_plot, dimension=1, location="min")
       candlestick_plot.renderers.append(max_min_bar_renderer)
       candlestick_plot.renderers.append(low_candlestick_renderer)
       candlestick_plot.renderers.append(high_candlestick_renderer)
       signal_plot.renderers.append(signal_1_line_glyph)
       signal_plot.renderers.append(signal_2_line_glyph)
       candlestick_plot.tools = [pantool,wheelzoomtool,embedtool]
       signal_plot.tools = [pantool,wheelzoomtool,embedtool]
       doc.add(candlestick_plot)
       doc.add(signal_plot)
       session.store_document(doc)
  #Link points correctly at the plot server
       link = session.object_link(doc._plotcontext)
       print 'view at %s’%link
  print candestick_plot.create_html_snippet() #This works fine but creates a local file,
  print candlestick_plot.create_html_snippet() # this gives AttributeError: 'Session' object has no attribute 'docid'