Table of Contents
tableplot Plugin
Compatible with DokuWiki
2013-12-02, Angua, Adora Belle, Weatherwax, Binky
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.
Installation
- Install jqPlot. The action plugin looks for the following jqPlot files
- lib/scripts/jqplot/jquery.jqplot.min.css
- lib/scripts/jqplot/jquery.jqplot.min.js
- lib/scripts/jqplot/plugins/jqplot.barRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.pointLabels.min.js
- lib/scripts/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js
- lib/scripts/jqplot/plugins/jqplot.highlighter.min.js
- 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/
Notes:
- 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.
Usage/Examples
The tableplot plugin requires the following minimum syntax.
<tableplot></tableplot>
- 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.
Examples
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: https://github.com/TomCafferty/plugin-tableplot/blob/master/example/exampleEarthquakePlot.txt hib 2013/11/30
Related Helper Software
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.
Syntax
Basic syntax:
<tableplot></tableplot>
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 series | last 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 data | last 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 ¶meter=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>
Development
Change Log
- add keyword and jQuery (2013-12-08 15:43)
- fix passing plot parameters (2013-12-03 03:44)
- fixed example (2013-11-30 16:04)
- moved jqplot to lib/scripts folder & added PieRenderer (2013-11-02 12:48)
- removed keywords from example (2013-07-13 16:49)
- added highlighter library as minimized (2013-07-13 16:35)
- remove keywords plugin dependency (2013-07-13 16:16)
- modify to display stacked bar chart (2012-11-10 01:25)
Known Bugs and Issues
- 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 - 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);
- 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() ];
.
ToDo/Wish List
FAQ
Discussion
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");
Hi, I have made this change to the configured code. Thanks — tom_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. hib 2013/11/30
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 hib 2013/11/30
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. hib 2013/11/30