Bokeh, Flask, and Bootstrap

Hi,

I’m working on a project where I use Flask to show some visualizations that I’ve created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don’t coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn’t seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I’m now a little frustrated and feel like I’ve iterated so much, I’m just not sure how to troubleshoot. So, here is the basic code.

plot code:

def build_plot(df_total, df_stations):

    hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                 tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                 color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

    output_file('heatmap.html', title='Listening Times')

    bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                                PanTool(), PreviewSaveTool(),
                                                                                ResetTool()], legend=True,
             responsive=True, plot_width=1500, plot_height=750)
    bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

    p = gridplot([[hm], [bp]])

    return components(p)

The plot_width and plot_height are absolutely not having an impact, so that’s why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:

@app.route(’/index’)

``

def index():
    '''
    '''

    return render_template('index.html')

@app.route('/call_db', methods=['POST'])
def get_data():

    df_total, df_stations = total_interactions(request.form['text'])
    if isinstance(df_stations, basestring):
        return render_template('index.html', error_msg= request.form['text'] + " has no data")
    plot_script, plot_div = build_plot(df_total, df_stations)
    return render_template('index.html', plot_div = plot_div, plot_script=plot_script)

This works as expected.

relevant html code:

``` {% if plot_script %} {{ plot_script|safe }} {% endif %} {% block head %} {% block title %} Stuff {% endblock %} {% endblock %}
Thumbnail   
                <div class="brand">
                  <h3
                    style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                    title="SUV Tool">SUV Tool</h3>

                </div>
            </div>
            <div class="col-md-9 col-sm-7">
            </div>
        </div>
     <div class="row" id="main">
        <div class="col-sm-5 col-md-3">
                <div class="row">
                    <form id="id_entry" action="/call_db" method="POST">
                      <div class="form-group">
                        <label for="idinput">ID</label>
                        <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                      </div>
                      <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                    </form>
                           {% if error_msg %}
                                {{ error_msg|safe }}
                            {% endif %}
                </div>
                <div class="row">
                </div>
             </div>

        <div class="col-sm-7 col-md-9" id="charts">
                            {% if plot_div %}
                                {{ plot_div|safe }}
                            {% endif %}
              </div>
            </div>
</div>

``

css:

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

.btn-secondary {
  background-color: #800000;
  color: black;
}

.container-fluid {
  width: 100%;
  min-height: 100%;
  height: 100% !important;
}

.row{
    overflow: hidden;
    padding-left:15px;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#main {
    height:100%;
  }

}

``

The row CSS is just one in my latest attempts to get the everything to size properly. I’ve gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don’t know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it’s better than pulling my hair out. Thanks in advance.

Hi Lya,

Quick possible suggestions:

* I think there was a big in the last release related to min_border. For now try setting the values for each side, e.g. min_border_top, min_border_left, etc. individually.

* You have set responsive=True is this intentional? That setting specifically means that plot_width and plot_height are not really useful, it says the plot should attempt to size based on its parent. If you are trying to get a fixed size with plot_width and plot_height, I would suggest not setting responsive=True on your charts. If you are trying to get responsive plots, perhaps there is some interaction with Bootstrap specifically. As a baseline, does this example work as expected for you:

  https://github.com/bokeh/bokeh/blob/0.11.1/examples/embed/embed_multiple_responsive.py

Thanks,

Bryan

···

On Jun 10, 2016, at 7:29 AM, Lya Batlle <[email protected]> wrote:

Hi,

   I'm working on a project where I use Flask to show some visualizations that I've created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don't coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

   After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn't seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I'm now a little frustrated and feel like I've iterated so much, I'm just not sure how to troubleshoot. So, here is the basic code.

plot code:
def build_plot(df_total, df_stations):

    hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                 tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                 color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

    output_file('heatmap.html', title='Listening Times')

    bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                                PanTool(), PreviewSaveTool(),
                                                                                ResetTool()], legend=True,
             responsive=True, plot_width=1500, plot_height=750)
    bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

    p = gridplot([[hm], [bp]])

    return components(p)
The plot_width and plot_height are absolutely not having an impact, so that's why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:
@app.route('/index')
def index():
    '''
    '''

    return render_template('index.html')

@app.route('/call_db', methods=['POST'])
def get_data():

    df_total, df_stations = total_interactions(request.form['text'])
    if isinstance(df_stations, basestring):
        return render_template('index.html', error_msg= request.form['text'] + " has no data")
    plot_script, plot_div = build_plot(df_total, df_stations)
    return render_template('index.html', plot_div = plot_div, plot_script=plot_script)
This works as expected.

relevant html code:
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='../static/images/bertini.ico') }}">
     {% if plot_script %}
         {{ plot_script|safe }}
      {% endif %}
{% block head %}
<title>{% block title %} Stuff {% endblock %}</title> {% endblock %}
</head>

<body onload="STUFF.documentReady();">
   <!-- <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div> -->
   <div class="container-fluid">
            <div class="row" id="header">
               <div class="col-sm-5 col-md-3">
                    <div class="navbar-header">
                      <a href="/"><img src="../static/images/bertini.png"
                        alt="Thumbnail" width="50" height="50" title="Stuff"></a>
                      &nbsp;&nbsp;
                    </div>

                    <div class="brand">
                      <h3
                        style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                        title="SUV Tool">SUV Tool</h3>

                    </div>
                </div>
                <div class="col-md-9 col-sm-7">
                </div>
            </div>
         <div class="row" id="main">
            <div class="col-sm-5 col-md-3">
                    <div class="row">
                        <form id="id_entry" action="/call_db" method="POST">
                          <div class="form-group">
                            <label for="idinput">ID</label>
                            <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                          </div>
                          <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                        </form>
                               {% if error_msg %}
                                    {{ error_msg|safe }}
                                {% endif %}
                    </div>
                    <div class="row">
                    </div>
                 </div>

            <div class="col-sm-7 col-md-9" id="charts">
                                {% if plot_div %}
                                    {{ plot_div|safe }}
                                {% endif %}
                  </div>
                </div>
    </div>

</body>

css:
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

.btn-secondary {
  background-color: #800000;
  color: black;
}

.container-fluid {
  width: 100%;
  min-height: 100%;
  height: 100% !important;
}

.row{
    overflow: hidden;
    padding-left:15px;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#main {
    height:100%;
  }

}

The row CSS is just one in my latest attempts to get the everything to size properly. I've gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don't know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it's better than pulling my hair out. Thanks in advance.

--
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/3d35c66e-7b3d-4d7e-afcf-7d086bd23007%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Bryan,

Thanks, I’ll take a look at the example and respond back. I really do want a responsive chart, but when I take away the width and height, I get a plot so tiny that I can’t even click on it. So, I started to put large numbers in, which seem to at least make the plot slightly bigger so that I can manually resize with the tool.

I’ll try the border trick and look at the example.

Thanks,

Lya

···

On Friday, June 10, 2016 at 8:29:19 AM UTC-4, Lya Batlle wrote:

Hi,

I’m working on a project where I use Flask to show some visualizations that I’ve created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don’t coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn’t seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I’m now a little frustrated and feel like I’ve iterated so much, I’m just not sure how to troubleshoot. So, here is the basic code.

plot code:

def build_plot(df_total, df_stations):

    hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                 tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                 color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

    output_file('heatmap.html', title='Listening Times')

    bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                                PanTool(), PreviewSaveTool(),
                                                                                ResetTool()], legend=True,
             responsive=True, plot_width=1500, plot_height=750)
    bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

    p = gridplot([[hm], [bp]])

    return components(p)

The plot_width and plot_height are absolutely not having an impact, so that’s why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:

@app.route(’/index’)

``

def index():
    '''
    '''

    return render_template('index.html')


@app.route('/call_db', methods=['POST'])
def get_data():

    df_total, df_stations = total_interactions(request.form['text'])
    if isinstance(df_stations, basestring):
        return render_template('index.html', error_msg= request.form['text'] + " has no data")
    plot_script, plot_div = build_plot(df_total, df_stations)
    return render_template('index.html', plot_div = plot_div, plot_script=plot_script)

This works as expected.

relevant html code:

``` {% if plot_script %} {{ plot_script|safe }} {% endif %} {% block head %} {% block title %} Stuff {% endblock %} {% endblock %}
Thumbnail   
                <div class="brand">
                  <h3
                    style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                    title="SUV Tool">SUV Tool</h3>

                </div>
            </div>
            <div class="col-md-9 col-sm-7">
            </div>
        </div>
     <div class="row" id="main">
        <div class="col-sm-5 col-md-3">
                <div class="row">
                    <form id="id_entry" action="/call_db" method="POST">
                      <div class="form-group">
                        <label for="idinput">ID</label>
                        <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                      </div>
                      <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                    </form>
                           {% if error_msg %}
                                {{ error_msg|safe }}
                            {% endif %}
                </div>
                <div class="row">
                </div>
             </div>

        <div class="col-sm-7 col-md-9" id="charts">
                            {% if plot_div %}
                                {{ plot_div|safe }}
                            {% endif %}
              </div>
            </div>
</div>

``

css:

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

.btn-secondary {
  background-color: #800000;
  color: black;
}


.container-fluid {
  width: 100%;
  min-height: 100%;
  height: 100% !important;
}

.row{
    overflow: hidden;
    padding-left:15px;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}


#main {
    height:100%;
  }


}

``

The row CSS is just one in my latest attempts to get the everything to size properly. I’ve gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don’t know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it’s better than pulling my hair out. Thanks in advance.

I changed the border and it didn’t help, so maybe I’m targeting the wrong variable. This is what I need to fix. It’s in the png attached. The space between the actual data inside of the chart and the border makes it so that if I grid a stacked bar chart below it, the x-axis don’t line up, because the stacked bar chart extends all the way to the border.

···

On Friday, June 10, 2016 at 8:29:19 AM UTC-4, Lya Batlle wrote:

Hi,

I’m working on a project where I use Flask to show some visualizations that I’ve created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don’t coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn’t seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I’m now a little frustrated and feel like I’ve iterated so much, I’m just not sure how to troubleshoot. So, here is the basic code.

plot code:

def build_plot(df_total, df_stations):

    hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                 tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                 color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

    output_file('heatmap.html', title='Listening Times')

    bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                                PanTool(), PreviewSaveTool(),
                                                                                ResetTool()], legend=True,
             responsive=True, plot_width=1500, plot_height=750)
    bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

    p = gridplot([[hm], [bp]])

    return components(p)

The plot_width and plot_height are absolutely not having an impact, so that’s why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:

@app.route(’/index’)

``

def index():
    '''
    '''

    return render_template('index.html')


@app.route('/call_db', methods=['POST'])
def get_data():

    df_total, df_stations = total_interactions(request.form['text'])
    if isinstance(df_stations, basestring):
        return render_template('index.html', error_msg= request.form['text'] + " has no data")
    plot_script, plot_div = build_plot(df_total, df_stations)
    return render_template('index.html', plot_div = plot_div, plot_script=plot_script)

This works as expected.

relevant html code:

``` {% if plot_script %} {{ plot_script|safe }} {% endif %} {% block head %} {% block title %} Stuff {% endblock %} {% endblock %}
Thumbnail   
                <div class="brand">
                  <h3
                    style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                    title="SUV Tool">SUV Tool</h3>

                </div>
            </div>
            <div class="col-md-9 col-sm-7">
            </div>
        </div>
     <div class="row" id="main">
        <div class="col-sm-5 col-md-3">
                <div class="row">
                    <form id="id_entry" action="/call_db" method="POST">
                      <div class="form-group">
                        <label for="idinput">ID</label>
                        <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                      </div>
                      <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                    </form>
                           {% if error_msg %}
                                {{ error_msg|safe }}
                            {% endif %}
                </div>
                <div class="row">
                </div>
             </div>

        <div class="col-sm-7 col-md-9" id="charts">
                            {% if plot_div %}
                                {{ plot_div|safe }}
                            {% endif %}
              </div>
            </div>
</div>

``

css:

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

.btn-secondary {
  background-color: #800000;
  color: black;
}


.container-fluid {
  width: 100%;
  min-height: 100%;
  height: 100% !important;
}

.row{
    overflow: hidden;
    padding-left:15px;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}


#main {
    height:100%;
  }


}

``

The row CSS is just one in my latest attempts to get the everything to size properly. I’ve gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don’t know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it’s better than pulling my hair out. Thanks in advance.

Oh I mis-understood the situation. That looks like the x and y ranges are not not getting set to good values (they are larger than you'd like, or should be). I am in transit at the moment but will try to add more later.

Bryan

···

On Jun 10, 2016, at 8:55 AM, Lya Batlle <[email protected]> wrote:

I changed the border and it didn't help, so maybe I'm targeting the wrong variable. This is what I need to fix. It's in the png attached. The space between the actual data inside of the chart and the border makes it so that if I grid a stacked bar chart below it, the x-axis don't line up, because the stacked bar chart extends all the way to the border.

On Friday, June 10, 2016 at 8:29:19 AM UTC-4, Lya Batlle wrote:
Hi,

   I'm working on a project where I use Flask to show some visualizations that I've created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don't coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

   After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn't seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I'm now a little frustrated and feel like I've iterated so much, I'm just not sure how to troubleshoot. So, here is the basic code.

plot code:
def build_plot(df_total, df_stations):

    hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                 tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                 color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

    output_file('heatmap.html', title='Listening Times')

    bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                                PanTool(), PreviewSaveTool(),
                                                                                ResetTool()], legend=True,
             responsive=True, plot_width=1500, plot_height=750)
    bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

    p = gridplot([[hm], [bp]])

    return components(p)
The plot_width and plot_height are absolutely not having an impact, so that's why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:
@app.route('/index')
def index():
    '''
    '''

    return render_template('index.html')

@app.route('/call_db', methods=['POST'])
def get_data():

    df_total, df_stations = total_interactions(request.form['text'])
    if isinstance(df_stations, basestring):
        return render_template('index.html', error_msg= request.form['text'] + " has no data")
    plot_script, plot_div = build_plot(df_total, df_stations)
    return render_template('index.html', plot_div = plot_div, plot_script=plot_script)
This works as expected.

relevant html code:
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='../static/images/bertini.ico') }}">
     {% if plot_script %}
         {{ plot_script|safe }}
      {% endif %}
{% block head %}
<title>{% block title %} Stuff {% endblock %}</title> {% endblock %}
</head>

<body onload="STUFF.documentReady();">
   <!-- <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div> -->
   <div class="container-fluid">
            <div class="row" id="header">
               <div class="col-sm-5 col-md-3">
                    <div class="navbar-header">
                      <a href="/"><img src="../static/images/bertini.png"
                        alt="Thumbnail" width="50" height="50" title="Stuff"></a>
                      &nbsp;&nbsp;
                    </div>

                    <div class="brand">
                      <h3
                        style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                        title="SUV Tool">SUV Tool</h3>

                    </div>
                </div>
                <div class="col-md-9 col-sm-7">
                </div>
            </div>
         <div class="row" id="main">
            <div class="col-sm-5 col-md-3">
                    <div class="row">
                        <form id="id_entry" action="/call_db" method="POST">
                          <div class="form-group">
                            <label for="idinput">ID</label>
                            <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                          </div>
                          <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                        </form>
                               {% if error_msg %}
                                    {{ error_msg|safe }}
                                {% endif %}
                    </div>
                    <div class="row">
                    </div>
                 </div>

            <div class="col-sm-7 col-md-9" id="charts">
                                {% if plot_div %}
                                    {{ plot_div|safe }}
                                {% endif %}
                  </div>
                </div>
    </div>

</body>

css:
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

.btn-secondary {
  background-color: #800000;
  color: black;
}

.container-fluid {
  width: 100%;
  min-height: 100%;
  height: 100% !important;
}

.row{
    overflow: hidden;
    padding-left:15px;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#main {
    height:100%;
  }

}

The row CSS is just one in my latest attempts to get the everything to size properly. I've gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don't know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it's better than pulling my hair out. Thanks in advance.

--
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/77978a91-7b8c-48e2-ae8d-810b1e4b05a9%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Screen Shot 2016-06-10 at 9.48.14 AM.png>

Lya,

Contrary to what I had assumed, the chart.HeatMap does not actually use a categorical Range. So I imagine it is using a DataRange1d which "auto-sizes" the range according to the data, but also by default adds a little padding. See:

  http://bokeh.pydata.org/en/latest/docs/reference/models/ranges.html#bokeh.models.ranges.DataRange1d
  https://github.com/bokeh/bokeh/blob/master/bokeh/models/ranges.py#L117

To remove this padding, set that range_padding property to zero. You can use "select" to easily get ahold of the ranges to set their properties:

  In [1]: from bokeh.models import DataRange1d

  In [2]: from bokeh.plotting import figure
  
  In [3]: p = figure()

  In [4]: p.select(type=DataRange1d)
  Out[4]: [<bokeh.models.ranges.DataRange1d at 0x108a82e48>,
           <bokeh.models.ranges.DataRange1d at 0x108d48128>]

  In [5]: p.select(type=DataRange1d).range_padding = 0

The list returned by "select" is actually a specialized list that supports setting attributes and "splatting" the setting across every object in the list.

Thanks,

Bryan

···

On Jun 10, 2016, at 8:58 AM, Bryan Van de Ven <[email protected]> wrote:

Oh I mis-understood the situation. That looks like the x and y ranges are not not getting set to good values (they are larger than you'd like, or should be). I am in transit at the moment but will try to add more later.

Bryan

On Jun 10, 2016, at 8:55 AM, Lya Batlle <[email protected]> wrote:

I changed the border and it didn't help, so maybe I'm targeting the wrong variable. This is what I need to fix. It's in the png attached. The space between the actual data inside of the chart and the border makes it so that if I grid a stacked bar chart below it, the x-axis don't line up, because the stacked bar chart extends all the way to the border.

On Friday, June 10, 2016 at 8:29:19 AM UTC-4, Lya Batlle wrote:
Hi,

  I'm working on a project where I use Flask to show some visualizations that I've created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don't coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

  After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn't seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I'm now a little frustrated and feel like I've iterated so much, I'm just not sure how to troubleshoot. So, here is the basic code.

plot code:
def build_plot(df_total, df_stations):

   hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
                tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
                color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

   output_file('heatmap.html', title='Listening Times')

   bp = Bar(df_stations, values='count', label='hod', stack='stations', tools=[ResizeTool(), HoverTool(),
                                                                               PanTool(), PreviewSaveTool(),
                                                                               ResetTool()], legend=True,
            responsive=True, plot_width=1500, plot_height=750)
   bp.select(dict(type=HoverTool)).tooltips={"station":"$stations", "hod":"$hod", "count": "$count"}

   p = gridplot([[hm], [bp]])

   return components(p)
The plot_width and plot_height are absolutely not having an impact, so that's why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:
@app.route('/index')
def index():
   '''
   '''

   return render_template('index.html')

@app.route('/call_db', methods=['POST'])
def get_data():

   df_total, df_stations = total_interactions(request.form['text'])
   if isinstance(df_stations, basestring):
       return render_template('index.html', error_msg= request.form['text'] + " has no data")
   plot_script, plot_div = build_plot(df_total, df_stations)
   return render_template('index.html', plot_div = plot_div, plot_script=plot_script)
This works as expected.

relevant html code:
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='../static/images/bertini.ico') }}">
    {% if plot_script %}
        {{ plot_script|safe }}
     {% endif %}
{% block head %}
<title>{% block title %} Stuff {% endblock %}</title> {% endblock %}
</head>

<body onload="STUFF.documentReady();">
  <!-- <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div> -->
  <div class="container-fluid">
           <div class="row" id="header">
              <div class="col-sm-5 col-md-3">
                   <div class="navbar-header">
                     <a href="/"><img src="../static/images/bertini.png"
                       alt="Thumbnail" width="50" height="50" title="Stuff"></a>
                     &nbsp;&nbsp;
                   </div>

                   <div class="brand">
                     <h3
                       style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                       title="SUV Tool">SUV Tool</h3>

                   </div>
               </div>
               <div class="col-md-9 col-sm-7">
               </div>
           </div>
        <div class="row" id="main">
           <div class="col-sm-5 col-md-3">
                   <div class="row">
                       <form id="id_entry" action="/call_db" method="POST">
                         <div class="form-group">
                           <label for="idinput">ID</label>
                           <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                         </div>
                         <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                       </form>
                              {% if error_msg %}
                                   {{ error_msg|safe }}
                               {% endif %}
                   </div>
                   <div class="row">
                   </div>
                </div>

           <div class="col-sm-7 col-md-9" id="charts">
                               {% if plot_div %}
                                   {{ plot_div|safe }}
                               {% endif %}
                 </div>
               </div>
   </div>

</body>

css:
html,
body {
   height: 100%;
   /* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
   font-size: 80%;
}

.btn-secondary {
background-color: #800000;
color: black;
}

.container-fluid {
width: 100%;
min-height: 100%;
height: 100% !important;
}

.row{
   overflow: hidden;
   padding-left:15px;
}

[class*="col-"]{
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}

#main {
   height:100%;
}

}

The row CSS is just one in my latest attempts to get the everything to size properly. I've gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don't know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it's better than pulling my hair out. Thanks in advance.

--
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/77978a91-7b8c-48e2-ae8d-810b1e4b05a9%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Screen Shot 2016-06-10 at 9.48.14 AM.png>

This worked. Thanks. For FYI, this was the change I ended up with:


#hm = HeatMap(df_total, x='hod', y='dow', values='count', stat=None, xlabel="Hour of Day", ylabel="Day of Week",
 # tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
  # color=brewer['Blues'], plot_height=500, plot_width=500, min_border_left=0, min_border_right=0)
hod_list = df_total['hod'].values
dow_list = df_total['dow'].values
count=df_total['count'].values
data={'X':hod_list, 'Y':dow_list, 'count':count}
palette_new = palette[::-1]

# colormap by hand for now, a one-liner some day
N, min, max = len(palette), count.min(), count.max()
data['color'] = []
for x in data['count']:
    ind = floor((N - 1) * (x - min) / (max - min))
    data['color'].append(palette_new[int(ind)])

source=ColumnDataSource(data)

hover_hm = HoverTool(
        tooltips = [("Day of Week", "@Y"), ("Hour of Day", "@X"), ("Count", "@count")])
hm = figure(title="Stuff", plot_height=400, plot_width=700, tools=[hover_hm, "crosshair", "pan",
            "box_zoom", "wheel_zoom", "reset", "resize", "save"])

hm.rect(x='X', y='Y', width=1, height=1, fill_color='color', line_color="white", source=source)
hm.select(type=DataRange1d).range_padding = 0

I didn’t play with the responsive settings as I just couldn’t get them to work.

···

On Saturday, June 11, 2016 at 9:24:55 AM UTC-4, Bryan Van de ven wrote:

Lya,

Contrary to what I had assumed, the chart.HeatMap does not actually use a categorical Range. So I imagine it is using a DataRange1d which “auto-sizes” the range according to the data, but also by default adds a little padding. See:

    [http://bokeh.pydata.org/en/latest/docs/reference/models/ranges.html#bokeh.models.ranges.DataRange1d](http://bokeh.pydata.org/en/latest/docs/reference/models/ranges.html#bokeh.models.ranges.DataRange1d)

    [https://github.com/bokeh/bokeh/blob/master/bokeh/models/ranges.py#L117](https://github.com/bokeh/bokeh/blob/master/bokeh/models/ranges.py#L117)

To remove this padding, set that range_padding property to zero. You can use “select” to easily get ahold of the ranges to set their properties:

    In [1]: from bokeh.models import DataRange1d


    In [2]: from bokeh.plotting import figure
    

    In [3]: p = figure()


    In [4]: p.select(type=DataRange1d)
    Out[4]: [<bokeh.models.ranges.DataRange1d at 0x108a82e48>,
             <bokeh.models.ranges.DataRange1d at 0x108d48128>]


    In [5]: p.select(type=DataRange1d).range_padding = 0

The list returned by “select” is actually a specialized list that supports setting attributes and “splatting” the setting across every object in the list.

Thanks,

Bryan

On Jun 10, 2016, at 8:58 AM, Bryan Van de Ven [email protected] wrote:

Oh I mis-understood the situation. That looks like the x and y ranges are not not getting set to good values (they are larger than you’d like, or should be). I am in transit at the moment but will try to add more later.

Bryan

On Jun 10, 2016, at 8:55 AM, Lya Batlle [email protected] wrote:

I changed the border and it didn’t help, so maybe I’m targeting the wrong variable. This is what I need to fix. It’s in the png attached. The space between the actual data inside of the chart and the border makes it so that if I grid a stacked bar chart below it, the x-axis don’t line up, because the stacked bar chart extends all the way to the border.

On Friday, June 10, 2016 at 8:29:19 AM UTC-4, Lya Batlle wrote:

Hi,

I’m working on a project where I use Flask to show some visualizations that I’ve created using a Bokeh, giving it a Pandas dataframe, to the screen. When I started, I created the charts using snippets. I noticed then that the length and width of the chart that I entered as variables did not seem to influence the size of the chart on the page, but it was a legible chart. Then I grouped two charts together with gridplot() and found that the x axis don’t coordinate. The charts are the same size, but the heatmap seems to have some kind of internal padding in its frame which makes the actual data region smaller than it should be.

After reading up a bit, I went from snippets to components because it seemed like I might have a bit more control over this padding. Then, the charts started to render as minuscule, and I couldn’t seem to get them to size themselves properly. I have tried tons of suggestions of how to make sure the height of a div in bootstrap takes up enough of a page for the charts to render, but when I did get it working (by using a lot of height: 100% values in CSS), the charts just decided to put padding around themselves and stayed the same size.

I’m now a little frustrated and feel like I’ve iterated so much, I’m just not sure how to troubleshoot. So, here is the basic code.

plot code:

def build_plot(df_total, df_stations):

hm = HeatMap(df_total, x=‘hod’, y=‘dow’, values=‘count’, stat=None, xlabel=“Hour of Day”, ylabel=“Day of Week”,

            tools=[ResizeTool(), HoverTool(), PanTool(), PreviewSaveTool(), ResetTool()], hover_text='count',
            color=brewer['Blues'], responsive=True, plot_width=1500, plot_height=750, min_border=0)

output_file(‘heatmap.html’, title=‘Listening Times’)

bp = Bar(df_stations, values=‘count’, label=‘hod’, stack=‘stations’, tools=[ResizeTool(), HoverTool(),

                                                                           PanTool(), PreviewSaveTool(),
                                                                           ResetTool()], legend=True,
        responsive=True, plot_width=1500, plot_height=750)

bp.select(dict(type=HoverTool)).tooltips={“station”:"$stations", “hod”:"$hod", “count”: “$count”}

p = gridplot([[hm], [bp]])

return components§

The plot_width and plot_height are absolutely not having an impact, so that’s why they might seem a bit big. I was testing out whether it would influence anything. This is true both in the snippet and in the components.

flask code:

@app.route(’/index’)

def index():

‘’’

‘’’

return render_template(‘index.html’)

@app.route(’/call_db’, methods=[‘POST’])

def get_data():

df_total, df_stations = total_interactions(request.form[‘text’])

if isinstance(df_stations, basestring):

   return render_template('index.html', error_msg= request.form['text'] + " has no data")

plot_script, plot_div = build_plot(df_total, df_stations)

return render_template(‘index.html’, plot_div = plot_div, plot_script=plot_script)

This works as expected.

relevant html code:

{% if plot_script %}
    {{ plot_script|safe }}
 {% endif %}

{% block head %}

{% block title %} Stuff {% endblock %} {% endblock %}
       <div class="row" id="header">
          <div class="col-sm-5 col-md-3">
               <div class="navbar-header">
                 <a href="/"><img src="../static/images/bertini.png"
                   alt="Thumbnail" width="50" height="50" title="Stuff"></a>
                 &nbsp;&nbsp;
               </div>
               <div class="brand">
                 <h3
                   style="display: inline-block; text-align: left; color: Brown; font-weight: bold;"
                   title="SUV Tool">SUV Tool</h3>
               </div>
           </div>
           <div class="col-md-9 col-sm-7">
           </div>
       </div>
    <div class="row" id="main">
       <div class="col-sm-5 col-md-3">
               <div class="row">
                   <form id="id_entry" action="/call_db" method="POST">
                     <div class="form-group">
                       <label for="idinput">ID</label>
                       <input type="text" class="form-control" name="text" id="idinput" placeholder="ID">
                     </div>
                     <button type="submit" class="btn btn-default submit-btn" value="Echo">Submit</button>
                   </form>
                          {% if error_msg %}
                               {{ error_msg|safe }}
                           {% endif %}
               </div>
               <div class="row">
               </div>
            </div>
       <div class="col-sm-7 col-md-9" id="charts">
                           {% if plot_div %}
                               {{ plot_div|safe }}
                           {% endif %}
             </div>
           </div>

css:

html,

body {

height: 100%;

/* The html and body elements cannot have any padding or margin. */

}

/* Custom page CSS

-------------------------------------------------- */

/* Not required for template or sticky footer method. */

code {

font-size: 80%;

}

.btn-secondary {

background-color: #800000;

color: black;

}

.container-fluid {

width: 100%;

min-height: 100%;

height: 100% !important;

}

.row{

overflow: hidden;

padding-left:15px;

}

[class*=“col-”]{

margin-bottom: -99999px;

padding-bottom: 99999px;

}

#main {

height:100%;

}

}

The row CSS is just one in my latest attempts to get the everything to size properly. I’ve gone through and removed things that were sending me down a rabbit hole, like making everything size 100% even in the embedded html. I have a CSS guru coming to help me this afternoon. But, I don’t know that this is necessarily CSS fixable.

That is the totality of my issue. I have no idea if anyone can help me, but it’s better than pulling my hair out. Thanks in advance.


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/77978a91-7b8c-48e2-ae8d-810b1e4b05a9%40continuum.io.

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

<Screen Shot 2016-06-10 at 9.48.14 AM.png>