<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                    data.addColumn('string', '{{ axis.name|escapejs }}');
                    
                    {% for choice in axis.data.keys %}
                        data.addColumn('number', '{{ choice|escapejs }}');  
                    {% endfor %}
             
                    data.addRows({{ axis.data.values.0|length }});
                    
                    {% for timepoint in axis.data.values.0 %}
                        data.setValue({{ forloop.counter0 }}, 0, '{{ timepoint.0 }}');
                    {% endfor %}
                                       
                   {% for value in axis.data.values %}   
                        {% for point in value %}
                            data.setValue({{ forloop.counter0 }}, {{ forloop.parentloop.counter }}, {{ point.1 }});
                        {% endfor %}                    
                    {% endfor %}
                    
                    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                    chart.draw(data, {width: document.width - 30, height: window.innerHeight - 30, title: '{{ axis.name|escapejs }}'});
            }
        </script>
    </head>

    <body>  
        <div id="chart_div"></div>
    </body>
</html>
