Google Charts is a wonderful way to start data visualization. It is easy to learn and powerful to use. In the followings blogs, I will present some samples using Google Charts library.

Quick Start Sample

This sample comes from The most part is done with copy and paste. I have to figure out how to embed JavaScript code and Google Charts library in Ghost blog system.

  • Ghost uses Markdown for text editing. Markdown basically accepts all HTML codes. This is a good news, because this means that you can insert JavaScript codes into the editor's body section.
  • Prepare Google Charts library setting it up in Settings > Code Injection. It can be located either into the header or footer. I put it into the header section. One thing that you can consider is that you can set Google Charts library in each blog entry instead doing it the global setting (just as I did). The reason that I choose the latter is that I plan to use it in most writings.
  • One problem I found is that Ghost blog's index page does not properly show Charts content. It displays raw codes. This is a bummer! I have to resolve this in the future. Ideally, I want to display Google Charts drawings in index page with other images. For now, I am using Saga theme which has pinterest style image blocks. I think that it works well with chart drawings.