1 | |
---|
2 | <h3></h3> |
---|
3 | <div > |
---|
4 | [% r = c.forward('/json/stat/index', [ statname ]) %] |
---|
5 | |
---|
6 | [% ostat = c.model('Accounts').db.get_object('stat', statname) %] |
---|
7 | |
---|
8 | [% total = 0 %] |
---|
9 | [% FOREACH row = r %] |
---|
10 | [% total = total + row.1 %] |
---|
11 | [% END %] |
---|
12 | |
---|
13 | [% FOREACH row = r %] |
---|
14 | [% IF loop.first %] |
---|
15 | <table class=datatable style="float:left; padding-top: 10px;"> |
---|
16 | [% END %] |
---|
17 | |
---|
18 | <tr> |
---|
19 | <th>[% row.0 | html %]</th> |
---|
20 | <td>[% row.1 %]</td> |
---|
21 | <td>[% row.1 / total * 100 | format('%.2f') %] %</td> |
---|
22 | </tr> |
---|
23 | |
---|
24 | [% IF loop.last %] |
---|
25 | <tr> |
---|
26 | <th>Total:</th> |
---|
27 | <td>[% total %]</td> |
---|
28 | <td> 100 %</td> |
---|
29 | </tr> |
---|
30 | </table> |
---|
31 | [% END %] |
---|
32 | [% END %] |
---|
33 | |
---|
34 | <script> |
---|
35 | $(document).ready(function(){ |
---|
36 | // Our ajax data renderer which here retrieves a text file. |
---|
37 | // it could contact any source and pull data, however. |
---|
38 | // The options argument isn't used in this renderer. |
---|
39 | |
---|
40 | $.ajax({ |
---|
41 | // have to use synchronous here, else the function |
---|
42 | // will return before the data is fetched |
---|
43 | async: false, |
---|
44 | url: "[% c.uri_for('/json/stat', statname) %]", |
---|
45 | dataType:"json", |
---|
46 | success: function(data) { |
---|
47 | var plot2 = $.jqplot('chartdpmt', |
---|
48 | [ data ], |
---|
49 | |
---|
50 | { |
---|
51 | title: '[% ostat.get_attributes('description') || 'No description' %]', |
---|
52 | seriesDefaults: { |
---|
53 | shadow: false, |
---|
54 | renderer: jQuery.jqplot.PieRenderer, |
---|
55 | rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true } |
---|
56 | }, |
---|
57 | legend: { show:true, location: 'e' } |
---|
58 | |
---|
59 | |
---|
60 | }); |
---|
61 | } |
---|
62 | }); |
---|
63 | |
---|
64 | $.jqplot.config.enablePlugins = true; |
---|
65 | |
---|
66 | $.ajax({ |
---|
67 | // have to use synchronous here, else the function |
---|
68 | // will return before the data is fetched |
---|
69 | async: false, |
---|
70 | url: "[% c.uri_for('/json/stat/history', statname) %]", |
---|
71 | dataType:"json", |
---|
72 | success: function(data) { |
---|
73 | var plot2 = $.jqplot('charth', data.data, |
---|
74 | { |
---|
75 | title: '[% ostat.get_attributes('description') || 'No description' %]', |
---|
76 | axes: { |
---|
77 | xaxis: { |
---|
78 | renderer: $.jqplot.DateAxisRenderer, |
---|
79 | rendererOptions:{ |
---|
80 | tickRenderer:$.jqplot.CanvasAxisTickRenderer |
---|
81 | }, |
---|
82 | tickOptions: { |
---|
83 | formatString:'%b %#d, %#I %p', |
---|
84 | fontSize:'10pt', |
---|
85 | fontFamily:'Tahoma', |
---|
86 | angle:-40 |
---|
87 | }, |
---|
88 | tickInterval:'1 months', |
---|
89 | } |
---|
90 | }, |
---|
91 | seriesDefaults: { |
---|
92 | shadow: false, |
---|
93 | lineWidth: 2, |
---|
94 | rendererOptions: { |
---|
95 | padding: 1, |
---|
96 | sliceMargin: 2, |
---|
97 | showDataLabels: true, |
---|
98 | smooth: true |
---|
99 | }, |
---|
100 | //markerOptions:{style:'square'} |
---|
101 | }, |
---|
102 | legend:{ |
---|
103 | placement: 'outside', |
---|
104 | show: true |
---|
105 | }, |
---|
106 | cursor:{ |
---|
107 | zoom:true, |
---|
108 | tooltipLocation:'sw', |
---|
109 | looseZoom: true |
---|
110 | }, |
---|
111 | series: data.series |
---|
112 | } |
---|
113 | ); |
---|
114 | } |
---|
115 | }); |
---|
116 | }); |
---|
117 | </script> |
---|
118 | |
---|
119 | <div id="chartdpmt" style="width:60%; height:500px; float:left"></div> |
---|
120 | </div> |
---|
121 | |
---|
122 | <div id="charth" style="width:80%; height:600px; clear: both"></div> |
---|
123 | </div> |
---|