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

Question

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.