Changes between Version 35 and Version 36 of VisualizationPlugin


Ignore:
Timestamp:
Feb 14, 2016, 10:56:43 AM (8 years ago)
Author:
figaro
Comment:

Further cosmetic changes

Legend:

Unmodified
Added
Removed
Modified

  • VisualizationPlugin

    v35 v36  
    55== Description
    66
    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:
     7This 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:
    88
    9 [[Image(effort.png, border=1)]]
     9[[Image(effort.png, border=2)]]
    1010
    1111See more examples [wiki:VisualizationPlugin#Examples below].
    … …  
    4040    }}}
    4141
    42     See [http://trac.edgewall.org/wiki/TracPlugins TracPlugins] 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.
    4343
    4444 2. Enable the plugin in `trac.ini`:
    … …  
    7272The 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):
    7373{{{#!sql
    74 SELECT date(tc.time/1000000, 'unixepoch', 'weekday 5') as "Week ending",
     74SELECT DATE(tc.time/1000000, 'unixepoch', 'weekday 5') AS "Week ending",
    7575  SUM(CASE e.value
    76           WHEN '' THEN 0
    77           ELSE e.value END) AS effort
     76      WHEN '' THEN 0
     77      ELSE e.value END) AS effort
    7878  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'
    8485  WHERE resolution = 'fixed' AND t.type != 'epic'
    8586  GROUP BY date(tc.time/1000000, 'unixepoch', 'weekday 5')
    … …  
    101102reports = 21,23
    102103type = ColumnChart
    103 options = width:600,height:400,colors:['green'],title='Whistle while we work'
     104options = width:600, height:400, colors:['green'], title='Whistle while we work'
    104105}}}
    105106
    106 [[Image(whistle.png)]]
     107[[Image(whistle.png, border=2)]]
    107108
    108109=== Different graphs per report
    … …  
    115116[viz.report/21]
    116117type = ColumnChart
    117 options = colors:['green'],title='Whistle while we work'
     118options = colors:['green'], title='Whistle while we work'
    118119
    119120[viz.report/23]
    120121type = AreaChart
    121 options = colors:['red'],title='Bugs baby!'
     122options = colors:['red'], title='Bugs baby!'
    122123}}}
    123124
    … …  
    128129=== Burndown chart on milestone pages
    129130
    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.html 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.
     131In 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.
    131132
    132133For example:
    … …  
    135136# Burndown
    136137type = ColumnChart
    137 options = width:400,height:300,title:'Burndown',colors:['blue','lightgray'],isStacked:true,backgroundColor:{strokeWidth:1,stroke:'#999'}
     138options = width:400, height:300, title:'Burndown', colors:['blue','lightgray'], isStacked:true, backgroundColor:{strokeWidth:1,stroke:'#999'}
    138139source = https://trac.mycompany.com/sumstats/query
    139140selector = #stats fieldset
    140141}}}
    141142
    142 The above will add a daily, agile-style [http://en.wikipedia.org/wiki/Burn_down_chart burndown chart] to your milestone pages:
     143The above will add a daily, agile-style [wikipedia:Burn_down_chart burndown chart] to your milestone pages:
    143144
    144 [[Image(burndown.png)]]
     145[[Image(burndown.png, border=2)]]
    145146
    146147In 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.