Show HN: Google Charts done in Canvas, side project | Hacker News Reader

Show HN: Google Charts done in Canvas, side project

mattgreer.org

143 pointscity4128 comments

You can run the charts through Google's closure locally http://closure-library.googlecode.com/svn/trunk/closure/goog...

All the routines are public, there is no need to go through the API.

could you recomment a tutorial or blogpost or source repo demonstrating how to do this?

You can have a look at http://code.google.com/p/closure-library/. What I did downloaded the files and peeked through all of them. Closure has not been very popular with the community, but is currently running all google applications such as Gmail.

I did not know that. Thanks for the tip. My project is more of an experiment and for personal exploration and all that. So I don't mind if it has a strong competitor.

I can't find any way to use that locally - it says

ui.ServerChart Extends goog.ui.Component

Will construct a chart using Google's chartserver.

is there some way to stop it talking to Google's chartserver?

I looked at the source for goog/ui/serverchart.js and checked the documentation(yes, in that order:)).

There is no way to make it work without going through the Google chartserver.

Isn't there a google charts js api? or does it also depend on google infrastructure (I mean except serving the js file)?

> You can run the charts through Google's closure locally

It talks to google chart server.

    goog.ui.ServerChart.CHART_SERVER_URI = 'http://chart.apis.google.com/chart';

It won't work without talking to the server.

Great job!

Also, there are many other Javascript visualization libraries besides the Google Chart API that you might want to know about (if you did't). All of them are open and can be locally run.

Check out e.g.

http://vis.stanford.edu/protovis/

http://flare.prefuse.org/

Also

JavaScript InfoVis Toolkit http://thejit.org/

Somewhat related: there's a Processing port to JavaScript.

http://processingjs.org/

You can write your code in Processing or JavaScript, which is nice if you want to take advantage of the Processing library without having to learn a specific language.

Also D3, which evolved from Protovis.

http://mbostock.github.com/d3/tutorial/protovis.html

Indeed. Be careful with Protovis -- there hasn't been any work on it since last August or so, and the primary maintainer has pretty clearly moved onto D3.

If you're starting a new project, or even have some work invested in Protovis, I'd migrate it to D3. Working with a dead library isn't the best idea.

"the primary maintainer" - who are you talking about?

Flare is flash only, not Javascript.

Raphaël is another great Javastcript visualisation library.

http://raphaeljs.com

http://www.highcharts.com is quite nice too!

http://grafico.kilianvalkhof.com is another example of svg-based charts, and has a variety of line and bar charts.

One of the major gripes I had when I played around with the Google charts API is that it didn't seem to support log scales. Implement that and I'm sure you'll have won the hearts of a lot of frustrated developers. Looks great otherwise.

You can definitely use log scales with google charts, just it won't do it for you. You'll have to perform the math beforehand and send custom number labels.

Its very good to have an alternative to google charts. Your license should cover commercial use.

It's a standard 3-clause BSD license. Commercial use and distribution is allowed.

A big advantage of CANVAS is to display charts on Android phones. Most of today's Google charts use SVG that, for some obscure reasons, can't be displayed on these devices out of the box.

Useless since now Google charts are SVG-based: http://code.google.com/intl/en/apis/chart/interactive/docs/

Canvas has some advantages, like working in IE, and easily exporting to PNG.

I think you have your technologies mixed up. SVG has worked in every IE version since 5.

It's Canvas that IE has trouble with. The fix, in fact, is to convert your Canvas calls to SVG so that IE can render them.

I think you meant to say PNG?

My original post though:

"SVG has worked in every IE version since 5."

My experience here, and wikipedia, say otherwise:

"The use of SVG on the web is still limited by the lack of support in older versions of Internet Explorer (IE) which (as of December 2010) is the most widely-used browser. The most widely deployed version of IE (version 8) does not support SVG.[46][47] However, IE9 (released March 14, 2011) does support the basic SVG feature set.[48]"

and:

"Internet Explorer, up to and including IE8, was the only major browser not to provide native SVG support. Native support became partially available in IE9 (the current version of IE, as of March 2011),[48] including embedding SVG-file into HTML using “object” tag as well as “img” tag. IE8 and older require a plug-in to render SVG content."

From: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Suppor...

But you have it mixed up too.

IE has had VML (not SVG) since version 5. VML is similar, but not the same.

http://en.wikipedia.org/wiki/Vector_Markup_Language

Reply on news.ycombinator.com