Piwik innovative with Javascript & Canvas Chart and contributing, by JQPlot creator

Piwik now uses jqPlot to render charts. jqPlot is a pure JavaScript plotting plugin for the jQuery framework created by Chris Leonello. jqPlot renders charts using the html5 canvas tag.

Timo has finished his first major project as a Piwik member: moving from flash graph to Javascript & Canvas graphs!

This guest blog features a JQPlot description & general answers, by his creator Chris Leonello, and a word about Timo

Screenshot of the new Graphs

Pie chart

Evolution charts

What is jqPlot?

jqPlot started in early 2009 after trying to find a suitable interactive browser based charting package for web based apps. Flash based alternatives were either too expensive, had restrictive licensing or didn’t have the needed features. Flash based alternatives also brought another programming language and set of programming tools into the development process, which wasn’t desired. Many fine javascript based packages (such as Flot and HighCharts) were investigated. While these were more developer friendly, they still lacked some needed features or had some licensing restrictions.

The decision was made to create a new jQuery based plugin and jqPlot was born. In an effort to give back to the community which made jqPlot possible, jqPlot was created as an open source project.

Piwik now uses jqPlot to render charts. jqPlot is a pure JavaScript plotting plugin for the jQuery framework created by Chris Leonello. jqPlot renders charts using the html5 canvas tag.

What is canvas?

The canvas tag creates a 2D bitmap canvas for drawing graphics and text. Drawing on canvas is like painting on paper, quick, efficient and easy. The canvas element doesn’t have any extra memory overhead other than the element itself. Unless you are interacting with the element, it doesn’t consume any extra cpu resources either. You control the canvas and draw shapes through simple javascript properties and methods such as “lineStyle” and “fillRect”.

jqPlot Browser support
The canvas tag and jqPlot work well on most browsers. All canvas features used by jqPlot are supported on Firefox 3.5+, Safari 4+, Chrome 8.0+, Opera 10+ and IE 9+. IE 6 – 8 are supported through Google’s excanvas.js library. On mobile, canvas is supported by iOS Safari 3.2+, Android Browser 2.1+ and Opera Mobile 10.0+.

jqPlot in active development

The project has grown to include 597 members on the mailing list. jqPlot source code on the issue tracker are on bitbucket. Of over 55,000 projects on bitbucket, jqPlot ranks 35th in number of followers, 31st in number of forks and has been downloaded 80,000 times.  While jqplot is developed primarily by Chris, many members of the community have helped improve it.

Piwik contributions in jqPlot

Timo Besenreuther, of the Piwik development team, made significant contributions which helped to greatly improve memory performance. Timo refactored the code to reuse canvas elements instead of recreating them. Timo’s enhancements are especially noticeable during rapid plot redrawing, such as while dynamically resizing a chart.

In true open source fashion, Timo forked jqPlot to develop the improvements. These were then merged back into the main jqPlot code. His fork has been merged in the main jqPlot trunk! He also built extra plugins such as easy to read Pie chart legends and Canvas Export as Image.

The Piwik Development Team also created specific use cases that were key in tracking down jqPlot DOM memory leaks.All in all, the Piwik/jqPlot relationship has led to what are probably the most significant improvements in core jqPlot performance. Good job Piwik Dev Team!

Future of jqPlot

jqPlot is currently in beta on it’s way to a 1.0 release. Further post 1.0 enhancements under investigation include tweaks for mobile devices and more axes features. In the long term, changes may include a significant overhaul of the core code for improved dynamic response and efficiency, a clean up of internal data structures, a more unified API and streamlined build process.

– Chris Leonello

Piwik innovation

Timo is a talented website developer and software engineer located in Munich, Germany. His expertise in JavaScript was collected over years of JavaScript frontend development. He also offers server side software development and content management in Java and PHP – you can contact Timo via his company website EZdesign.de. Timo has also worked on Inline help (quick help about most reports and columns), a new feature in Piwik 1.5.

Piwik team members and contributors are open source enthusiasts, and it is always a pleasure for us to use latest open source technologies and get a chance to contribute to some of the projects we depend on.

For early birds, enjoy the 1.5 RC release

Consider using jqPlot (see demo) when you need to draw charts,

Thank you for spreading the word about Piwik (check out this page for more information)