Changes between Version 35 and Version 36 of VisualizationPlugin
- Timestamp:
- Feb 14, 2016, 10:56:43 AM (8 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
VisualizationPlugin
v35 v36 5 5 == Description 6 6 7 This plugin adds [http ://code.google.com/apis/chart/Google Visualization API] charts to Trac pages. The most basic usage is graphing an existing report:7 This plugin adds [https://developers.google.com/chart/?csw=1 Google Visualization API] charts to Trac pages. The most basic usage is graphing an existing report: 8 8 9 [[Image(effort.png, border= 1)]]9 [[Image(effort.png, border=2)]] 10 10 11 11 See more examples [wiki:VisualizationPlugin#Examples below]. … … 40 40 }}} 41 41 42 See [ http://trac.edgewall.org/wiki/TracPluginsTracPlugins] for more installation details and options. You'll likely need to restart Trac's web server after installation.42 See [t:TracPlugins] for more installation details and options. You'll likely need to restart Trac's web server after installation. 43 43 44 44 2. Enable the plugin in `trac.ini`: … … 72 72 The plugin will automatically determine the data types for each column. However, the table needs to be structured suitably for graphing. In the screenshot at the top of this page, the table was built by grouping tickets into weeks as follows (SQLite SQL): 73 73 {{{#!sql 74 SELECT date(tc.time/1000000, 'unixepoch', 'weekday 5') as"Week ending",74 SELECT DATE(tc.time/1000000, 'unixepoch', 'weekday 5') AS "Week ending", 75 75 SUM(CASE e.value 76 77 76 WHEN '' THEN 0 77 ELSE e.value END) AS effort 78 78 FROM ticket t 79 JOIN ticket_change tc ON tc.ticket = t.id AND tc.field = 'status' AND tc.newvalue='closed' 80 AND tc.time=(SELECT max(time) FROM ticket_change tc2 81 WHERE tc2.ticket = t.id AND tc2.field = 'status' 82 AND tc2.newvalue='closed') 83 LEFT OUTER JOIN ticket_custom e ON e.ticket = t.id and e.name = 'effort' 79 JOIN ticket_change tc ON tc.ticket = t.id AND tc.field = 'status' AND tc.newvalue = 'closed' 80 AND tc.time = (SELECT max(time) FROM ticket_change tc2 81 WHERE tc2.ticket = t.id 82 AND tc2.field = 'status' 83 AND tc2.newvalue = 'closed') 84 LEFT OUTER JOIN ticket_custom e ON e.ticket = t.id AND e.name = 'effort' 84 85 WHERE resolution = 'fixed' AND t.type != 'epic' 85 86 GROUP BY date(tc.time/1000000, 'unixepoch', 'weekday 5') … … 101 102 reports = 21,23 102 103 type = ColumnChart 103 options = width:600, height:400,colors:['green'],title='Whistle while we work'104 options = width:600, height:400, colors:['green'], title='Whistle while we work' 104 105 }}} 105 106 106 [[Image(whistle.png )]]107 [[Image(whistle.png, border=2)]] 107 108 108 109 === Different graphs per report … … 115 116 [viz.report/21] 116 117 type = ColumnChart 117 options = colors:['green'], title='Whistle while we work'118 options = colors:['green'], title='Whistle while we work' 118 119 119 120 [viz.report/23] 120 121 type = AreaChart 121 options = colors:['red'], title='Bugs baby!'122 options = colors:['red'], title='Bugs baby!' 122 123 }}} 123 124 … … 128 129 === Burndown chart on milestone pages 129 130 130 In the examples above, the data for the charts came from a report table located on the same page. You can also create charts by [http ://code.google.com/apis/chart/interactive/docs/queries.html querying remote data sources] that conform to the [http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.htmlGoogle Visualization Data Source API]. One such example is the [wiki:SumStatsPlugin SumStats plugin] which provides a data source amenable to graphing as a daily burndown chart on any milestone page.131 In the examples above, the data for the charts came from a report table located on the same page. You can also create charts by [https://developers.google.com/chart/interactive/docs/queries?csw=1 querying remote data sources] that conform to the [https://developers.google.com/chart/interactive/docs/dev/implementing_data_source?csw=1 Google Visualization Data Source API]. One such example is the [wiki:SumStatsPlugin SumStats plugin] which provides a data source amenable to graphing as a daily burndown chart on any milestone page. 131 132 132 133 For example: … … 135 136 # Burndown 136 137 type = ColumnChart 137 options = width:400, height:300,title:'Burndown',colors:['blue','lightgray'],isStacked:true,backgroundColor:{strokeWidth:1,stroke:'#999'}138 options = width:400, height:300, title:'Burndown', colors:['blue','lightgray'], isStacked:true, backgroundColor:{strokeWidth:1,stroke:'#999'} 138 139 source = https://trac.mycompany.com/sumstats/query 139 140 selector = #stats fieldset 140 141 }}} 141 142 142 The above will add a daily, agile-style [ http://en.wikipedia.org/wiki/Burn_down_chart burndown chart] to your milestone pages:143 The above will add a daily, agile-style [wikipedia:Burn_down_chart burndown chart] to your milestone pages: 143 144 144 [[Image(burndown.png )]]145 [[Image(burndown.png, border=2)]] 145 146 146 147 In the configuration above, the {{{source}}} specifies the data source (in this case the local sumstats plugin) and the {{{selector}}} specifies the DOM element where the graph should be inserted before, in this case just before the stats drilldown section. You can position graphs anywhere by specifying an appropriate jQuery selector.