Create a webpage with charts or tables from csv data using the pyramid framework

I have data in csv format and I want to create a webpage with charts or tables. I'm using the Pyramid Framework, chameleon, and deform_bootstrap.

I'm new to web development and there doesn't seem to be any tutorials for this out there. Can anyone point me in the right direction?

Solution

Without knowing more details its difficult to say. However, basically you will need a route registered in your config (in the root __init__.py file), a view callable (this can be just a method) to read the file and pass the data to a renderer and a chameleon template to render the data.

First set a route in your configuration. For example, to add a route for the table and one for the chart you could do something like this in your __init__.py file.

config.add_route('show_table', '/table')
config.add_route('show_chart', '/chart')

The choice of names and paths is up to you of course.

Then, you need to implement a view callable for each route. These would read the file and return a dictionary containing the data. They also tie the data to a particular renderer, in your case a chameleon template. Something like this might be right for your case where both routes need the same data.

from pyramid.view import view_config

def read_file():
    """read the file and return the data in a suitable format"""
    return [1,4,2,4,56,7,45,3]

@view_config(route_name='show_table', renderer='templates/table.pt')
def table_view(request):
    data = read_file()
    return {'data': data}

@view_config(route_name='show_chart', renderer='templates/chart.pt')
def chart_view(request):
    data = read_file()
    return {'data': data}

Finally, you will need to implement the template files. These will be different depending on what you need.

<!DOCTYPE html>
<html xmlns:tal="http://xml.zope.org/namespaces/tal">

<head>
</head>

<body>
    <table>
        <tr><th>Data</th></tr>
        <tr tal:repeat="datum data"><td>${datum}</td></tr>
    </table>
</body>

</html>

To make charts I use d3.js but this is another question I think. Here is a simple example based on the first steps in this tutorial. First your template needs to make the data available to javascript. One way is to write the data into a javascript variable. This will work but is a bit messy - see this question for alternative approaches. In a real app you might want to use ajax so you would be writing the url to access the data here.

<!DOCTYPE html>
<html xmlns:tal="http://xml.zope.org/namespaces/tal">

<head>
   <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
    <div class="chart"></div>
    <script type="text/javascript">
       var data = ${data};
       var x = d3.scale.linear()
         .domain([0, d3.max(data)])
         .range([0, 420]);

       d3.select(".chart")
        .selectAll("div").data(data)
        .enter().append("div")
          .style("width", function(d) { return x(d) + "px"; })
          .text(function(d) { return d; });
    </script>
</body>

</html>

This should work but is untested, if you have any problems let me know and I will update it when I have a moment.