Creating Charts via URL, no JavaScript

Thu, Sep 18, 2014

Creating Charts via URL, no JavaScript

It could be just me but it seems to me the now accepted way of including charts in a web page is JavaScript.D3, Highchart, Raphaël and Chart.js to name a few. In situations where you don’t need interactivity afforded by JavaScript and for prototyping, using JavaScript is overkill. For ease of use and speed of deployment I would say you should consider including charts in your web application using the URL method for defining the chart. This is not a new technology but something I feel is not utilised enough.

Some reasons for using the URL approach include:

  • No software needs to be installed
  • No JavaScript library needs to be included and no JavaScript needs to be written
  • Coding, testing and debugging cycle is short. Save HTML and refresh your page
  • None technical users can be taught to create their own charts
  • Works particularly well when doing a mock-up or demo

There are three methods I know of on how to include a chart by merely specifying the chart definition in a URL. These are:

Eastwood Charts is an Open Source, “chart servlet that emulates the Google Chart API, using JFreeChart to render the charts to PNG images”. Eastwood Charts does not have all chart types available from Google Image Charts but is perfect if privacy is an issue and you who do not want to send all your data to Google. Additionally it will not be deprecated any time soon. Installation and use are not as simple, you will need to install a servlet container such as Tomcat to run the application.

I included Google Image Charts even though the service is set to be deprecated because this service has the biggest variety of chart types. I wouldn’t use the service for a long-term project but it is useful when you need to create mock ups of analytical applications. Comments from a Google engineer on this post Hacker News give the impression that the decision to deprecate is not final.

Eastwood Charts and Google Image Charts use the same syntax to create charts. Below is a sample URL that will work for both charting engines.


<img src="https://chart.googleapis.com/chart?cht=p3&chd=t:60,40,30,10,12&chs=350x150&chl=One|Two|Three|Four|Five"  />

Chartspree originally called Brace charts is the new kid on the block enabling you to embed an SVG chart into your web application. Only four chart types were available at the time of writing pie, bars, lines and area charts.


<img src="//chartspree.io/bar.svg?Foo=1,1,2,3,5&height=250px&_style=dark" />

Using the sample charts as starting points by the respective solutions, it really is relatively easy and quick to create a charts using the URL method. For private applications I would recommend using Eastwood Charts. Are they other similar tools out there I am not aware of, do let me know.



Tags brace charts/eastwood charts/external charts/google charts/no javascript charts/url charts/

Related Posts

Listening to hear your clients
The Most Efficient Way to do Large SQL Data Extracts From Your BI Tool