PlotJax is a Javascript package used to render charts and graphs within <canvas> elements, with support for pop-up drill-downs, and gesture-based interaction.

What is PlotJax ?

PlotJax is a Javascript library to render charts and graphs entirely within your browser, without sending your data to a third party web server, or installing any Java, ActiveX, or Flash plugins. The chart look and feel is defined by a standard definition (in JSON format), along with an optional "helper" Javascript object.

PlotJax provides more than just a static image, however. PlotJax includes a pop-up balloon tooltip interface to provide drill-downs of chart data, as well as gesture driven zoom and filter capability. And since PlotJax chart definitions are based on the standard JSON data interchange format, charts can be dynamically updated from a server in near realtime using AJAX requests.

How do I use PlotJax ?

The Easy Way: Using the PlotJax Wizard

The , PlotJax Wizard (sorry, still under construction...) guides you through a step-by-step process to define the look and feel of your chart, including

The PlotJax Wizard will progressively display an updated version of your chart layout as you define the look and feel elements. When you're done defining your chart, PlotJax will display the text of the JSON definition, which you can simply copy and paste into your own webpages.

The Easier Way: Using PlotJax Templates

A number of templates for common chart types are available. You simply select a template, insert the type of data to be plotted, and the data values, and you've got your chart!

For Power Users

If you have special applications, or intend to load and update the chart via AJAX requests, you can program your own JSON definitions using the PlotJax JSON Interface Definition, passing the JSON text to either the PlotJax constructor, or the loadData method. This method gives you fine control over the content of your JSON, and hence, the look and feel of your chart.

Via Perl: Direct Database Queries

(Currently under construction...)

A soon to be released update to DBIx::Chart provides support for rendering directly into PlotJax JSON, rather than static images. DBIx::Chart is a subclass of Perl's standard database interface library DBI that adds an SQL language extension for generating charts from database queries. Using DBIx::Chart, you can directly query a database with a compatible Perl DBI driver, and PlotJax JSON will be returned as the query result, which you can then send to a browser for display.

Coming Soon: Direct Database Queries for Everyone

A database proxy server known as DBDetour is being updated to support a DBIx::Chart plugin, along with MySQL, PostgreSQL, and other server protocol interfaces, so that users of ODBC, JDBC, or other language libraries for database access can retrieve PlotJax charts with the same direct-to-database ease as Perl.

Where can I get more fonts ?

Text drawn in a PlotJax chart uses the Shodo Javascript library, and font data generated from the Suzuri tool. You can create your own font definitions to be used with your chart, and insert them into your chart JSON, or load them from your own font server.

What About Internet Explorer ?

IE does not implement the <canvas> element; however, PlotJax supports the excanvas VML-to-canvas adapter library for Microsoft® Internet Explorer (versions 6 and 7).

What do PlotJax charts look like ?

See for yourself! The PlotJax sample page provides several charts rendered via PlotJax.

What are PlotJax's license terms ?

PlotJax Copyright© 2008 Presicient Corp., USA. All rights reserved.

PlotJax is dual licensed:

The compressed version of PlotJax is freely available to use, copy, and redistribute under the terms of the Academic Free License 3.0.

PlotJax is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the Academic Free License 3.0 for more details.

Presicient will also offer a commercial license for PlotJax, which will include full cleartext sources, as well as priority support and regular updates.


Who can I contact for help and more info ?

Send help requests, suggestions, and bug reports to If there is sufficient interest, I may startup a mailling list or wiki.

Presicient provides consulting services, and annual support agreements, to help you exploit all that PlotJax has to offer. Contact for program offerings and pricing.