Week 2 report

I'm really happy how my second week turned out because I've got the permit from my Mentor to replace pmas current and rather undynamic, server-side charting library pChart with a client-side library called highcharts which gives me much more possibilities and speed improvement. The reason pChart was selected for use in pma is that an image generated chart would allow the user to save/export it. However in the way pChart is currently implemented a export is not possible because the charts that are being sent to the client are split into 20 pieces using Data URI Scheme for compatibility reasons (IE8 limits data urls to 32kb).

What I did this week:

- My initial goal to merge some of the pages turned out that I've currently put the processes list into the status pages, whereas the other pages Charsets, Engines and Variables have been put and the end of the menu bar by Marc, which is also a good solution.

- I've successfully added real-time charting the way I planned it. Currently it's working for queries sent to the server on the query statistics tab, which also gives very useful information on each points tooltip where it displays what type of queries have been sent. And I'm happy that after lots of research I could solve the main concern of client-side charting libraries, which is the exporting of charts. Highcharts does have an export feature, but it's relying on either an external service provided by highcharts.com or uses Batik, a library written in Java to parse and convert SVG. Since the pma team (and me too) prefers to not rely on an external service (and adding java as requirement is out of question) I added a small js library called canvg that can convert SVG-Graphics into a html5 canvas element which is already stored as image internally. With only minimal changes I was able to adjust the already provided export feature by highcharts to make it convert to a html5 canvas and is then sent via POST to a php script that basically just echos it back with a force-download header. I might add the lib Downloadify, that would save us the echo service altogether.
Best of all is that, charting and exporting should both work in all major browsers. Exporting in IE8 currently does not work due to a bug in canvg that I have reported and already is acknowledged by the original author and thus hopefully fixed soon.

What I'm planning for next week:

- Currently there is only one real-time chart for queries. I'd also like to add one for processes and connections  and maybe for network traffic.

- The chart export currently only exports to PNG, I will look into the code to see whether I can also add SVG, PDF and JPEG export.

- But most of all, I will be looking forward to replace pChart with highcharts. Since pChart is used at only 3 places this should be fairly easy (but maybe time consuming). Replacing the charts for query statistics and profiling will be a piece of cake, since the charting data is being sent along anyway. Only the work on replacing pChart for graphical display of query results will be a bit bigger.