CustomJS for Selections - OHLC data

Hi All,
i am working on the example found at JavaScript callbacks — Bokeh 2.4.2 Documentation under Custom JS for Selections.

I have rewritten the code according my purpose but it’s not behaving as expected. My first goal is to try to replicate 100% the example above with daily OHLC candles. Once done I will try to display on the second chart an inferior time frame OHLC sample based on the range selected from the first chart.

Inspecting JS from the broser i get bokeh-0.12.11.min.js:sourcemap:30 [bokeh] could not set initial ranges

Here is my code,

any help much appreciated!

many thanks

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import pandas as pd

from bokeh.plotting import figure, curdoc

from bokeh.models.tools import HoverTool, WheelZoomTool, PanTool

from bokeh import events

from bokeh.layouts import widgetbox, row, column

from bokeh.models.widgets.buttons import Button

from bokeh.embed import components

from bokeh.io import output_file, save, show

from bokeh.embed.standalone import file_html

from bokeh.core.properties import Instance, List

from bokeh.models.tools import Tap, Tool, LassoSelectTool

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

from bokeh.models import BoxSelectTool, Rect, WheelZoomTool

from bokeh.events import DoubleTap

from bokeh.resources import CDN

def image_label_plot():

Ohlc_All = ImportingData()

df = Ohlc_All

#source_ohlc = ColumnDataSource( { ‘time’: df.time, ‘low’ : df.low, ‘high’ : df.high, ‘open’ : df.open, ‘close’ : df.close, ‘color’ : df.color } )

source_ohlc = ColumnDataSource( df )

source_ohlc2 = ColumnDataSource( { ‘time’: , ‘low’ : , ‘high’ : , ‘open’ : , ‘close’ : , ‘color’ : } )

plot = figure( x_axis_type = ‘datetime’, toolbar_location = ‘above’ )

plot_2 = figure( x_axis_type = ‘datetime’, toolbar_location = ‘above’ )

plot.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc)

plot.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc)

plot_2.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc2)

plot_2.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc2)

plot.add_tools(LassoSelectTool())

source_ohlc.callback = CustomJS(args=dict(s2=source_ohlc2), code="""

var inds = cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

for (i = 0; i < inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

output_file(‘test.html’)

return column(plot,plot_2)

if name == ‘main’:

plot = image_label_plot()

show(plot)

Any help for this?
thanks

Andrea

···

On Tuesday, December 5, 2017 at 9:09:58 AM UTC+1, Andrea Tagliabue wrote:

Hi All,
i am working on the example found at https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html under Custom JS for Selections.

I have rewritten the code according my purpose but it’s not behaving as expected. My first goal is to try to replicate 100% the example above with daily OHLC candles. Once done I will try to display on the second chart an inferior time frame OHLC sample based on the range selected from the first chart.

Inspecting JS from the broser i get bokeh-0.12.11.min.js:sourcemap:30 [bokeh] could not set initial ranges

Here is my code,

any help much appreciated!

many thanks

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import pandas as pd

from bokeh.plotting import figure, curdoc

from bokeh.models.tools import HoverTool, WheelZoomTool, PanTool

from bokeh import events

from bokeh.layouts import widgetbox, row, column

from bokeh.models.widgets.buttons import Button

from bokeh.embed import components

from bokeh.io import output_file, save, show

from bokeh.embed.standalone import file_html

from bokeh.core.properties import Instance, List

from bokeh.models.tools import Tap, Tool, LassoSelectTool

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

from bokeh.models import BoxSelectTool, Rect, WheelZoomTool

from bokeh.events import DoubleTap

from bokeh.resources import CDN

def image_label_plot():

Ohlc_All = ImportingData()

df = Ohlc_All

#source_ohlc = ColumnDataSource( { ‘time’: df.time, ‘low’ : df.low, ‘high’ : df.high, ‘open’ : df.open, ‘close’ : df.close, ‘color’ : df.color } )

source_ohlc = ColumnDataSource( df )

source_ohlc2 = ColumnDataSource( { ‘time’: , ‘low’ : , ‘high’ : , ‘open’ : , ‘close’ : , ‘color’ : } )

plot = figure( x_axis_type = ‘datetime’, toolbar_location = ‘above’ )

plot_2 = figure( x_axis_type = ‘datetime’, toolbar_location = ‘above’ )

plot.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc)

plot.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc)

plot_2.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc2)

plot_2.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc2)

plot.add_tools(LassoSelectTool())

source_ohlc.callback = CustomJS(args=dict(s2=source_ohlc2), code=“”"

var inds = cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

for (i = 0; i < inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

output_file(‘test.html’)

return column(plot,plot_2)

if name == ‘main’:

plot = image_label_plot()

show(plot)

I have an error in the script…

Traceback (most recent call last):
File “test.py”, line 66, in
plot = image_label_plot()
File “test.py”, line 23, in image_label_plot
Ohlc_All = ImportingData()
NameError: name ‘ImportingData’ is not defined

···

On 2017-12-14 10:07, Andrea Tagliabue
wrote:

Any help for this?
thanks

Andrea

      On Tuesday, December 5, 2017 at 9:09:58 AM UTC+1, Andrea

Tagliabue wrote:

Hi All,
i am working on the example found at https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
under Custom JS for Selections.

            I have rewritten the code according my purpose but

it’s not behaving as expected. My first goal is to try
to replicate 100% the example above with daily OHLC
candles. Once done I will try to display on the second
chart an inferior time frame OHLC sample based on the
range selected from the first chart.

            Inspecting JS from the broser i get   

bokeh-0.12.11.min.js: sourcemap:30 [bokeh] could not
set initial ranges

Here is my code,

any help much appreciated!

many thanks

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import pandas as pd

from bokeh.plotting import figure, curdoc

              from bokeh.models.tools import HoverTool,

WheelZoomTool, PanTool

from bokeh import events

from bokeh.layouts import widgetbox, row, column

from bokeh.models.widgets.buttons import Button

from bokeh.embed import components

from bokeh.io import
output_file, save, show

from bokeh.embed.standalone import file_html

from bokeh.core.properties import Instance, List

              from bokeh.models.tools import Tap, Tool,

LassoSelectTool

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

              from bokeh.models import BoxSelectTool, Rect,

WheelZoomTool

from bokeh.events import DoubleTap

from bokeh.resources import CDN

def image_label_plot():

Ohlc_All = ImportingData()

df = Ohlc_All

              #source_ohlc             = ColumnDataSource( {

‘time’: df.time, ‘low’ : df.low, ‘high’ : df.high,
‘open’ : df.open, ‘close’ : df.close, ‘color’ :
df.color } )

              source_ohlc             = ColumnDataSource( df

)

              source_ohlc2            = ColumnDataSource( {

‘time’: , ‘low’ : , ‘high’ : , ‘open’ : ,
‘close’ : , ‘color’ : } )

              plot = figure( x_axis_type = 'datetime',

toolbar_location = ‘above’ )

              plot_2 = figure( x_axis_type = 'datetime',

toolbar_location = ‘above’ )

              plot.segment(x0='time', y0='low', x1='time',

y1=‘high’, line_width=1, color=‘black’, source =
source_ohlc)

              plot.segment(x0='time', y0='open', x1='time',

y1=‘close’, line_width=3, color=‘color’, source =
source_ohlc)

              plot_2.segment(x0='time', y0='low', x1='time',

y1=‘high’, line_width=1, color=‘black’, source =
source_ohlc2)

              plot_2.segment(x0='time', y0='open', x1='time',

y1=‘close’, line_width=3, color=‘color’, source =
source_ohlc2)

plot.add_tools(LassoSelectTool())

              source_ohlc.callback =

CustomJS(args=dict(s2=source_ohlc2), code=“”"

              var inds =

cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

              for (i = 0; i < inds.length;

i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

output_file(‘test.html’)

return column(plot,plot_2)

if name == ‘main’:

plot = image_label_plot()

show(plot)

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/304b3532-3716-4b86-9f45-38a870bbb9cb%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/304b3532-3716-4b86-9f45-38a870bbb9cb%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

Hi,

The message:

  bokeh-0.12.11.min.js:sourcemap:30

Is completely harmless and can be ignored, and the message

  [bokeh] could not set initial ranges

typically just means your plot is starting "empty" with no data points, and so can also usually be ignored.

As Busino noted, to really help, more information is needed. For instance, saying "it's not behaving as expected" does not give any indication at all of what you are expecting to happen, or of what is going wrong. Additionally we really need a *complete* script that we can run ourselves to have the best chance of helping.

Thanks,

Bryan

···

On Dec 5, 2017, at 02:09, Andrea Tagliabue <[email protected]> wrote:

Hi All,
i am working on the example found at https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html under Custom JS for Selections.
I have rewritten the code according my purpose but it's not behaving as expected. My first goal is to try to replicate 100% the example above with daily OHLC candles. Once done I will try to display on the second chart an inferior time frame OHLC sample based on the range selected from the first chart.
Inspecting JS from the broser i get bokeh-0.12.11.min.js:sourcemap:30 [bokeh] could not set initial ranges

Here is my code,
any help much appreciated!
many thanks
Andrea

import bokeh.util.compiler
bokeh.util.compiler._npmjs = 'npm.cmd'
import pandas as pd
from bokeh.plotting import figure, curdoc
from bokeh.models.tools import HoverTool, WheelZoomTool, PanTool
from bokeh import events
from bokeh.layouts import widgetbox, row, column
from bokeh.models.widgets.buttons import Button
from bokeh.embed import components
from bokeh.io import output_file, save, show
from bokeh.embed.standalone import file_html
from bokeh.core.properties import Instance, List
from bokeh.models.tools import Tap, Tool, LassoSelectTool
from bokeh.models.callbacks import CustomJS
from bokeh.models.sources import ColumnDataSource
from bokeh.models import BoxSelectTool, Rect, WheelZoomTool
from bokeh.events import DoubleTap
from bokeh.resources import CDN

def image_label_plot():
    
    Ohlc_All = ImportingData()
    df = Ohlc_All
    #source_ohlc = ColumnDataSource( { 'time': df.time, 'low' : df.low, 'high' : df.high, 'open' : df.open, 'close' : df.close, 'color' : df.color } )
    source_ohlc = ColumnDataSource( df )
    source_ohlc2 = ColumnDataSource( { 'time': , 'low' : , 'high' : , 'open' : , 'close' : , 'color' : } )

    plot = figure( x_axis_type = 'datetime', toolbar_location = 'above' )
    plot_2 = figure( x_axis_type = 'datetime', toolbar_location = 'above' )

    plot.segment(x0='time', y0='low', x1='time', y1='high', line_width=1, color='black', source = source_ohlc)
    plot.segment(x0='time', y0='open', x1='time', y1='close', line_width=3, color='color', source = source_ohlc)
    plot_2.segment(x0='time', y0='low', x1='time', y1='high', line_width=1, color='black', source = source_ohlc2)
    plot_2.segment(x0='time', y0='open', x1='time', y1='close', line_width=3, color='color', source = source_ohlc2)

    plot.add_tools(LassoSelectTool())
       
    source_ohlc.callback = CustomJS(args=dict(s2=source_ohlc2), code="""
                                                                        var inds = cb_obj.selected['1d'].indices;
                                                                        var d1 = cb_obj.data;
                                                                        var d2 = s2.data;
                                                                        d2['time'] =
                                                                        d2['open'] =
                                                                        d2['low'] =
                                                                        d2['high'] =
                                                                        d2['close'] =
                                                                        d2['color'] =
                                                                        for (i = 0; i < inds.length; i++) {
                                                                            d2['time'].push(d1['time'][inds[i]])
                                                                            d2['open'].push(d1['open'][inds[i]])
                                                                            d2['low'].push(d1['low'][inds[i]])
                                                                            d2['high'].push(d1['high'][inds[i]])
                                                                            d2['close'].push(d1['close'][inds[i]])
                                                                            d2['color'].push(d1['color'][inds[i]])
                                                                        }
                                                                        s2.change.emit();
                                                                    """)

    output_file('test.html')
    return column(plot,plot_2)
    
if __name__ == '__main__':
    plot = image_label_plot()
    show(plot)
    
--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9dd12650-65c0-4c2e-85b5-d94768910a73%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Raphael/Bryan,

I will give a quick recap of what i am trying to achieve. I have two plots. In the first one i have daily OHLC. In the second I would like to show 10 minute intraday OHLC based on what has been selected in the first plot.
I was using the lasso tool for achieving this functionality. However i got problems since any selection didn’t show up anything. Raphael suggested that segments are not supported. Hence i plotted invisible circles using time column as x and open value as y. In this way i am able to displaying some data in the second chart as well.

I am saying some data because i am still showing daily candles in the second plot. But at least now i know i have found a way for making the lasso tool working.

I copy here my full code and i will attach a very small sample of my data so you can reproduce my small app.

I will write a second email for what i am trying to achieve now.

Many thanks,

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import numpy as np

import pandas as pd

import ctypes, os

from bokeh.plotting import figure

from bokeh.models.tools import LassoSelectTool

from bokeh import events

from bokeh.layouts import column

from bokeh.io import output_file, show

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

def ImportingData():

df=pd.read_pickle( os.getcwd() + ‘\EURUSD_10T_SmallSample’)

df[‘color’] = np.where( df.close > df.open, ‘green’,‘red’ )

df_Daily = ReSampleOhlc( df, ‘1D’ )

df_Daily.index = pd.to_datetime(df_Daily.index)

df_Daily[‘color’] = np.where( df_Daily.close > df_Daily.open, ‘green’,‘red’ )

df_Daily[‘time’] = range(len(df_Daily.index))

df_Daily[‘days’]=df_Daily.index.map(lambda x:x.strftime(‘%Y-%m-%d’))

df_temp = pd.merge(df_Daily[[‘days’,‘time’]],df,on=‘days’)

df_temp.index = df.index

df = df_temp

return df_Daily, df

def ReSampleOhlc( df, Frequency ):

return df.resample( rule = Frequency ).agg( {‘low’: ‘min’,

‘high’: ‘max’,

‘open’: ‘first’,

‘close’: ‘last’} ).dropna()

def plotting():

output_file(‘test.html’)

df_Daily, df_10T = ImportingData()

source_ohlc = ColumnDataSource( df_Daily )

source_ohlc2 = ColumnDataSource( { ‘time’: , ‘low’ : , ‘high’ : , ‘open’ : , ‘close’ : , ‘color’ : } )

screen_width,screen_height = ctypes.windll.user32.GetSystemMetrics(0)*0.4, ctypes.windll.user32.GetSystemMetrics(1)*0.4

plot = figure( x_axis_type = ‘datetime’, plot_width=int(screen_width), plot_height=int(screen_height), toolbar_location = ‘above’ )

plot_2 = figure( x_axis_type = ‘datetime’, plot_width=int(screen_width), plot_height=int(screen_height), toolbar_location = ‘above’ )

plot.grid.grid_line_color, plot_2.grid.grid_line_color = None, None

plot.xaxis.visible, plot_2.xaxis.visible = False, False

plot.yaxis.visible, plot_2.yaxis.visible = False, False

plot.background_fill_color, plot_2.background_fill_color = ‘#eeeeee’,‘#eeeeee

plot.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc)

plot.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc)

plot_2.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc2)

plot_2.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc2)

circle = plot.circle(x=‘time’, y=‘open’, color=‘yellow’, fill_color=‘green’, fill_alpha=0.0, line_alpha=0,source=source_ohlc)

plot.add_tools(LassoSelectTool(renderers=[circle]))

source_ohlc.callback = CustomJS(args=dict(s2=source_ohlc2), code=“”"

var inds = cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

for (i = 0; i < inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

return column(plot,plot_2)

if name == ‘main’:

show( plotting() )

EURUSD_10T_SmallSample (4.8 MB)

Hi Raphael/Bryan,
so the final outcome as i said is to display intraday candles on the second plot. I just figured out that if i load all my dataset into a columndatasource the system stops. I have just two much data (250 mb) pickled. So i need to consider this problem as well. Hence keeping the data in a dataframe should be the best idea. In this case i guess i can’t use a customJS callback but i need to implement a python callback, extracting only the data needed from the 10 minute df and pushing it to the second plot.
If you think that’s the right path could you please suggest how i should perform it?
thanks

Andrea

···

On 15 December 2017 at 11:14, Andrea Tagliabue [email protected] wrote:

Hi Raphael/Bryan,

I will give a quick recap of what i am trying to achieve. I have two plots. In the first one i have daily OHLC. In the second I would like to show 10 minute intraday OHLC based on what has been selected in the first plot.
I was using the lasso tool for achieving this functionality. However i got problems since any selection didn’t show up anything. Raphael suggested that segments are not supported. Hence i plotted invisible circles using time column as x and open value as y. In this way i am able to displaying some data in the second chart as well.

I am saying some data because i am still showing daily candles in the second plot. But at least now i know i have found a way for making the lasso tool working.

I copy here my full code and i will attach a very small sample of my data so you can reproduce my small app.

I will write a second email for what i am trying to achieve now.

Many thanks,

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import numpy as np

import pandas as pd

import ctypes, os

from bokeh.plotting import figure

from bokeh.models.tools import LassoSelectTool

from bokeh import events

from bokeh.layouts import column

from bokeh.io import output_file, show

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

def ImportingData():

df=pd.read_pickle( os.getcwd() + ‘\EURUSD_10T_SmallSample’)

df[‘color’] = np.where( df.close > df.open, ‘green’,‘red’ )

df_Daily = ReSampleOhlc( df, ‘1D’ )

df_Daily.index = pd.to_datetime(df_Daily.index)

df_Daily[‘color’] = np.where( df_Daily.close > df_Daily.open, ‘green’,‘red’ )

df_Daily[‘time’] = range(len(df_Daily.index))

df_Daily[‘days’]=df_Daily.index.map(lambda x:x.strftime(‘%Y-%m-%d’))

df_temp = pd.merge(df_Daily[[‘days’,‘time’]],df,on=‘days’)

df_temp.index = df.index

df = df_temp

return df_Daily, df

def ReSampleOhlc( df, Frequency ):

return df.resample( rule = Frequency ).agg( {‘low’: ‘min’,

‘high’: ‘max’,

‘open’: ‘first’,

‘close’: ‘last’} ).dropna()

def plotting():

output_file(‘test.html’)

df_Daily, df_10T = ImportingData()

source_ohlc = ColumnDataSource( df_Daily )

source_ohlc2 = ColumnDataSource( { ‘time’: , ‘low’ : , ‘high’ : , ‘open’ : , ‘close’ : , ‘color’ : } )

screen_width,screen_height = ctypes.windll.user32.GetSystemMetrics(0)*0.4, ctypes.windll.user32.GetSystemMetrics(1)*0.4

plot = figure( x_axis_type = ‘datetime’, plot_width=int(screen_width), plot_height=int(screen_height), toolbar_location = ‘above’ )

plot_2 = figure( x_axis_type = ‘datetime’, plot_width=int(screen_width), plot_height=int(screen_height), toolbar_location = ‘above’ )

plot.grid.grid_line_color, plot_2.grid.grid_line_color = None, None

plot.xaxis.visible, plot_2.xaxis.visible = False, False

plot.yaxis.visible, plot_2.yaxis.visible = False, False

plot.background_fill_color, plot_2.background_fill_color = ‘#eeeeee’,‘#eeeeee

plot.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc)

plot.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc)

plot_2.segment(x0=‘time’, y0=‘low’, x1=‘time’, y1=‘high’, line_width=1, color=‘black’, source = source_ohlc2)

plot_2.segment(x0=‘time’, y0=‘open’, x1=‘time’, y1=‘close’, line_width=3, color=‘color’, source = source_ohlc2)

circle = plot.circle(x=‘time’, y=‘open’, color=‘yellow’, fill_color=‘green’, fill_alpha=0.0, line_alpha=0,source=source_ohlc)

plot.add_tools(LassoSelectTool(renderers=[circle]))

source_ohlc.callback = CustomJS(args=dict(s2=source_ohlc2), code=“”"

var inds = cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

for (i = 0; i < inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

return column(plot,plot_2)

if name == ‘main’:

show( plotting() )

Hi Andrea,

I'm not a bokeh server user! This is why I do a lot of things with

ajax calls.

I created an application with the same thing you try to do.
I have a sonograph in which you can select the time and frequency

range which is then displayed in a second plot with higher
resolution.
1) select the range with a BoxSelectTool
2) From the BoxSelectTool I extract the area selected (get the range
to be displayed)
3) Fill the ranges in input fields
4) On Update-Button-Click I trigger an ajax-call to the server which
is delivering the data to be displayed in the second plot.

It's not needed to fill the ranges into input fields. I think this

can be done directly after selection callback.

Raphael
···

On 2017-12-15 11:43, Andrea Tagliabue
wrote:

Hi Raphael/Bryan,
so the final outcome as i said is to display intraday
candles on the second plot. I just figured out that if i load
all my dataset into a columndatasource the system stops. I
have just two much data (250 mb) pickled. So i need to
consider this problem as well. Hence keeping the data in a
dataframe should be the best idea. In this case i guess i
can’t use a customJS callback but i need to implement a python
callback, extracting only the data needed from the 10 minute
df and pushing it to the second plot.

      If you think that's the right path could you please suggest

how i should perform it?

      thanks

Andrea

      On 15 December 2017 at 11:14, Andrea

Tagliabue [email protected]
wrote:

Hi Raphael/Bryan,

                  I will give a quick recap of what i am trying

to achieve. I have two plots. In the first one i
have daily OHLC. In the second I would like to
show 10 minute intraday OHLC based on what has
been selected in the first plot.

                  I was using the lasso tool for achieving this

functionality. However i got problems since any
selection didn’t show up anything. Raphael
suggested that segments are not supported. Hence i
plotted invisible circles using time column as x
and open value as y. In this way i am able to
displaying some data in the second chart as well.

                  I am saying some data because i am still

showing daily candles in the second plot. But at
least now i know i have found a way for making the
lasso tool working.

                  I copy here my full code and i will attach a

very small sample of my data so you can reproduce
my small app.

                  I will write a second email for what i am

trying to achieve now.

Many thanks,

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import numpy as np

import pandas as pd

import ctypes, os

from bokeh.plotting import figure

from bokeh.models.tools import LassoSelectTool

from bokeh import events

from bokeh.layouts import column

from bokeh.io import
output_file, show

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

def ImportingData():

                df=pd.read_pickle( os.getcwd() +

‘\EURUSD_10T_SmallSample’)

                df['color'] = np.where( df.close >

df.open, ‘green’,‘red’ )

df_Daily = ReSampleOhlc( df, ‘1D’ )

                df_Daily.index    =

pd.to_datetime(df_Daily.index)

                df_Daily['color'] = np.where(

df_Daily.close > df_Daily.open, ‘green’,‘red’ )

                df_Daily['time']  =

range(len(df_Daily.index))

df_Daily[‘days’]=df_Daily. index.map(lambda
x:x.strftime(‘%Y-%m-%d’))

df_temp = pd.merge(df_Daily[[‘days’,‘time’]],df,on=‘days’)

df_temp.index = df.index

df = df_temp

return df_Daily, df

def ReSampleOhlc( df, Frequency ):

                return df.resample( rule = Frequency ).agg(

{‘low’: ‘min’,

‘high’: ‘max’,

‘open’: ‘first’,

‘close’: ‘last’} ).dropna()

def plotting():

output_file(‘test.html’)

df_Daily, df_10T = ImportingData()

                source_ohlc             = ColumnDataSource(

df_Daily )

                source_ohlc2            = ColumnDataSource( {

‘time’: , ‘low’ : , ‘high’ : , ‘open’ : ,
‘close’ : , ‘color’ : } )

                screen_width,screen_height =

ctypes.windll.user32. GetSystemMetrics(0)*0.4,
ctypes.windll.user32.GetSystemMetrics(1)*0.4

                plot = figure( x_axis_type = 'datetime',

plot_width=int(screen_width),
plot_height=int(screen_height) ,
toolbar_location = ‘above’ )

                plot_2 = figure( x_axis_type = 'datetime',

plot_width=int(screen_width),
plot_height=int(screen_height) ,
toolbar_location = ‘above’ )

                plot.grid.grid_line_color,

plot_2.grid.grid_line_color = None, None

                plot.xaxis.visible, plot_2.xaxis.visible =

False, False

                plot.yaxis.visible, plot_2.yaxis.visible  =

False, False

                plot.background_fill_color,

plot_2.background_fill_color = ‘#eeeeee’,‘#eeeeee

                plot.segment(x0='time', y0='low', x1='time',

y1=‘high’, line_width=1, color=‘black’, source =
source_ohlc)

                plot.segment(x0='time', y0='open', x1='time',

y1=‘close’, line_width=3, color=‘color’, source =
source_ohlc)

                plot_2.segment(x0='time', y0='low',

x1=‘time’, y1=‘high’, line_width=1, color=‘black’,
source = source_ohlc2)

                plot_2.segment(x0='time', y0='open',

x1=‘time’, y1=‘close’, line_width=3, color=‘color’,
source = source_ohlc2)

                circle = plot.circle(x='time', y='open',

color=‘yellow’, fill_color=‘green’, fill_alpha=0.0,
line_alpha=0,source=source_ohlc)

plot.add_tools(LassoSelectTool(renderers=[circle]))

                source_ohlc.callback =

CustomJS(args=dict(s2=source_ohlc2), code=“”"

                var inds =

cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

                for (i = 0; i <

inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

return column(plot,plot_2)

if name == ‘main’:

show( plotting() )

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKUye6DL6hB-96EeEOhDB10MrGFSjU%3DwPix%3DrzLJiqKsgCNdNA%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKUye6DL6hB-96EeEOhDB10MrGFSjU%3DwPix%3DrzLJiqKsgCNdNA%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

Okay,
You know time is limited and I cannot share a complete code. But
here are some snippets that could help you implementing it.
If you clue it together it will be possible to give more help.

**plot.py**
'''
first_plot = figure(...)
second_plot = figure(....)

first_src = ColumnDataSource(...)
second_src = ColumnDataSource(...)

first_plot.scatter(first_src)
second_plot.scatter(second_src)

jscode = '''
var geometry = cb_data['geometry'];
// the data is provided in ms
var start = Math.round(geometry.x0);
var end = Math.round(geometry.x1);
var url = 'yourhost.com/api/data';
var data = {'start': start, 'end': end};
$.ajax({
      type: 'GET',
      url: url,
      data: data,
      contentType: "application/json",
      header: { client: "javascript"},
      success: function(result) {
        console.log('done detail spectrogram');
        // fill the data in the second_source
        second_src.change.emit();
      },
      error: function (jqXHR, textStatus, errorThrown) {
        $('div#log').html('<div class="alert alert-danger"

role=“alert”>Load Failed.

'+ textStatus + ‘: ’ +
jqXHR.statusText + ‘
’);
},
}).done(function() {
});
‘’’
callback = CustomJS(args=dict(first_source=first_src,
second_src=second_src, …),
code=jscode)

# Select on Spectrum   
bs = BoxSelectTool(dimensions='width', callback=callback,

name=‘box_select’)
spec.add_tools(bs)
‘’’

**      Server.py depends on the framework you use. This one is for

django class based view

···

On 2017-12-15 11:53, Web Busino wrote:

Hi Andrea,

  I'm not a bokeh server user! This is why I do a lot of things with

ajax calls.

  I created an application with the same thing you try to do.

  I have a sonograph in which you can select the time and frequency

range which is then displayed in a second plot with higher
resolution.

  1) select the range with a BoxSelectTool

  2) From the BoxSelectTool I extract the area selected (get the

range to be displayed)

  3) Fill the ranges in input fields

  4) On Update-Button-Click I trigger an ajax-call to the server

which is delivering the data to be displayed in the second plot.

  It's not needed to fill the ranges into input fields. I think this

can be done directly after selection callback.

  Raphael
  -- You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it,
send an email to .
To post to this group, send email to .
To view this discussion on the web visit .
For more options, visit .

    On 2017-12-15 11:43, Andrea Tagliabue

wrote:

Hi Raphael/Bryan,
so the final outcome as i said is to display intraday
candles on the second plot. I just figured out that if i
load all my dataset into a columndatasource the system
stops. I have just two much data (250 mb) pickled. So i need
to consider this problem as well. Hence keeping the data in
a dataframe should be the best idea. In this case i guess i
can’t use a customJS callback but i need to implement a
python callback, extracting only the data needed from the 10
minute df and pushing it to the second plot.

        If you think that's the right path could you please suggest

how i should perform it?

        thanks

Andrea

        On 15 December 2017 at 11:14, Andrea

Tagliabue [email protected]
wrote:

Hi Raphael/Bryan,

                    I will give a quick recap of what i am trying

to achieve. I have two plots. In the first one i
have daily OHLC. In the second I would like to
show 10 minute intraday OHLC based on what has
been selected in the first plot.

                    I was using the lasso tool for achieving this

functionality. However i got problems since any
selection didn’t show up anything. Raphael
suggested that segments are not supported. Hence
i plotted invisible circles using time column as
x and open value as y. In this way i am able to
displaying some data in the second chart as
well.

                    I am saying some data because i am still

showing daily candles in the second plot. But at
least now i know i have found a way for making
the lasso tool working.

                    I copy here my full code and i will attach a

very small sample of my data so you can
reproduce my small app.

                    I will write a second email for what i am

trying to achieve now.

Many thanks,

Andrea

import bokeh.util.compiler

bokeh.util.compiler._npmjs = ‘npm.cmd’

import numpy as np

import pandas as pd

import ctypes, os

from bokeh.plotting import figure

from bokeh.models.tools import LassoSelectTool

from bokeh import events

from bokeh.layouts import column

from bokeh.io import
output_file, show

from bokeh.models.callbacks import CustomJS

from bokeh.models.sources import ColumnDataSource

def ImportingData():

                  df=pd.read_pickle( os.getcwd() +

‘\EURUSD_10T_SmallSample’)

                  df['color'] = np.where( df.close >

df.open, ‘green’,‘red’ )

df_Daily = ReSampleOhlc( df, ‘1D’ )

                  df_Daily.index    =

pd.to_datetime(df_Daily.index)

                  df_Daily['color'] = np.where(

df_Daily.close > df_Daily.open, ‘green’,‘red’ )

                  df_Daily['time']  =

range(len(df_Daily.index))

df_Daily[‘days’]=df_Daily. index.map(lambda
x:x.strftime(‘%Y-%m-%d’))

df_temp = pd.merge(df_Daily[[‘days’,‘time’]],df,on=‘days’)

df_temp.index = df.index

df = df_temp

return df_Daily, df

def ReSampleOhlc( df, Frequency ):

                  return df.resample( rule = Frequency ).agg(

{‘low’: ‘min’,

‘high’: ‘max’,

‘open’: ‘first’,

‘close’: ‘last’} ).dropna()

def plotting():

output_file(‘test.html’)

df_Daily, df_10T = ImportingData()

                  source_ohlc             = ColumnDataSource(

df_Daily )

                  source_ohlc2            = ColumnDataSource(

{ ‘time’: , ‘low’ : , ‘high’ : , ‘open’ :
, ‘close’ : , ‘color’ : } )

                  screen_width,screen_height =

ctypes.windll.user32. GetSystemMetrics(0)*0.4,
ctypes.windll.user32.GetSystemMetrics(1)*0.4

                  plot = figure( x_axis_type = 'datetime',

plot_width=int(screen_width),
plot_height=int(screen_height) ,
toolbar_location = ‘above’ )

                  plot_2 = figure( x_axis_type = 'datetime',

plot_width=int(screen_width),
plot_height=int(screen_height) ,
toolbar_location = ‘above’ )

                  plot.grid.grid_line_color,

plot_2.grid.grid_line_color = None, None

                  plot.xaxis.visible, plot_2.xaxis.visible =

False, False

                  plot.yaxis.visible, plot_2.yaxis.visible  =

False, False

                  plot.background_fill_color,

plot_2.background_fill_color = ‘#eeeeee’,‘#eeeeee

                  plot.segment(x0='time', y0='low',

x1=‘time’, y1=‘high’, line_width=1, color=‘black’,
source = source_ohlc)

                  plot.segment(x0='time', y0='open',

x1=‘time’, y1=‘close’, line_width=3,
color=‘color’, source = source_ohlc)

                  plot_2.segment(x0='time', y0='low',

x1=‘time’, y1=‘high’, line_width=1, color=‘black’,
source = source_ohlc2)

                  plot_2.segment(x0='time', y0='open',

x1=‘time’, y1=‘close’, line_width=3,
color=‘color’, source = source_ohlc2)

                  circle = plot.circle(x='time', y='open',

color=‘yellow’, fill_color=‘green’,
fill_alpha=0.0, line_alpha=0,source=source_ohlc)

plot.add_tools(LassoSelectTool(renderers=[circle]))

                  source_ohlc.callback =

CustomJS(args=dict(s2=source_ohlc2), code=“”"

                  var inds =

cb_obj.selected[‘1d’].indices;

var d1 = cb_obj.data;

var d2 = s2.data;

d2[‘time’] =

d2[‘open’] =

d2[‘low’] =

d2[‘high’] =

d2[‘close’] =

d2[‘color’] =

                  for (i = 0; i <

inds.length; i++) {

d2[‘time’].push(d1[‘time’][inds[i]])

d2[‘open’].push(d1[‘open’][inds[i]])

d2[‘low’].push(d1[‘low’][inds[i]])

d2[‘high’].push(d1[‘high’][inds[i]])

d2[‘close’].push(d1[‘close’][inds[i]])

d2[‘color’].push(d1[‘color’][inds[i]])

}

s2.change.emit();

“”")

return column(plot,plot_2)

if name == ‘main’:

show( plotting() )

    You received this message because you are subscribed to the

Google Groups “Bokeh Discussion - Public” group.

    To unsubscribe from this group and stop receiving emails from

it, send an email to [email protected].

    To post to this group, send email to [email protected].

    To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKUye6DL6hB-96EeEOhDB10MrGFSjU%3DwPix%3DrzLJiqKsgCNdNA%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKUye6DL6hB-96EeEOhDB10MrGFSjU%3DwPix%3DrzLJiqKsgCNdNA%40mail.gmail.com?utm_medium=email&utm_source=footer).

    For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

[email protected]
[email protected]
https://groups.google.com/a/continuum.io/d/msgid/bokeh/455c1fb9-6eda-dcaf-35c8-094f09997305%40busino.ch
https://groups.google.com/a/continuum.io/d/optout