diagram1Add my vote for this tag graphing1Add my vote for this tag images1Add my vote for this tag javascript1Add my vote for this tag plotting1Add my vote for this tag visualization1Add my vote for this tag create new tag
, view all tags


Add line, bar and pie charts to TWiki topics using jqPlot JavaScript library


<div id='chart1' style='height:280px; width: 500px;'></div>
$.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);

Resulting chart (if plugin is installed and enabled): %JQPLOT{"canvasTextRenderer,canvasAxisLabelRenderer"}%

Simulated (screenshot):


More examples are found in the official jqPlot website.


jqPlot is a "pure javascript plotting" library, and this TWiki plugin bundles the package with easy setup using %JQPLOT% tag.

Since jqPlot depends on the jQuery JavaScript library, JQueryPlugin must be installed for JqPlotPlugin to work.

When a %JQPLOT% tag is present, the necessary JavaScript and CSS references are added to the <head> of the page. The %JQPLOT% tag itself is expanded into an empty string. Even if the tag happens to be used multiple times, the required references are added only once.

In order to use jqPlot plugins (for bar charts, pie charts, axis labels, etc.), the plugin names should be added to the %JQPLOT% tag.

%JQPLOT{"barRenderer, pieRenderer, categoryAxisRenderer"}%

The above will add the <script> tags to the <head> as below:

<script type="text/javascript" src=".../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src=".../plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src=".../plugins/jqplot.categoryAxisRenderer.min.js"></script>

All the common references such as jquery.jqplot.min.js (which would be added by the empty %JQPLOT%) are also added automatically.

Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the TWiki server.

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the Plugins home (see below).
    • Unzip JqPlotPlugin.zip in your twiki installation directory. Content:
      File: Description:
      data/TWiki/JqPlotPllugin.txt Plugin topic
      data/TWiki/VarJQPLOT.txt JQPLOT variable documentation topic
      lib/TWiki/Plugins/JqPlotPlugin.pm Plugin Perl module
      pub/TWiki/JqPlotPlugin/*.png Image files
      pub/TWiki/JqPlotPlugin/jquery.jqplot.* jqPlot library package
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies.

  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Test if the installation was successful using the example above.

Plugin Info

Many thanks to the following sponsors for supporting this work:

  • Morgan Stanley

Plugin Author: TWiki:Main.MahiroAndo
Copyright: © 2012-2013 TWiki:Main.MahiroAndo
© 2012-2013 TWiki:TWiki.TWikiContributor
License: GPL (Gnu General Public License)
Plugin Version: 2013-03-06 jquery.jqplot.1.0.7r1224
Change History:  
2013-03-06: Fixed Fast CGI/mod_perl unfriendliness, upgraded to jquery.jqplot.1.0.7r1224
2012-11-14: Initial release with jquery.jqplot.1.0.4r1121
Dependencies: JQueryPlugin
Plugin Home: http://twiki.org/cgi-bin/view/Plugins/JqPlotPlugin
Feedback: http://twiki.org/cgi-bin/view/Plugins/JqPlotPluginDev
Appraisal: http://twiki.org/cgi-bin/view/Plugins/JqPlotPluginAppraisal

Related Topics: VarJQPLOT, TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory, TWikiPreferences

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 JqPlotPlugin.md5 r4 r3 r2 r1 manage 0.2 K 2013-03-06 - 02:23 HideyoImazu  
Compressed Zip archivetgz JqPlotPlugin.tgz r4 r3 r2 r1 manage 2588.3 K 2013-03-06 - 02:22 HideyoImazu  
Compressed Zip archivezip JqPlotPlugin.zip r4 r3 r2 r1 manage 3009.0 K 2013-03-06 - 02:22 HideyoImazu  
Unknown file formatEXT JqPlotPlugin_installer r2 r1 manage 37.2 K 2013-03-06 - 02:22 HideyoImazu  
Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2013-10-16 - PeterThoeny
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.