Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non-Flash Charting & Tables #804

Closed
robocoder opened this issue Jun 15, 2009 · 28 comments
Closed

Non-Flash Charting & Tables #804

robocoder opened this issue Jun 15, 2009 · 28 comments
Labels
duplicate For issues that already existed in our issue tracker and were reported previously. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.

Comments

@robocoder
Copy link
Contributor

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 (Non-Flash charting as a fallback #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
@robocoder
Copy link
Contributor Author

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

@mattab
Copy link
Member

mattab commented Jun 15, 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
Copy link
Member

mattab commented Jun 15, 2009

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

@robocoder
Copy link
Contributor Author

@robocoder
Copy link
Contributor Author

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
Copy link
Contributor Author

rolling in comments from #545 and #1084

@anonymous-matomo-user
Copy link

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
Copy link

Attachment: FLOT Graphs patch
piwik_html5.patch

@anonymous-matomo-user
Copy link

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
Copy link
Member

mattab commented Feb 9, 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.

Cheers

@anonymous-matomo-user
Copy link

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.

@anonymous-matomo-user
Copy link

Attachment: Screenshot
Piwik_Web Analytics Reports_1265736698765.png

@mattab
Copy link
Member

mattab commented Feb 11, 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-matomo-user
Copy link

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
Copy link
Member

mattab commented Feb 12, 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-matomo-user
Copy link

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
Copy link
Contributor

gka commented Aug 1, 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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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

@anonymous-matomo-user
Copy link

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
Copy link

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
Copy link

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
Copy link
Member

mattab commented Sep 23, 2010

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

@anonymous-matomo-user
Copy link

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
Copy link
Member

mattab commented Nov 16, 2010

Any update on the non-flash charting? thanks

@robocoder
Copy link
Contributor Author

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
Copy link
Member

mattab commented May 17, 2011

No update from developer in 8 months. Work is now covered in following tickets:

@robocoder robocoder added this to the Future releases milestone Jul 8, 2014
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate For issues that already existed in our issue tracker and were reported previously. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
Projects
None yet
Development

No branches or pull requests

4 participants