[% ostat = c.model('Accounts').db.get_object('stat', statname) %]
<h3>[% ostat.get_attributes('description') || 'No description' | html %]</h3>
<div >
[% r = c.forward('/json/stat/index', [ statname ]) %]


[% total = 0 %]
[% FOREACH row = r %]
    [% total = total + row.1 %]
[% END %]

[% FOREACH row = r %]
[% IF loop.first %]
<table class=datatable style="float:left; padding-top: 10px;">
[% END %]

<tr>
<th>[% row.0 | html %]</th>
<td>[% row.1 %]</td>
<td>[% row.1 / total * 100 | format('%.2f') %] %</td>
</tr>

[% IF loop.last %]
<tr>
<th>Total:</th>
<td>[% total %]</td>
<td> 100 %</td>
</tr>
</table>
[% END %]
[% END %]

<script>
$(document).ready(function(){
  // Our ajax data renderer which here retrieves a text file.
  // it could contact any source and pull data, however.
  // The options argument isn't used in this renderer.

    $.jqplot.config.enablePlugins = true;
  
    $.ajax({
      // have to use synchronous here, else the function
      // will return before the data is fetched
      // async: false,
      url: "[% c.uri_for('/json/stat', statname) %]",
      dataType:"json",
      success: function(data) {
          var plot2 = $.jqplot('chartdpmt', 
            [ data ],

            {
                title: '[% ostat.get_attributes('description') || 'No description' %]',
                seriesDefaults: {
                    shadow: false,
                    renderer: jQuery.jqplot.PieRenderer,
                    rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true }
                },
            legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show:true,
                location: 'e',
            }
          });
        }
    });

    $.ajax({
      // have to use synchronous here, else the function
      // will return before the data is fetched
      // async: false,
      url: "[% c.uri_for('/json/stat/history', statname) %]",
      dataType:"json",
      success: function(data) {
          var plot2 = $.jqplot('charth', data.data, 
            {
                title: '[% ostat.get_attributes('description') || 'No description' %]',
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer, 
                        rendererOptions:{
                            tickRenderer:$.jqplot.CanvasAxisTickRenderer
                        },
                        tickOptions: {
                            formatString:'%d/%m/%Y',
                            fontSize:'10pt',
                            fontFamily:'Tahoma',
                            angle:-40
                        },
                        tickInterval:'1 months',
                    },
                    yaxis: {
                        min: 0,
                    },
                },
                seriesDefaults: {
                    shadow: false,
                    lineWidth: 2,
                    rendererOptions: {
                        padding: 1,
                        sliceMargin: 2,
                        showDataLabels: true,
                        smooth: true
                    },
                    markerOptions:{style:'square', show: false, }
                },
                legend:{
                    renderer: $.jqplot.EnhancedLegendRenderer,
                    placement: 'outside',
                    show: true
                },
                cursor:{
                    zoom:true,
                    tooltipLocation:'sw',
                    looseZoom: true
                },
                series: data.series
            }
          );
        } 
    });
});
</script>

<div id="chartdpmt" style="width:60%; height:500px; float:left"></div>
</div>

<div id="charth" style="width:80%; height:600px; clear: both"></div>
</div>