Matt Greer

Yokul - Google Charts Reimplemented in a Local JS Canvas

05 June 2011

Yokul is a little JavaScript experiment I’ve been playing with in my free time. Using the same query string you’d normally send to the Google Image Chart API a local chart is created on the client using an HTML5 canvas.


Here is a page of charts to play with

Advantages

  • Open source and completely runs on the client, no data is sent to any third parties
  • If your site has a lot of charts, this will save a lot of bandwidth. Granted it’s saving Google’s and your user’s bandwidth so you may not care
  • It can render many charts much faster than Google can, limited only by the power of the user’s machine
  • No need to send Google Charts a POST for complex chart definitions, Yokul will take a query string of any length
  • Some of Google’s limitations like chart size are not present in Yokul. Want to make a 10,000x10,000 pixel chart? Have at it
  • No internet connection is required for Yokul to work
  • Animating a Yokul chart will be pretty easy to do and is high on the list of things to do next

Disadvantages

  • Your user must have JavaScript enabled and a modern browser to see the chart
  • Yokul, so far, doesn’t come even close to implementing all of Google Charts and if it ever does, it’ll be a while
  • Not a trivial drop in replacement, to use Yokul you do need to change your markup a bit (see below)

Yokul Depends On

A browser having Canvas. That’s about it. No other JavaScript library is required.

What Works So Far

So far just vertical bar charts (grouped, stacked and overlapped) are implemented. There are some parameters that are not implemented, others that have bugs and others that are only partially implemented. See the sample page for a decent overview of what Yokul is currently capable of

Quick Start

  1. Grab yokul.min.js and reference it
  2. Change all the src attributes in your Google Chart images to data-src attributes
  3. Call YOKUL.convertAllImages()

Showing debug info and errors

Yokul is very early at this point, you will certainly run into issues. Mostly you’ll find some of your favorite chart types and/or parameters aren’t implemented yet. Yokul will let you know if you set up a debug output div for it.

Create a div on your page that Yokul can write to. Tell Yokul where this div is with

  YOKUL.debugOutput = "idOfYourDebugDiv";
  YOKUL.logOutput = { info: false, warning: true, error: true };

Ideally do this before you do anything else with Yokul. Here is the debug output from creating the above chart:

You will need to set up some CSS styles for this output to look nice, view the source of this page to see my styles

Converting just one image

If convertAllImages() is too course for you, you can call YOKUL.chartCreator.create(id, [query]). Where:

  • id is a DOM id of an img element. This img’s src will be set to the generated chart image
  • query the chart query string you’d normally send to Google. This is optional and if not provided Yokul will try and find the query string in the img element