Matomo (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 Matomo 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.
Matomo 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.
Matomo contributions in jqPlot
Timo Besenreuther, of the Matomo 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 Matomo Development Team also created specific use cases that were key in tracking down jqPlot DOM memory leaks.All in all, the Matomo/jqPlot relationship has led to what are probably the most significant improvements in core jqPlot performance. Good job Matomo 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
Matomo 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 Matomo 1.5.
Matomo 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 Matomo (check out this page for more information)
