Example of Stacked Bar Chart without using High Level Chart API

Community Support
1

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

2

With the new vbar/hbar it’s going to be pretty straight forward , the trick will be getting
your data i n the right
shape.

Unfort unately
it looks like we
don’t have any examples showing this off.
This would be a very good addition to the
examples and
docs so I 've made an
issue:

···

http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbarhttps://github.com/bokeh/bokeh/issues/5083
On 9/2/16 1:33 PM, Reuben Jacobs wrote:

    Does anyone have an example or knows where an

example exists of making a stacked bar chart in bokeh without
using the charts API (Bar)

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
3

Sarah,

Is this vbar functionality released in 0.12.1? Can I currently make a stacked bar graph using vbar? If I am able to do so, I may be able to create an example.

Reuben

···

On Friday, September 2, 2016 at 4:43:14 PM UTC-4, Sarah Bird wrote:

With the new vbar/hbar it’s going to be pretty straight forward , the trick will be getting
your data i n the right
shape.

http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar

Unfort unately
it looks like we
don’t have any examples showing this off.
This would be a very good addition to the
examples and
docs so I 've made an
issue:
https://github.com/bokeh/bokeh/issues/5083

On 9/2/16 1:33 PM, Reuben Jacobs wrote:

    Does anyone have an example or knows where an

example exists of making a stacked bar chart in bokeh without
using the charts API (Bar)

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)
4

Yes, vbar is in
0.12.1 (the hit testing only came in 0.12.2 - available in dev builds)

···

On 9/2/16 1:51 PM, Reuben Jacobs wrote:

Sarah,

      Is this vbar functionality released in 0.12.1? Can I

currently make a stacked bar graph using vbar? If I am able to
do so, I may be able to create an example.

Reuben

      On Friday, September 2, 2016 at 4:43:14 PM UTC-4, Sarah Bird

wrote:

                With the

new vbar/hbar it’s goi ng to
be pretty str aight
forward , the
trick will be getting your data in the right shape.

http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar

Unfortunately it looks
like we don’t have any examples
showing this off. This would be
a very good addition to the examples
and docs so I 've
made an issue: https://github.com/bokeh/bokeh/issues/5083

On 9/2/16 1:33 PM, Reuben Jacobs wrote:

              Does anyone have an example or knows

where an example exists of making a stacked bar chart
in bokeh without using the charts API (Bar)

–
Sarah Bird
Developer, Bokeh

              [ ![Continuum
                  Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

  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/29ea38db-587c-4465-86a7-6113f7d7c027%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ea38db-587c-4465-86a7-6113f7d7c027%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).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
5

It appears that the example you have at http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar is actually blank and not plotting anything

···

On Friday, September 2, 2016 at 5:44:30 PM UTC-4, Sarah Bird wrote:

      Yes, vbar is in

0.12.1 (the hit testing only came in 0.12.2 - available in dev builds)

On 9/2/16 1:51 PM, Reuben Jacobs wrote:

Sarah,

      Is this vbar functionality released in 0.12.1? Can I

currently make a stacked bar graph using vbar? If I am able to
do so, I may be able to create an example.

Reuben

      On Friday, September 2, 2016 at 4:43:14 PM UTC-4, Sarah Bird > > wrote:

                With the

new vbar/hbar it’s goi ng to
be pretty str aight
forward , the
trick will be getting your data in the right shape.

http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar

Unfortunately it looks
like we don’t have any examples
showing this off. This would be
a very good addition to the examples
and docs so I 've
made an issue: https://github.com/bokeh/bokeh/issues/5083

On 9/2/16 1:33 PM, Reuben Jacobs wrote:

              Does anyone have an example or knows

where an example exists of making a stacked bar chart
in bokeh without using the charts API (Bar)

–
Sarah Bird
Developer, Bokeh

              [ <img alt="Continuum
                  Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px"> ](http://continuum.io)

–

  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/29ea38db-587c-4465-86a7-6113f7d7c027%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ea38db-587c-4465-86a7-6113f7d7c027%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).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)
6

Fixed in master and recent dev builds:

  http://bokeh.pydata.org/en/dev/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar

Thanks,

Bryan

···

On Sep 5, 2016, at 10:18 AM, Reuben Jacobs <[email protected]> wrote:

It appears that the example you have at bokeh.plotting — Bokeh 3.3.2 Documentation is actually blank and not plotting anything

On Friday, September 2, 2016 at 5:44:30 PM UTC-4, Sarah Bird wrote:
Yes, vbar is in 0.12.1 (the hit testing only came in 0.12.2 - available in dev builds)

On 9/2/16 1:51 PM, Reuben Jacobs wrote:

Sarah,

Is this vbar functionality released in 0.12.1? Can I currently make a stacked bar graph using vbar? If I am able to do so, I may be able to create an example.

Reuben

On Friday, September 2, 2016 at 4:43:14 PM UTC-4, Sarah Bird wrote:
With the new vbar/hbar it's going to be pretty straight forward, the trick will be getting your data in the right shape.

bokeh.plotting — Bokeh 3.3.2 Documentation

Unfortunately it looks like we don't have any examples showing this off. This would be a very good addition to the examples and docs so I've made an issue: Add example using hbar/vbar to make bar charts · Issue #5083 · bokeh/bokeh · GitHub

On 9/2/16 1:33 PM, Reuben Jacobs wrote:

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

--
Sarah Bird
Developer, Bokeh

--
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/29ea38db-587c-4465-86a7-6113f7d7c027%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
Sarah Bird
Developer, Bokeh

--
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/41af4f26-2ecd-4dfb-a99f-77d049d1599b%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

7

Great. Thanks Bryan. After playing around with vbar a little is it possible to stack bars as follows:

fig.vbar(x=‘Week of’, bottom=0, top=‘1. Created – Sent to Lab’, width=50, color=‘STEELBLUE’, source=source)

fig.vbar(x=‘Week of’, bottom=‘1. Created – Sent to Lab’, top=‘2. Sent to Lab – Plate Assignment’, width=50, color=‘FORESTGREEN’, source=source)

``

Let’s assume the data looks a little something like this:

Week of

``

···

On Friday, September 2, 2016 at 4:33:42 PM UTC-4, Reuben Jacobs wrote:

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

8

Sorry. The data looks like:

Week of 1. Created – Sent to Lab 2. Sent to Lab – Plate Assignment

jun-15 30 15

jul-5 20 30

and so on. Do i need to add a fourth column that is the summation of these two existing data columns for the stacking to work?

···

On Monday, September 5, 2016 at 12:17:47 PM UTC-4, Reuben Jacobs wrote:

Great. Thanks Bryan. After playing around with vbar a little is it possible to stack bars as follows:

fig.vbar(x=‘Week of’, bottom=0, top=‘1. Created – Sent to Lab’, width=50, color=‘STEELBLUE’, source=source)

fig.vbar(x=‘Week of’, bottom=‘1. Created – Sent to Lab’, top=‘2. Sent to Lab – Plate Assignment’, width=50, color=‘FORESTGREEN’, source=source)

``

Let’s assume the data looks a little something like this:

Week of

``

On Friday, September 2, 2016 at 4:33:42 PM UTC-4, Reuben Jacobs wrote:

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

9

Hi Reuben, yes you will need to compute the stacked coordinates yourself (we could/should probably add some convenience functions to help do this, ideas welcome) and then put those coordinates in a ColumnDataSource. This is a little more work but the upshot is that a bar chart made this way with bokeh.plotting can be much more effectively "updated in place" if that is something a user needs to do.

Thanks,

Bryan

···

On Sep 5, 2016, at 11:19 AM, Reuben Jacobs <[email protected]> wrote:

Sorry. The data looks like:

Week of 1. Created – Sent to Lab 2. Sent to Lab – Plate Assignment
jun-15 30 15
jul-5 20 30

and so on. Do i need to add a fourth column that is the summation of these two existing data columns for the stacking to work?

On Monday, September 5, 2016 at 12:17:47 PM UTC-4, Reuben Jacobs wrote:
Great. Thanks Bryan. After playing around with vbar a little is it possible to stack bars as follows:

fig.vbar(x='Week of', bottom=0, top='1. Created – Sent to Lab', width=50, color='STEELBLUE', source=source)
fig.vbar(x='Week of', bottom='1. Created – Sent to Lab', top='2. Sent to Lab – Plate Assignment', width=50, color='FORESTGREEN', source=source)

Let's assume the data looks a little something like this:

Week of

On Friday, September 2, 2016 at 4:33:42 PM UTC-4, Reuben Jacobs wrote:
Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

--
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/101e5f2f-0f4e-466c-ae86-97a244618d65%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

10

I wrote something similar recently at work, making an app with a click button which refreshed a stacked bar chart. Unfortunately I can’t put the whole working app up (as the clients want it closed), but here are the pieces to go from a list of (in my case 4) absolute values, to a stacked column, at a specified left and right location, starting from 0 on the y axis.

Hope it helps!

python
import pandas as pd

from bokeh.plotting import figure

from bokeh.charts.attributes import cat, color

from bokeh.models import ColumnDataSource

def stack_values(values):
“”“Go from absoloute values, to a stacked series.”“”
tmp = 0
quad_top_values =
quad_bottom_values =
for x in values:
quad_bottom_values.append(tmp)
tmp += x
quad_top_values.append(tmp)
return quad_top_values, quad_bottom_values

def gen_stack_glyphs(values, left=0, right=1):
“”" Add one stack at a time to the plot canvas (where one stack = 4
scenarios of one paramaeter)
“”"
top_values, bottom_values = stack_values(values=values)
left = [left] * 4
right = [right] * 4
color = [“#01DF01”, “#0101DF”, “#FF0000”, “#9900CC”]
return pd.DataFrame({‘left’: left, ‘right’: right,
‘top’: top_values, ‘bottom’: bottom_values,
‘color’: color})

Establish the plot data sources: the contents of which is what will be updated by the widgets

They are constructed column-wise so that new columns may be easily added.

source_total_costs = ColumnDataSource(gen_stack_glyphs(values=[0, 0, 0, 0], left=0.6, right=1.4))
source_equip_costs = ColumnDataSource(gen_stack_glyphs(values=[0, 0, 0, 0], left=1.6, right=2.4))

Add empty sources to the figure

px_range_labels = [“total cost”, “equipment cost”]
px = figure(width=400, height=400, x_range=px_range_labels, title=“Cost ($)”)

px.quad(top=“top”, bottom=“bottom”, left=“left”,
right=“right”, color=‘color’, source=source_total_costs)

px.quad(top=“top”, bottom=“bottom”, left=“left”,
right=“right”, color=‘color’, source=source_equip_costs)

At this point i set up some widgets tied to variables, but the important thing is, that on action,

the data in the individual sources updates…eg:

source_total_costs.data = dict(gen_stack_glyphs(values=tmp_total_costs,

                               left=0.6, right=1.4))

source_equip_costs.data = dict(gen_stack_glyphs(values=tmp_equip_costs,
left=1.6, right=2.4))

``

···

On Monday, 5 September 2016 19:58:13 UTC+1, Bryan Van de ven wrote:

Hi Reuben, yes you will need to compute the stacked coordinates yourself (we could/should probably add some convenience functions to help do this, ideas welcome) and then put those coordinates in a ColumnDataSource. This is a little more work but the upshot is that a bar chart made this way with bokeh.plotting can be much more effectively “updated in place” if that is something a user needs to do.

Thanks,

Bryan

On Sep 5, 2016, at 11:19 AM, Reuben Jacobs [email protected] wrote:

Sorry. The data looks like:

Week of 1. Created – Sent to Lab 2. Sent to Lab – Plate Assignment

jun-15 30 15

jul-5 20 30

and so on. Do i need to add a fourth column that is the summation of these two existing data columns for the stacking to work?

On Monday, September 5, 2016 at 12:17:47 PM UTC-4, Reuben Jacobs wrote:

Great. Thanks Bryan. After playing around with vbar a little is it possible to stack bars as follows:

fig.vbar(x=‘Week of’, bottom=0, top=‘1. Created – Sent to Lab’, width=50, color=‘STEELBLUE’, source=source)

fig.vbar(x=‘Week of’, bottom=‘1. Created – Sent to Lab’, top=‘2. Sent to Lab – Plate Assignment’, width=50, color=‘FORESTGREEN’, source=source)

Let’s assume the data looks a little something like this:

Week of

On Friday, September 2, 2016 at 4:33:42 PM UTC-4, Reuben Jacobs wrote:

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

–
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/101e5f2f-0f4e-466c-ae86-97a244618d65%40continuum.io.

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

11

Ben,

Thank you. This definitely gives me some ideas, I don’t quite follow you’re stacking procedure. Any chance you could explain a bit more why you did it like that?

Thanks,

Reuben

···

On Tuesday, September 6, 2016 at 3:46:59 AM UTC-4, Benjamin Laken wrote:

I wrote something similar recently at work, making an app with a click button which refreshed a stacked bar chart. Unfortunately I can’t put the whole working app up (as the clients want it closed), but here are the pieces to go from a list of (in my case 4) absolute values, to a stacked column, at a specified left and right location, starting from 0 on the y axis.

Hope it helps!

python
import pandas as pd

from bokeh.plotting import figure

from bokeh.charts.attributes import cat, color

from bokeh.models import ColumnDataSource

def stack_values(values):
“”“Go from absoloute values, to a stacked series.”“”
tmp = 0
quad_top_values =
quad_bottom_values =
for x in values:
quad_bottom_values.append(tmp)
tmp += x
quad_top_values.append(tmp)
return quad_top_values, quad_bottom_values

def gen_stack_glyphs(values, left=0, right=1):
“”" Add one stack at a time to the plot canvas (where one stack = 4
scenarios of one paramaeter)
“”"
top_values, bottom_values = stack_values(values=values)
left = [left] * 4
right = [right] * 4
color = [“#01DF01”, “#0101DF”, “#FF0000”, “#9900CC”]
return pd.DataFrame({‘left’: left, ‘right’: right,
‘top’: top_values, ‘bottom’: bottom_values,
‘color’: color})

Establish the plot data sources: the contents of which is what will be updated by the widgets

They are constructed column-wise so that new columns may be easily added.

source_total_costs = ColumnDataSource(gen_stack_glyphs(values=[0, 0, 0, 0], left=0.6, right=1.4))
source_equip_costs = ColumnDataSource(gen_stack_glyphs(values=[0, 0, 0, 0], left=1.6, right=2.4))

Add empty sources to the figure

px_range_labels = [“total cost”, “equipment cost”]
px = figure(width=400, height=400, x_range=px_range_labels, title=“Cost ($)”)

px.quad(top=“top”, bottom=“bottom”, left=“left”,
right=“right”, color=‘color’, source=source_total_costs)

px.quad(top=“top”, bottom=“bottom”, left=“left”,
right=“right”, color=‘color’, source=source_equip_costs)

At this point i set up some widgets tied to variables, but the important thing is, that on action,

the data in the individual sources updates…eg:

source_total_costs.data = dict(gen_stack_glyphs(values=tmp_total_costs,

                               left=0.6, right=1.4))

source_equip_costs.data = dict(gen_stack_glyphs(values=tmp_equip_costs,
left=1.6, right=2.4))

``

On Monday, 5 September 2016 19:58:13 UTC+1, Bryan Van de ven wrote:

Hi Reuben, yes you will need to compute the stacked coordinates yourself (we could/should probably add some convenience functions to help do this, ideas welcome) and then put those coordinates in a ColumnDataSource. This is a little more work but the upshot is that a bar chart made this way with bokeh.plotting can be much more effectively “updated in place” if that is something a user needs to do.

Thanks,

Bryan

On Sep 5, 2016, at 11:19 AM, Reuben Jacobs [email protected] wrote:

Sorry. The data looks like:

Week of 1. Created – Sent to Lab 2. Sent to Lab – Plate Assignment

jun-15 30 15

jul-5 20 30

and so on. Do i need to add a fourth column that is the summation of these two existing data columns for the stacking to work?

On Monday, September 5, 2016 at 12:17:47 PM UTC-4, Reuben Jacobs wrote:

Great. Thanks Bryan. After playing around with vbar a little is it possible to stack bars as follows:

fig.vbar(x=‘Week of’, bottom=0, top=‘1. Created – Sent to Lab’, width=50, color=‘STEELBLUE’, source=source)

fig.vbar(x=‘Week of’, bottom=‘1. Created – Sent to Lab’, top=‘2. Sent to Lab – Plate Assignment’, width=50, color=‘FORESTGREEN’, source=source)

Let’s assume the data looks a little something like this:

Week of

On Friday, September 2, 2016 at 4:33:42 PM UTC-4, Reuben Jacobs wrote:

Does anyone have an example or knows where an example exists of making a stacked bar chart in bokeh without using the charts API (Bar)

–
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/101e5f2f-0f4e-466c-ae86-97a244618d65%40continuum.io.

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

12

Well it was quite hacky, but I had a couple of days to produce a web app for a client who wanted to see cumulative costs from some process. Each stack (column of quad glyphs) is meant to represent a cumulative cost. So they need to start at zero, and end at the accumulated cost (on the y-axis).

I wanted to give the four values to a function (gen_stack_glyphs) and get back a data frame I could use as a dictionary to update the source.data with. The dictionary would need to have lists (of n = 4) values for the top, bottom, left, right and colour values for each of the four glyphs. I wanted to fix each columns left and right position (so they would appear as a column, and only have their vertical (top, bottom) locations vary.

So I needed some function to create two different lists of four numbers for the top and bottom of the glyphs, and feed all my data into a dictionary, where the inputs are essentially just the four prices.

e.g: Getting the top and bottom locations of the glyphs from four values:

inputs_to_stack1 = mystery_function(mystery_inputs)
print(inputs_to_stack1)
[1,1,1,1] # say all the values are one for simplicity
tops, bottoms = stack_values(values=inputs_to_stack1)
print(tops)
[1,2,3,4]
print(bottoms)
[0,1,2,3]

``

This was used by the gen_stack_glyph function. As I set-up the plotting stuff to work in an app with a button click, I only needed to update the source data on a click event like so to have the glyphs change on canvas. (Note, I wanted to fix the left and right locations, passing them as variables at the start. They end up being a list in the dict object (e.g. source.data[left] = [0.6, 0.6, 0.6, 0.6].

source.data = dict(gen_stack_glyphs(values=tmp_total_costs, left=0.6, right=1.4))

``

13

Thanks for the help Ben. I got it working. Definitely built some ideas after reading you code. Now I am trying to figure out how to get different hovers tooltips on each stack.

···

On Tuesday, September 6, 2016 at 10:45:05 AM UTC-4, Benjamin Laken wrote:

Well it was quite hacky, but I had a couple of days to produce a web app for a client who wanted to see cumulative costs from some process. Each stack (column of quad glyphs) is meant to represent a cumulative cost. So they need to start at zero, and end at the accumulated cost (on the y-axis).

I wanted to give the four values to a function (gen_stack_glyphs) and get back a data frame I could use as a dictionary to update the source.data with. The dictionary would need to have lists (of n = 4) values for the top, bottom, left, right and colour values for each of the four glyphs. I wanted to fix each columns left and right position (so they would appear as a column, and only have their vertical (top, bottom) locations vary.

So I needed some function to create two different lists of four numbers for the top and bottom of the glyphs, and feed all my data into a dictionary, where the inputs are essentially just the four prices.

e.g: Getting the top and bottom locations of the glyphs from four values:

inputs_to_stack1 = mystery_function(mystery_inputs)
print(inputs_to_stack1)
[1,1,1,1] # say all the values are one for simplicity
tops, bottoms = stack_values(values=inputs_to_stack1)
print(tops)
[1,2,3,4]
print(bottoms)
[0,1,2,3]

``

This was used by the gen_stack_glyph function. As I set-up the plotting stuff to work in an app with a button click, I only needed to update the source data on a click event like so to have the glyphs change on canvas. (Note, I wanted to fix the left and right locations, passing them as variables at the start. They end up being a list in the dict object (e.g. source.data[left] = [0.6, 0.6, 0.6, 0.6].

source.data = dict(gen_stack_glyphs(values=tmp_total_costs, left=0.6, right=1.4))

``

14

For different hover tooltips on each stack take a look at

Specifically:

p.add_tools(HoverTool(tooltips=None, renderers=[cr], mode=‘hline’))

  In this example, the hover was only added to the circle renderer.

This example sets tooltips to None but you can set it to whatever.
Then you can add a second HoverTool with different tooltips for
the other stack.

This example shows that (but using the models interface):

HTH

···

https://github.com/bokeh/bokeh/blob/09592677bf281350acf3ba3e9ebb7908110fb9b4/examples/plotting/file/hover_glyph.pyhttps://github.com/bokeh/bokeh/blob/master/examples/models/data_tables.py
On 9/6/16 1:37 PM, Reuben Jacobs wrote:

    Thanks for the help Ben. I got it working.

Definitely built some ideas after reading you code. Now I am
trying to figure out how to get different hovers tooltips on
each stack.

    On Tuesday, September 6, 2016 at 10:45:05 AM UTC-4, Benjamin

Laken wrote:

        Well it was quite hacky, but I had a couple of

days to produce a web app for a client who wanted to see
cumulative costs from some process. Each stack (column of
quad glyphs) is meant to represent a cumulative cost. So
they need to start at zero, and end at the accumulated cost
(on the y-axis).

          I wanted to give the four values to a function

(gen_stack_glyphs) and get back a data frame I could use
as a dictionary to update the source.data with. The
dictionary would need to have lists (of n = 4) values for
the top, bottom, left, right and colour values for each of
the four glyphs. I wanted to fix each columns left and
right position (so they would appear as a column, and only
have their vertical (top, bottom) locations vary.

          So I needed some function to create two different lists

of four numbers for the top and bottom of the glyphs, and
feed all my data into a dictionary, where the inputs are
essentially just the four prices.

            e.g: Getting the top and bottom locations of the

glyphs from four values:

inputs_to_stack1 = mystery_function(mystery_inputs)

                  >>>print(inputs_to_stack1)

                  [1,1,1,1]                          # say all the values are one

for simplicity

                  >>>tops, bottoms = stack_values(values=inputs_to_stack1)

                  >>>print(tops)

                  [1,2,3,4]

                  >>>print(bottoms)

                  [0,1,2,3]

``

          This was used by the gen_stack_glyph function. As I

set-up the plotting stuff to work in an app with a button
click, I only needed to update the source data on a click
event like so to have the glyphs change on canvas. (Note,
I wanted to fix the left and right locations, passing them
as variables at the start. They end up being a list in the
dict object (e.g. source.data[left] = [0.6, 0.6, 0.6,
0.6].

source.data = dict(gen_stack_glyphs(values=tmp_total_costs, left=0.6,
right=1.4))

``

–

  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/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%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).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
15

Hi Sarah,

This is great! Thank you. I tried to implement the solution like in the first example you gave and I am receiving the error

‘GlyphRenderer’ object has no attribute ‘add_tools’

``

I am using the plotting.figure.vbar() methods instead of the plotting.figure.circle() method but shouldn’t they both work?

···

On Tuesday, September 6, 2016 at 9:43:58 PM UTC-4, Sarah Bird wrote:

For different hover tooltips on each stack take a look at
https://github.com/bokeh/bokeh/blob/09592677bf281350acf3ba3e9ebb7908110fb9b4/examples/plotting/file/hover_glyph.py

Specifically:

p.add_tools(HoverTool(tooltips=None, renderers=[cr], mode=‘hline’))

  In this example, the hover was only added to the circle renderer.

This example sets tooltips to None but you can set it to whatever.
Then you can add a second HoverTool with different tooltips for
the other stack.

This example shows that (but using the models interface):
https://github.com/bokeh/bokeh/blob/master/examples/models/data_tables.py

HTH

On 9/6/16 1:37 PM, Reuben Jacobs wrote:

    Thanks for the help Ben. I got it working.

Definitely built some ideas after reading you code. Now I am
trying to figure out how to get different hovers tooltips on
each stack.

    On Tuesday, September 6, 2016 at 10:45:05 AM UTC-4, Benjamin > > Laken wrote:

        Well it was quite hacky, but I had a couple of

days to produce a web app for a client who wanted to see
cumulative costs from some process. Each stack (column of
quad glyphs) is meant to represent a cumulative cost. So
they need to start at zero, and end at the accumulated cost
(on the y-axis).

          I wanted to give the four values to a function

(gen_stack_glyphs) and get back a data frame I could use
as a dictionary to update the source.data with. The
dictionary would need to have lists (of n = 4) values for
the top, bottom, left, right and colour values for each of
the four glyphs. I wanted to fix each columns left and
right position (so they would appear as a column, and only
have their vertical (top, bottom) locations vary.

          So I needed some function to create two different lists

of four numbers for the top and bottom of the glyphs, and
feed all my data into a dictionary, where the inputs are
essentially just the four prices.

            e.g: Getting the top and bottom locations of the

glyphs from four values:

inputs_to_stack1 = mystery_function(mystery_inputs)

                  >>>print(inputs_to_stack1)

                  [1,1,1,1]                          # say all the values are one

for simplicity

                  >>>tops, bottoms = stack_values(values=inputs_to_stack1)

                  >>>print(tops)

                  [1,2,3,4]

                  >>>print(bottoms)

                  [0,1,2,3]

``

          This was used by the gen_stack_glyph function. As I

set-up the plotting stuff to work in an app with a button
click, I only needed to update the source data on a click
event like so to have the glyphs change on canvas. (Note,
I wanted to fix the left and right locations, passing them
as variables at the start. They end up being a list in the
dict object (e.g. source.data[left] = [0.6, 0.6, 0.6,
0.6].

source.data = dict(gen_stack_glyphs(values=tmp_total_costs, left=0.6,
right=1.4))

``

–

  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/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%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).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)
16

Nevermind! Silly me was adding the hovertool to the vbars by accident not the plot. It works great now! thank you!!

···

On Wednesday, September 7, 2016 at 9:48:36 AM UTC-4, Reuben Jacobs wrote:

Hi Sarah,

This is great! Thank you. I tried to implement the solution like in the first example you gave and I am receiving the error

‘GlyphRenderer’ object has no attribute ‘add_tools’

``

I am using the plotting.figure.vbar() methods instead of the plotting.figure.circle() method but shouldn’t they both work?

On Tuesday, September 6, 2016 at 9:43:58 PM UTC-4, Sarah Bird wrote:

For different hover tooltips on each stack take a look at
https://github.com/bokeh/bokeh/blob/09592677bf281350acf3ba3e9ebb7908110fb9b4/examples/plotting/file/hover_glyph.py

Specifically:

p.add_tools(HoverTool(tooltips=None, renderers=[cr], mode=‘hline’))

  In this example, the hover was only added to the circle renderer.

This example sets tooltips to None but you can set it to whatever.
Then you can add a second HoverTool with different tooltips for
the other stack.

This example shows that (but using the models interface):
https://github.com/bokeh/bokeh/blob/master/examples/models/data_tables.py

HTH

On 9/6/16 1:37 PM, Reuben Jacobs wrote:

    Thanks for the help Ben. I got it working.

Definitely built some ideas after reading you code. Now I am
trying to figure out how to get different hovers tooltips on
each stack.

    On Tuesday, September 6, 2016 at 10:45:05 AM UTC-4, Benjamin > > > Laken wrote:

        Well it was quite hacky, but I had a couple of

days to produce a web app for a client who wanted to see
cumulative costs from some process. Each stack (column of
quad glyphs) is meant to represent a cumulative cost. So
they need to start at zero, and end at the accumulated cost
(on the y-axis).

          I wanted to give the four values to a function

(gen_stack_glyphs) and get back a data frame I could use
as a dictionary to update the source.data with. The
dictionary would need to have lists (of n = 4) values for
the top, bottom, left, right and colour values for each of
the four glyphs. I wanted to fix each columns left and
right position (so they would appear as a column, and only
have their vertical (top, bottom) locations vary.

          So I needed some function to create two different lists

of four numbers for the top and bottom of the glyphs, and
feed all my data into a dictionary, where the inputs are
essentially just the four prices.

            e.g: Getting the top and bottom locations of the

glyphs from four values:

inputs_to_stack1 = mystery_function(mystery_inputs)

                  >>>print(inputs_to_stack1)

                  [1,1,1,1]                          # say all the values are one

for simplicity

                  >>>tops, bottoms = stack_values(values=inputs_to_stack1)

                  >>>print(tops)

                  [1,2,3,4]

                  >>>print(bottoms)

                  [0,1,2,3]

``

          This was used by the gen_stack_glyph function. As I

set-up the plotting stuff to work in an app with a button
click, I only needed to update the source data on a click
event like so to have the glyphs change on canvas. (Note,
I wanted to fix the left and right locations, passing them
as variables at the start. They end up being a list in the
dict object (e.g. source.data[left] = [0.6, 0.6, 0.6,
0.6].

source.data = dict(gen_stack_glyphs(values=tmp_total_costs, left=0.6,
right=1.4))

``

–

  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/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/56f458ad-8ac7-4e48-b11d-8df7cd33e12f%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).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)