<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> 
    [% title || 'Chart' %]
</title>
<style>
    body { text-align: center; padding-left: 9%; padding-right: 9%; }
    #placeholder { width: 80%; }  
</style>
</head>
<body>

<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery/flot.js"></script>
<script id="source" language="javascript" type="text/javascript">
$(function () {

    [% i = 0 %]
    [% FOREACH ctype IN stats.keys %]
    
    $('body').append("<h2>[% ctype %]</h2><div class='placeholder' id='placeholder[% i %]' style='height:300px;'></div>");
    
    var d[% i %] = [];
    
    [% FOREACH key IN stats.${ctype}.keys.sort %]
    
    d[% i %].push([[% key %], [% stats.${ctype}.$key %]]);
    
    [% END %]
    
    $.plot($("#placeholder[% i %]"), [
        {
            data: d[% i %],
            lines: { show: true },
            points: { show: true }
        }
    ]);
    [% i = i + 1 %]
    [% END %]
});
</script>

</body>
</html>