Non-Flash Charting & Tables

[robocoder]

Client-side:

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-matomo-user]

Attachment: FLOT Graphs patch piwik_html5.patch

[anonymous-matomo-user]

Attachment: Screenshot Piwik_Web Analytics Reports_1265736698765.png

[robocoder]

Interesting excanvas examples by Jon Combe, the author of JAWStats:

• pie chart
• world map

[mattab]

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]

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

[robocoder]

More links:

• !http://www.rgraph.net/
• !http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/

[robocoder]

Use swfobject.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]

rolling in comments from #545 and #1084

[anonymous-matomo-user]

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-matomo-user]

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]

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.

Cheers

[anonymous-matomo-user]

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]

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-matomo-user]

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]

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-matomo-user]

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]

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]

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-matomo-user]

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]

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

[anonymous-matomo-user]

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-matomo-user]

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-matomo-user]

onkarshinde,

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]

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

[anonymous-matomo-user]

Matt,

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]

Any update on the non-flash charting? thanks

[robocoder]

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.

http://awendt.github.com/piwik-iphone

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

[mattab]

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