☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

Candlestick chart with BokehJS

Community Support
russici
russici

Hello,

I am trying to generate a candlestick chart using BokehJS and have a problem with vbar glyph, more specifically, I get this error: “Uncaught TypeError: plot.vbar is not a function”. It works fine with a segment glyph. Any help is highly appreciated.

var width = 12151000;

var source = new Bokeh.ColumnDataSource({

data: { x: [Math.random()], o: [Math.random()],

    h: [Math.random()], l: [Math.random()],

    c: [Math.random()], w: width}

});

var tools = “pan,crosshair,wheel_zoom,box_zoom,reset”;

var plot = Bokeh.Plotting.figure({title:‘Example of Random data’,

			  x_axis_type:'datetime',

			  tools: tools, height: 300, width: 900});

var segment = plot.segment({field: “x”},

		   {field: "h"},

		   {field: "x"},

		   {field: "l"},

		   {source:source});

var vbar = plot.vbar({field: “x”},

	     {field: "w"},

	     {field: "o"},

	     {field: "c"},

	     {source:source});

Bokeh.Plotting.show(plot, document.getElementById(‘bk_plot’));

function getCandles(){

$.ajax({

type: "POST",

url: "/get_data",

contentType: 'application/json; charset=UTF-8',

 success: function(response){

     source.data.x = response.time;

     source.data.o = response.o;

     source.data.h = response.h;

     source.data.l = response.l;

     source.data.c = response.c;

     source.trigger('change')

},

error: function(error){

    console.log(error);

}

});

}

``

⌁   Link to post
Bryan
Bryan

Hi,

It does not look as thought the BokehJS "plotting" API has been updated to add vbar/hbar yet. This should be a fairly simple thing to do, so I'd encourage you to open an issue on GitHub about it so that the work can be prioritized and tracked. In the mean, you can either:

* use the lower level Models API (e.g. VBar and HBar classes)

* use plot.rect or plot.quad instead

Thanks,

Bryan

···

On Jan 30, 2018, at 14:36, russici@gmail.com wrote:

Hello,

I am trying to generate a candlestick chart using BokehJS and have a problem with vbar glyph, more specifically, I get this error: "Uncaught TypeError: plot.vbar is not a function". It works fine with a segment glyph. Any help is highly appreciated.

var width = 12*15*1000;

var source = new Bokeh.ColumnDataSource({
    data: { x: [Math.random()], o: [Math.random()],
          h: [Math.random()], l: [Math.random()],
          c: [Math.random()], w: width}
});

var tools = "pan,crosshair,wheel_zoom,box_zoom,reset";

var plot = Bokeh.Plotting.figure({title:'Example of Random data',
          x_axis_type:'datetime',
          tools: tools, height: 300, width: 900});

var segment = plot.segment({field: "x"},
         {field: "h"},
         {field: "x"},
         {field: "l"},
         {source:source});

var vbar = plot.vbar({field: "x"},
         {field: "w"},
         {field: "o"},
         {field: "c"},
         {source:source});

Bokeh.Plotting.show(plot, document.getElementById('bk_plot'));

function getCandles(){
     $.ajax({
      type: "POST",
      url: "/get_data",
      contentType: 'application/json; charset=UTF-8',
       success: function(response){
           source.data.x = response.time;
       source.data.o = response.o;
       source.data.h = response.h;
       source.data.l = response.l;
       source.data.c = response.c;
       source.trigger('change')
      },
      error: function(error){
          console.log(error);
      }
    });
}

--
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 bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ce995eac-b1bf-44d7-abaa-c5a426413bfe%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁   Link to post
russici
russici

Bryan,

Thank you very much for your suggestion.

Best,

Vitali

···

On Tuesday, January 30, 2018 at 4:05:58 PM UTC-5, Bryan Van de ven wrote:

Hi,

It does not look as thought the BokehJS “plotting” API has been updated to add vbar/hbar yet. This should be a fairly simple thing to do, so I’d encourage you to open an issue on GitHub about it so that the work can be prioritized and tracked. In the mean, you can either:

  • use the lower level Models API (e.g. VBar and HBar classes)

  • use plot.rect or plot.quad instead

Thanks,

Bryan

On Jan 30, 2018, at 14:36, rus...@gmail.com wrote:

Hello,

I am trying to generate a candlestick chart using BokehJS and have a problem with vbar glyph, more specifically, I get this error: “Uncaught TypeError: plot.vbar is not a function”. It works fine with a segment glyph. Any help is highly appreciated.

var width = 12151000;

var source = new Bokeh.ColumnDataSource({

data: { x: [Math.random()], o: [Math.random()],
            h: [Math.random()], l: [Math.random()],
            c: [Math.random()], w: width}

});

var tools = “pan,crosshair,wheel_zoom,box_zoom,reset”;

var plot = Bokeh.Plotting.figure({title:‘Example of Random data’,

                              x_axis_type:'datetime',
                              tools: tools, height: 300, width: 900});

var segment = plot.segment({field: “x”},

                       {field: "h"},
                       {field: "x"},
                       {field: "l"},
                       {source:source});

var vbar = plot.vbar({field: “x”},

                 {field: "w"},
                 {field: "o"},
                 {field: "c"},
                 {source:source});

Bokeh.Plotting.show(plot, document.getElementById(‘bk_plot’));

function getCandles(){

 $.ajax({
        type: "POST",
        url: "/get_data",
        contentType: 'application/json; charset=UTF-8',
         success: function(response){
             source.data.x = response.time;
         source.data.o = response.o;
         source.data.h = response.h;
         source.data.l = response.l;
         source.data.c = response.c;
         source.trigger('change')
        },
        error: function(error){
            console.log(error);
        }
});

}

–
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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ce995eac-b1bf-44d7-abaa-c5a426413bfe%40continuum.io.

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

⌁   Link to post

End of archived discussion · Replies are disabled