It's better when it's simple

User Tools

Site Tools


tableplot Plugin

Compatible with DokuWiki

2013-12-02, Angua, Adora Belle, Weatherwax, Binky

plugin Plots a table using jqPlot

Last updated on
Syntax, Action

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to charter, pchart

Tagged with chart, plot, tables

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.

External requirements

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

Initially tested with version 1.0.0b2_r1012. Minor testing with both 1.0.4r1121 and the latest 1.0.8r1250 appear to work.


  1. Install jqPlot. The action plugin looks for the following jqPlot files
    1. lib/scripts/jqplot/jquery.jqplot.min.css
    2. lib/scripts/jqplot/jquery.jqplot.min.js
    3. lib/scripts/jqplot/plugins/jqplot.barRenderer.min.js
    4. lib/scripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js
    5. lib/scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js
    6. lib/scripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js
    7. lib/scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js
    8. lib/scripts/jqplot/plugins/jqplot.pointLabels.min.js
    9. lib/scripts/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js
    10. lib/scripts/jqplot/plugins/jqplot.highlighter.min.js
    11. lib/scripts/jqplot/plugins/jqplot.pieRenderer.min.js

- 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/


  • The /lib/scripts folder is used to keep javascript files together. 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 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.


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. This example can be seen at Plugin Examples Site

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

I couldn't see that exampleEarthquakePlot.txt is included, but you can find the example on this address: hibHIB


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 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.

Configuration and Settings

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

Parameter Value Meaning Default
orient vertical,horizontal plot orientation vertical
series columns,rows data orientation in table columns
firstSeries number index of the row/column containing the first series 1
lastSeries number index of the row/column containing the last serieslast cell in the row/col
labels integer index of cell in series row/column that contains the label for the series 0
xaxis integer index of row/column (whatever args.series is) that contains the x values 0
dataStart integer index of first cell in the series containing data 1
dataEnd integer index of last cell in the series containing datalast cell in the row/col
position before, after, replace graph go before the table, after the table, or replace the table after
width numeric plot width in pixels width of the table
height numeric plot height in pixels height of the table
placement text id to place plot at null
dataTransform text function to run on cell contents before passing to jqPlot null
labelTransform text function to run on cell contents before passing to jqPlot null
xaxisTransform text function to run on cell contents before passing to jqPlot null
plotArgs {text} arguments for jqPlot null
id text Table Id table1

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

&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'}}&


Change Log

Known Bugs and Issues

  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 I did exactly what was proposed in that link, which was move the following code on line 10576 to the end of the file.
  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 - 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() ];


ToDo/Wish List



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 }}&

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"); 

Hi, I have made this change to the configured code. Thanks — tom_ctom_c

2013/11/02 13:09

The example “exampleEarthquakePlot” doesn't show any graph. Regarding your Bug 2: The content on line 10576 is “var number = value »> 0;”. Content on the end line 10901 is “));” I added 10902 with “})(jQuery);” My version is 1.0.0b2_r1012. Still no graph. hibHIB


Regarding your third tips. I cant find the buggy line. Line 1652 is an empty line within function internalRemoveData. Neither can I find a line with the code that should be changed. My version is * jQuery JavaScript Library v1.9.1 hibHIB


I have now tested your tableplot-version in Discussion and now there is a graph! It has two axis and a headline. The vertical axis goes from 50000000 to 350000000, but data runs from 14825 to 31419. Then I changed the value for 2000 with 22256 to 250000000 and now the bar for that year is shown. hibHIB


plugin/tableplot.txt · Last modified: 2013-12-03 04:30 by tom_c