How to create a HoverTool in standalone Bokeh.js?

Community Support
1

I’m trying to use BokehJS Standalone to create graphs.

Here is the following function I use to create the graph:

var drawStockHistoryGraph = function(data) {

var xx = []; 

var yy = []; 

var prices = data.prices;

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

    var pr = prices[i];

    yy.push(pr.price);  

    //var tm = pr.month + "-" + pr.day + "-" + pr.year;

    var tm = createDate(pr.year, pr.month, pr.day);

    xx.push(tm);

}   

var plt = Bokeh.Plotting;

var source = new Bokeh.ColumnDataSource({

    data: { x: xx, y: yy }

}); 

var tools = "pan,wheel_zoom,box_zoom,reset,save,hover";

var hover = Bokeh.HoverTool();

var p = plt.figure({ title: "Stock History Graph",

                     x_axis_label: "Time",

                     y_axis_label: "Price",

                     x_axis_type: "datetime",

                     tools: tools

                 });

p.xaxis.formatter.days = ['%m-%d-%Y'];

p.line({ field: "x" }, { field: "y" }, {

    source: source,

    line_width: 2.0,

    line_color: "blue",

    line_alpha: 0.5,

}); 

plt.show(p);

};

``

Everything works fine in this graph until I add in the line for creating the HoverTool, it always returns the following error message:

Uncaught TypeError: this.setv is not a function

at Object.HasProps (has_props.js:308)

at Object.Model (arrow.js:146)

at Object.Tool (es6-promise.js:932)

at Object.ButtonTool (canvas2svg.js:711)

at Object.InspectTool (es6-promise.js:826)

at Object.HoverTool (es6-promise.js:733)

at drawStockHistoryGraph (code.js:26)

at Object.success (code.js:47)

at fire (jquery-3.2.1.js:3317)

at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)

``

2

Hi,

···

On Wed, Jul 26, 2017 at 6:15 PM, [email protected] wrote:

I’m trying to use BokehJS Standalone to create graphs.

Here is the following function I use to create the graph:

var drawStockHistoryGraph = function(data) {

var xx = []; 

var yy = []; 

var prices = data.prices;

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

    var pr = prices[i];

    yy.push(pr.price);  

    //var tm = pr.month + "-" + pr.day + "-" + pr.year;

    var tm = createDate(pr.year, pr.month, pr.day);

    xx.push(tm);

}   

var plt = Bokeh.Plotting;

var source = new Bokeh.ColumnDataSource({

    data: { x: xx, y: yy }

}); 

var tools = "pan,wheel_zoom,box_zoom,reset,save,hover";

var hover = Bokeh.HoverTool();

var p = plt.figure({ title: "Stock History Graph",

                     x_axis_label: "Time",

                     y_axis_label: "Price",

                     x_axis_type: "datetime",

                     tools: tools

                 });

p.xaxis.formatter.days = ['%m-%d-%Y'];

p.line({ field: "x" }, { field: "y" }, {

    source: source,

    line_width: 2.0,

    line_color: "blue",

    line_alpha: 0.5,

}); 

plt.show(p);

};

``

Everything works fine in this graph until I add in the line for creating the HoverTool, it always returns the following error message:

Uncaught TypeError: this.setv is not a function

at Object.HasProps (has_props.js:308)

at Object.Model (arrow.js:146)

at Object.Tool (es6-promise.js:932)

at Object.ButtonTool (canvas2svg.js:711)

at Object.InspectTool (es6-promise.js:826)

at Object.HoverTool (es6-promise.js:733)

at drawStockHistoryGraph (code.js:26)

at Object.success (code.js:47)

at fire (jquery-3.2.1.js:3317)

at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)

``

var hover = Bokeh.HoverTool();

Missing new. Should be var hover = new Bokeh.HoverTool().

Mateusz

–

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/9f629bc5-f7f7-480f-a8e1-4f1946ed7e2a%40continuum.io.

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