tableplot Plugin

The tableplot plugin uses jqPlot to plot data from a table.

Tableplot is a modification of the graphTable JQuery plugin by Rebecca Murphey. That plugin uses the Flot plotting software. I switched the plotting software to use jqPlot and integrated it with dokuwiki.

This plugin requires the following additional components that must be installed separately:

• jqPlot (Tested with version 1.0.0b2_r1012)
• Keywords plugin

1. Install jqPlot. The action plugin looks for the following jqPlot files
   1. js/jqplot/jquery.jqplot.min.css
   2. js/jqplot/jquery.jqplot.min.js
   3. js/jqplot/plugins/jqplot.barRenderer.min.js
   4. js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js
   5. js/jqplot/plugins/jqplot.dateAxisRenderer.min.js
   6. js/jqplot/plugins/jqplot.canvasTextRenderer.min.js
   7. js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js
   8. js/jqplot/plugins/jqplot.pointLabels.min.js
   9. js/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js
2. Install the tableplot plugin using the Plugin Manager and the download URL above. If you install this plugin manually, make sure it is installed in lib/plugins/tableplot/
3. Install Keywords plugin if not already installed

Notes:

• The /js folder is expected to reside at the same folder level as /dokuwiki. The jqPlot files can be placed anywhere with appropriate changes to the tableplot action plugin.
• Some jqplot plugins are optional. For example if not using the functionality provided by the enhancedLegendRenderer (such as hiding plot elements), the reference can be removed from the action plugin. If other jqplot functionality is desired then additional plugins can be added in the action plugin.

The tableplot plugin requires the following minimum syntax.

<tableplot></tableplot>
{{keywords>table2plot}}

• Tableplot will work with no parameters by using the default values. The configuration file (\conf\default.php) specifies the default id parameter as table1. The id is required to identify the table to plot. You can plot multiple tables on the same page.
• The keywords plugin line identifies the page as a tableplot so that the required javascript files are included only for those pages.

A simple example is provided with the tableplot code. In the example folder is the file exampleEarthquakePlot.txt. It can be included on your dokuwiki page to plot Earthquake data.

In addition you can see the plugin in action here: Glocal Focal Wiki page NJ health or Glocal Focal Wiki page US nature. The latter makes use of the jqplot ability to remove graph elements by clicking on the legend.

Both pages in the online example above use a forked version of the sql plugin to create tables for use by tableplot. However, tableplot does not require sql to be used. Using the sql plugin allows you to get data from a mysql database rather than having to enter it manually. The forked version of the sql plugin is available on GitHub at forked version of sql plugin. In the new sql plugin use the table id parameter which can then be used by tableplot.

The MySql for All tip has some support software that would allow a user to easily generate his mysql query. That query can be used in the updated sql plugin to create a table with an associated table id. The table id can be provided to the tableplot plugin for generating a graph. The tips support software when configured for your database removes the need for the wiki user to know the structure or have direct visibility into your database.

Basic syntax:

<tableplot></tableplot>
{{keywords>table2plot}}

TablePlot accepts two types of parameters. One type are used to setup the call to jqPlot and the other type are jqPlot parameters. The jqPlot parameters are contained in the parameter called plotargs. These are simply passed on to jqPlot. Documentation of the jqPlot parameters can be found at jqPlot API Documentation. This link provides the detailed syntax. Do not be discouraged by the number of parameters. Defaults work for most and many options are provided. The examples at jqPlot examples and provided in this package are a good place to start.

Note: If specifying jqPlot Renderer functions in the jqPlot paramters be aware that there could be a conflict when specified as $.jqplot.function. If errors occur specify the function as jQuery.jqplot.function.

The following table shows the parameters that can be added to the <tableplot>...</tableplot> plugin to allow users to configure their plot.

All parameters must be preceded and succeeded with an ampersand symbol (&). The format of a parameter is &parameter=value&. The & would not be repeated when specifying more than one parameter. An example would be

<tableplot>
&series=rows&firstSeries=1&height=400&width=400&id=yeardata&position=after&dataTransform=function(s) { return(Math.round(s));}
&plotArgs={title: {text: 'New Jersey Cancer Mortality Rate', fontSize: '14pt', textColor: 'skyblue'}}&
</tableplot>

• add keywords to example (2012/04/30 04:41)
• Update to make compatible with Angua version of Dokuwiki (2012/04/30 02:16)
• Update date in info function for latest change (2011/12/29 13:52)
• table2Plot minor change for code match (2011/12/29 04:07)
• Remove keywords plugin dependency and correct css (2011/12/29 02:52)
• fix multiple series error with two dimensonal data array (2011/12/20 04:41)
• correct typo at start of file (extra - character) (2011/12/07 05:33)
• Initial Commit (2011/12/05 20:59)

1. Plot of multiple series incorrect - Plotting two series displays extra line on line plots and only one set of bars on bar charts.
   Issue closed. Fix is in Commit on 2011/12/19
2. You need to modify jquery.jqplot.js to correct for what looks like a bug (documented here https://bitbucket.org/cleonello/jqplot/issue/559/effectscore-not-included-in-anonymous). I did exactly what was proposed in that link, which was move the following code on line 10576 to the end of the file.

   })(jQuery); 

3. You need to modify /dokuwiki/lib/scripts/jquery/jquery.js to correct the error of elem.nodeName.toLowerCase is not a function . You can see the solution at the bottom of this jquey problem report - http://bugs.jquery.com/ticket/10891. The fix is to change line 1652 as follows

   var match = jQuery.noData[ elem.nodeName.toLowerCase()];
    change to
   var match = jQuery.noData[ elem.nodeName.toString().toLowerCase() ];

   .

Hi, great plugin, just something I need. I've installed it for me. Unfortunately, I beomme no graphics when I try the test page. When I look at me the HTML code of the test page, I have a feeling that everything is rendered correctly. Have you an idea of what that might be. Unfortunately I get no error message. I use the default template. TCI 16.12.2011

Hi, thanks for the feedback. If you see the table but no graph, my first guess is that it has to do with a conflict of specifying the jqplot functions with the $ like $.jqplot.CategoryAxisRenderer. Change all the $.jqplot instances in the plugin text to jQuery.jqplot (eg: jQuery.jqplot.CategoryAxisRenderer). There should be 3 of them. I will update the example to do this. Your new plugin text should be

<tableplot>&series=columns&width=400&height=400&id=Earthquakes&plotArgs={title: {text: 'Number of Earthquakes Worldwide', fontSize: '14pt', textColor: 'skyblue'}, axes: {xaxis: {renderer: jQuery.jqplot.CategoryAxisRenderer, tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer ,tickOptions: {angle: -30}}}, seriesDefaults: {renderer:jQuery.jqplot.BarRenderer }}&
</tableplot>

Hi sorry that I have signed up as long as no more, but I was busy in another project. But now I have found the error. I had to change in the “action.php” file the following line, now the script works.

    'src'     => $basePath ."dokuwiki/lib/plugins/tableplot/table2Plot.js");  ->     'src'     => $basePath ."lib/plugins/tableplot/table2Plot.js");