@robocoder opened this issue on June 15th 2009


In #760, there is a proof-of-concept example using JavaScript libraries to present a non-Flash line chart and table based on HTML tables retrieved via Piwik's API.

We should flesh this out more as this feature would provide: - an alternate method of embedding graphs & tables (i.e., not using iframes) - a lighter-weight presentation method for mobile clients - a potential fallback method where the browser doesn't support Flash or an older version of the player is detected (#545)

Things to consider: - state of the art: HTML tables vs JSON? - a server-side filter to prevent sending more data than can be displayed given browser's limited resolution; filter could either sample or smooth data - how to translate column labels? - excanvas drawing (via VML?) is slow on IE and doesn't support hover events - flot library is popular but doesn't have built-in support for pie charts; there are numerous unofficial patches floating around though...

Server-side: - JpGraph - pchart.sourceforge.net - google chart API

@anonymous-piwik-user commented on February 9th 2010

Attachment: FLOT Graphs patch piwik_html5.patch

@anonymous-piwik-user commented on February 9th 2010
@robocoder commented on June 15th 2009

Interesting excanvas examples by Jon Combe, the author of JAWStats: - pie chart - world map

@mattab commented on June 15th 2009

if we do something like this, we should consider the following: - the data will be fetched when rendering the main page request (as opposed to now where the data is rendered when the flash graph does the http request to request the JSON) - because it will be rendered for the fallback at the same time when the page render, we could also consider generating the graph data at page render, and then fetch the JSON to the flash object directly; it saves one http request and makes page load faster. There is such functionnality in open flash chart.

@mattab commented on June 15th 2009

note, my previous ticket should really be in a different ticket - but is related to this.

@robocoder commented on October 11th 2009

More links: - !http://www.rgraph.net/ - !http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/

@robocoder commented on November 8th 2009

Useswfobject.hasFlashPlayerVersion(versionStr) to detect Flash. Add parameter to server request when loading dashboard, iframe widgets, etc. Piwik_ViewDataTable::factory would generate alternate content if Flash not detected.

@robocoder commented on December 16th 2009

rolling in comments from #545 and #1084

@anonymous-piwik-user commented on January 7th 2010

Other charts with canvas : Flot

Not RGraph because the licence isn't free (not commercial use).

jQuery Visualize Plugin is a very good solution, but they aren't tooltip...

@anonymous-piwik-user commented on February 9th 2010

I have begun adding support for HTML5 graphs created with FLOT. I have the PieChart and VerticalBarGraph working, in a very basic manner. The graphs are not all that pretty at the moment, but that is not a shortcoming with FLOT, merely I have not done any styling.

Also, this is the first time I have ever worked with smarty templating, so any abuse^H^H^H^Hfeedback about how I have implemented it would be greatly appreciated.

@mattab commented on February 9th 2010

lsowen, the work looks interesting. Can you please post screenshots of the rendered graphs?

Do you aim to be included in the Piwik core? if so, all the existing features would need to be covered. Is this possible using this technology?

Alternatively, we could have the HTML5 plotting system in a plugin but this is not currently supported and would need some core modifications.


@anonymous-piwik-user commented on February 9th 2010

Matt, I wasn't aware of the HTML5 plugin. I think that FLOT could cover all the needed use cases, at least the ones I am aware of. I am, admittedly, new to Piwik hacking.

I believe that this would be a good thing to include in the core. I am attaching a screenshot.

@mattab commented on February 11th 2010

Does it also handle the hover to show a tooltip? would it be possible to try and emulate as much as possible the current style, colors, thickness of graphs in Piwik? thx

@anonymous-piwik-user commented on February 11th 2010

My next iteration will hopefully match the style of Piwik much better. Yes, tooltips are possible and I plan on implementing them.

A question though, are there any pie, vertical bar, or evolution charts that show more than one data series at a time? I want to ensure to test my HTML5 charts on it.

@mattab commented on February 12th 2010

lsowen, you can check out the ExampleUI plugin that shows graphs with 2 lines. Vertical bar and pie chart have only one data serie though. However, with the upcoming feature of #291 line charts with two series will become very important to support.

@anonymous-piwik-user commented on March 2nd 2010

I wanted to post an update of the work I have done. I discovered that while FLOT is full featured and mature, it is somewhat brittle, especially when it comes to non-line charts (eg bar or pie). Changes to how charts are created require changes to the core. Therefore, I went looking for a more flexible and extensible alternative. I found this in jqPlot, which features a cascading plugin system. However, jqPlot is not nearly as mature as FLOT, and is missing several key features such as hover detection and tooltips for pie charts.

I tried to push changes upstream to jqPlot to try to allow these features to be implemented, but so far, the author has not responded.

@gka commented on August 1st 2010

Here is another new non-flash charting library, straight from the stanford universtiy: http://vis.stanford.edu/protovis/. Looks very nice and also allows for more complex charts and animated charts.

@robocoder commented on August 23rd 2010

That's sweet, greg. And it's BSD licensed.

On Android, I suppose we'd still use Flash given that SVG is (currently) disabled in their webkit build.

@anonymous-piwik-user commented on September 22nd 2010

Is there any update on this ticket? I have recently started using piwik for our small website. I can provide testing help for any changes.

By the way, www.openwebanalytics.com shows graphs using 'canvas' elements. You should probably take a look at their code to see which third party libraries they use.

@robocoder commented on September 22nd 2010

No update yet. Usually there will be an associated changeset if there's work on a ticket.

@anonymous-piwik-user commented on September 23rd 2010

I tried using the patch here on our website [1]. I needed to do a few changes to the patch. But the graphs don't show up. I always see 'Graph could not render' message.

I am using piwik 1.0. Any idea what could be wrong? I can provide my version of patch if needed.

[1] http://www.gnusim8085.org/piwik/index.php

@anonymous-piwik-user commented on September 23rd 2010

Looks like I spoke too early. It is possible that the error I was seeing was due to data not being available. Now I can see bar charts and pie charts in their HTML5 glory.

I will attach the updated patch against 1.0 soon.

@anonymous-piwik-user commented on September 23rd 2010


This is definitely something I'm still interested in working on. Post your updated patch when you get a chance, and maybe we can get something worked out between the two of us.

@mattab commented on September 23rd 2010

Before doing any work on this, please consult #1721 which is pretty related, if not a subset of this ticket.

@anonymous-piwik-user commented on September 23rd 2010


Looks like it is possible to turn an HTML5 canvas object into a png. My focus at this point will remain on making dynamic, client side rendered charts via HTML5.

Information: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf

@mattab commented on November 16th 2010

Any update on the non-flash charting? thanks

@robocoder commented on April 24th 2011

awendt is working on a web-based iPhone UI ( https://github.com/awendt/piwik-iphone ), and he chose Raphaeljs (MIT licensed; renders to canvas). (Looks like he already tried the Filament Group's jquery visualization plugin.)

The demo lacks interaction, but is a capability of Raphaeljs.


It currently doesn't require server mods. But to make this generic, widget-specific helper code should be generated by the server.

@mattab commented on May 17th 2011

No update from developer in 8 months. Work is now covered in following tickets: - Static image graph generation #1721 - Javascript pretty graphs using jqplot #2431

This issue was closed on May 17th 2011
Powered by GitHub Issue Mirror