2013-07-12

In this next post in the Developing with Bottle series, we'll be looking at both GET and POST requests as well as HTML forms. I'll also show you how to consume data from the plot.ly API. You'll also get to see how to create a cool graph showing the results of a cohort analysis study. (Click here if you are unfamiliar with cohort analysis.)

Click here to view part 1 if you missed it.

Basic Setup

  1. Start by downloading this Gist from Part 1, and then run it using the following command:

    $ bash bottle.sh
    

    This will create a basic project structure:

    ├── app.py
    ├── requirements.txt
    └── testenv
    
  2. Activate the virtualenv:

    $ source testenv/bin/activate
    
  3. Install the requirements:

    $ pip install -r requirements.txt
    
  4. Navigate to https://www.plot.ly/api, sign up for a new account, sign in, and then create a new API key (do NOT use mine):

    API

  5. Install plot.ly:

    $ pip install plotly
    
  6. Next update the code in app.py:

    import os
    from bottle import run, template, get, post, request
    from plotly import plotly
    
    py = plotly(username='mjhea0', key='2ic27cpzex')
    
    @get('/plot')
    def form():
        return '''<h2>Graph via Plot.ly</h2>
                  <form method="POST" action="/plot">
                    Name: <input name="name1" type="text" />
                    Age: <input name="age1" type="text" /><br/>
                    Name: <input name="name2" type="text" />
                    Age: <input name="age2" type="text" /><br/>
                    Name: <input name="name3" type="text" />
                    Age: <input name="age3" type="text" /><br/>                
                    <input type="submit" />
                  </form>'''
    
    @post('/plot')
    def submit():
        name1   = request.forms.get('name1')
        age1    = request.forms.get('age1')
        name2   = request.forms.get('name2')
        age2    = request.forms.get('age2')
        name3   = request.forms.get('name3')
        age3    = request.forms.get('age3')
    
        x0 = [name1, name2, name3];
        y0 = [age1, age2, age3];
        data = {'x': x0, 'y': y0, 'type': 'bar'}
        response = py.plot([data])
        url = response['url']
        filename = response['filename']
        return template('''Congrats! View your chart here <a href=""></a>!''', url=url)
    
    if __name__ == '__main__':
        port = int(os.environ.get('PORT', 8080))
        run(host='0.0.0.0', port=port, debug=True)
    

    What's going on here?

    In the first function, form(), we created an HTML form for capturing the data we need to make a bar graph. Then in the second function, submit(), we grabbed the form inputs, assigned them to variables, then used the plot.ly API to generate a new chart. Make sure you replace the username and key variables with your own credentials.

  7. Run your app locally, python app.py, and go to http://localhost:8080/plot.

  8. Enter the names of three people and their respective ages. Press submit, and then if all is well you should see a congrats message and a URL. Click the URL to view your graph:

    graph

Next Steps

  1. Try to create a form for a more complicated graph. For example, I developed the code necessary to create a chart for the following results of a cohort analysis study:

    cohort

    See if you can solve this on your own. If you get stuck, you can view my code here. The final graph should look like this:

    cohort_graph

  2. How could you make the form easier to use? What if you wanted to make it dynamic? In other words, what if you don't know the number of years to begin with?

See you next time!



Want to learn more? Download PythonFR.

Download Now » $35

Or, click here to learn more about the course



blog comments powered by Disqus