Changes between Version 32 and Version 33 of VisualizationPlugin


Ignore:
Timestamp:
Mar 19, 2015, 6:50:04 AM (9 years ago)
Author:
figaro
Comment:

Cosmetic changes, rearranged paragraphs

Legend:

Unmodified
Added
Removed
Modified

  • VisualizationPlugin

    v32 v33  
    11[[PageOutline(2-5,Contents,pullout)]]
    22
    3 = Graphs tables and other data using Google Visualization API =
     3= Graphs tables and other data using Google Visualization API
    44
    5 == Description ==
     5== 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 [http://code.google.com/apis/chart/ Google Visualization API] charts to Trac pages. The most basic usage is graphing an existing report:
    88
    99[[Image(effort.png, border=1)]]
    … …  
    1313See also: [http://pypi.python.org/pypi/TracGViz TracGViz plugin]
    1414
    15 == Configuration ==
    16  1. Install the plugin (after downloading and unzipping):
     15== Bugs/Feature Requests
     16
     17Existing bugs and feature requests for VisualizationPlugin are
     18[report:9?COMPONENT=VisualizationPlugin here].
     19
     20If you have any issues, create a
     21[http://trac-hacks.org/newticket?component=VisualizationPlugin&owner=robguttman new ticket].
     22
     23[[TicketQuery(component=VisualizationPlugin&group=type,format=progress)]]
     24
     25== Download
     26
     27Download the zipped source from [download:visualizationplugin here].
     28
     29== Source
     30
     31You can check out VisualizationPlugin from [http://trac-hacks.org/svn/visualizationplugin here] using Subversion, or [source:visualizationplugin browse the source] with Trac.
     32
     33== Installation and Configuration
     34
     35 1. Install the plugin after downloading and unzipping:
    1736    {{{
    1837    #!sh
    … …  
    2241    }}}
    2342
    24     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.
     43    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.
    2544
    26  2. Enable the plugin:
     45 2. Enable the plugin in `trac.ini`:
    2746    {{{
    2847    #!ini
    … …  
    3352    You can alternatively use the Trac Web Admin GUI to enable any or all rules.
    3453
    35  3. Configure which pages to include graphs - example:
     54 3. Configure which pages to include graphs in `trac.ini`:
    3655    {{{
    3756    #!ini
    … …  
    4059    }}}
    4160
    42 The above example will populate an area chart from the table of data found in report 21 and display the chart above that table - see screenshot above. The examples section [wiki:VisualizationPlugin#Examples below] shows additional ways to include graphs and charts on Trac pages.
     61The above example will populate an area chart from the table of data found in report 21 and display the chart above that table, see screenshot above. The examples section [wiki:VisualizationPlugin#Examples below] shows additional ways to include graphs and charts on Trac pages.
    4362
    44 This plugin requires Javascript but does not require any other libs to be pre-installed.  The Google Visualization libs are loaded dynamically using Google's standard JS loader.
     63This plugin requires Javascript but does not require any other libs to be pre-installed. The Google Visualization libs are loaded dynamically using Google's standard JS loader.
    4564
     65== Examples
    4666
    47 == Bugs/Feature Requests ==
     67=== Existing report
    4868
    49 Existing bugs and feature requests for VisualizationPlugin are
    50 [report:9?COMPONENT=VisualizationPlugin here].
    51 
    52 If you have any issues, create a
    53 [http://trac-hacks.org/newticket?component=VisualizationPlugin&owner=robguttman new ticket].
    54 
    55 == Download ==
    56 
    57 Download the zipped source from [download:visualizationplugin here].
    58 
    59 == Source ==
    60 
    61 You can check out VisualizationPlugin from [http://trac-hacks.org/svn/visualizationplugin here] using Subversion, or [source:visualizationplugin browse the source] with Trac.
    62 
    63 == Examples ==
    64 
    65 === Existing report ===
    66 The most basic usage is adding a chart to an existing report - this can be achieved with almost no configuration.  Simply list the reports in the {{{[viz]}}} section in {{{trac.ini}}}:
     69The most basic usage is adding a chart to an existing report. This can be achieved with almost no configuration. Simply list the reports in the {{{[viz]}}} section in {{{trac.ini}}}:
    6770{{{
    6871#!ini
    … …  
    7174}}}
    7275
    73 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):
     76The 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):
    7477{{{
    7578#!sql
    … …  
    8992}}}
    9093
    91 The above is only for illustration purposes. Any SQL query can be used as long as it produces a graphable table.
     94The above is for illustrative purposes only. Any SQL query can be used as long as it produces a graphable table.
    9295
    9396If you prefer a column chart instead of the default area chart, you can change the chart type as follows:
    … …  
    99102}}}
    100103
    101 The type name must exactly match those supported by the Google Visualization API [http://code.google.com/apis/chart/interactive/docs/gallery.html here] (no spaces). You can also customize all of its options available for that chart type.  For example, the {{{ColumnChart}}} type's options can be found [http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options here]. So if we wanted to add a title and change the color for the same table as shown in the screen at the top of this page, we can do this:
     104The type name must exactly match those supported by the Google Visualization API [http://code.google.com/apis/chart/interactive/docs/gallery.html here] (no spaces). You can also customize all of its options available for that chart type. For example, the {{{ColumnChart}}} type's options can be found [http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options here]. So if we wanted to add a title and change the color for the same table as shown in the screen at the top of this page, we can do this:
    102105{{{
    103106#!ini
    … …  
    110113[[Image(whistle.png)]]
    111114
    112 === Different graphs per report ===
    113 If you use multiple graphs and charts, you may want to customize them differently for different reports.  To do that, create a new section for the reports instead of including them in the main {{{[viz]}}} section's {{{reports}}} option:
     115=== Different graphs per report
     116
     117If you use multiple graphs and charts, you may want to customize them differently for different reports. To do that, create a new section for the reports instead of including them in the main {{{[viz]}}} section's {{{reports}}} option in `trac.ini`:
    114118{{{
    115119#!ini
    … …  
    126130}}}
    127131
    128 You customize a page's graph by creating a section that matches all or part of its url after a {{{viz.}}} prefix.  So for example, the above customizes reports 21 and 23 differently.  Report 21 will be a green column chart with the given title, and report 23 will be a red area chart with its given title. Both charts will inherit the {{{[viz]}}} section's width and height, however.
     132You customize a page's graph by creating a section that matches all or part of its url after a {{{viz.}}} prefix. So for example, the above customizes reports 21 and 23 differently. Report 21 will be a green column chart with the given title, and report 23 will be a red area chart with its given title. Both charts will inherit the {{{[viz]}}} section's width and height, however.
    129133
    130  '''Important''': whereas the {{{options}}} option ''adds'' to the base {{{[viz]}}} section's {{{options}}}, all other options (e.g., {{{type}}}) ''override'' the base {{{[viz]}}} section's options.
     134 '''Important''': whereas the {{{options}}} option ''adds'' to the base {{{[viz]}}} section's {{{options}}}, all other options, such as {{{type}}}, ''override'' the base {{{[viz]}}} section's options.
    131135
    132 === Burndown chart on milestone pages ===
    133 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.  For example:
     136=== Burndown chart on milestone pages
     137
     138In 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. For example:
    134139{{{
    135140#!ini
    … …  
    146151[[Image(burndown.png)]]
    147152
    148 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.
     153In 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.
    149154
    150 See the [wiki:SumStatsPlugin SumStats plugin] for details on how to configure it for alternative visualizations (e.g., by adding a {{{query}}} to specify the columns to return and their order).
     155See the [wiki:SumStatsPlugin SumStats plugin] for details on how to configure it for alternative visualizations, for example by adding a {{{query}}} to specify the columns to return and their order.
    151156
    152 === Any graph on any page ===
    153 As described above, you can add a graph or chart to any Trac page including wiki pages.  The steps are:
    154  1. Create a {{{[viz.<page-url>]}}} section in {{{trac.ini}}}
    155  1. Set its {{{source}}} option to the remote data source url
    156  1. (Optional) Add a {{{query}}} option as appropriate for the data source
    157  1. Set the {{{selector}}} to the DOM location before which the graph should be inserted
    158  1. Configure the chart {{{type}}} and {{{options}}} as desired
     157=== Any graph on any page
    159158
    160 To embed iGoogle Gadgets in wiki pages using WikiFormatting, you may wish to try [http://pypi.python.org/pypi/TracGViz TracGViz plugin] (I have not yet tried this myself).
     159As described above, you can add a graph or chart to any Trac page including wiki pages. The steps are:
     160 1. Create a {{{[viz.<page-url>]}}} section in {{{trac.ini}}}.
     161 1. Set its {{{source}}} option to the remote data source url.
     162 1. (Optional) Add a {{{query}}} option as appropriate for the data source.
     163 1. Set the {{{selector}}} to the DOM location before which the graph should be inserted.
     164 1. Configure the chart {{{type}}} and {{{options}}} as desired.
    161165
    162 == Recent Changes ==
     166To embed iGoogle Gadgets in wiki pages using WikiFormatting, you may wish to try [http://pypi.python.org/pypi/TracGViz TracGViz plugin] (untested).
     167
     168== Recent Changes
    163169
    164170[[ChangeLog(visualizationplugin, 3)]]
    165171
    166 == Author/Contributors ==
     172== Author/Contributors
    167173
    168174'''Author:''' [wiki:robguttman] [[BR]]
    169 '''Maintainer:''' [wiki:robguttman] [[BR]]
     175'''Maintainer:''' [[Maintainer]] [[BR]]
    170176'''Contributors:'''