Making Circles in Google Charts – Undocumented Chart Types for Google Charts

So it looks like the Google Charts API has a couple of small undocumented charts in it!

There isn’t anything I can find about this written elsewhere, so here is my personal documentation for it.  The information here has been distilled from the MarkerIconCreator webpage. Where you can play with these chart types to have the URLs created for you.  I had to look all of this up for the KML generator I mentioned a few posts ago.

Circle (chart type it): Circle Example - With "X" in the middle.

Parameters: cht=it&chs=32×32&chco=FF0000,000000ff,ffffff01&chl=X&chx=FFFFFF,0&chf=bg,s,00000000

The important part to note is cht=it.  That chart type is not documented in the Google Charts API. 

Rounded Rectangle (chart type itr): Rounded Rectangle

Parameters: cht=itr&chs=32×32&chco=FF0000,000000ff,ffffff01&chl=X&chx=FFFFFF,0&chf=bg,s,00000000

Again, note cht=itr.

There are some other parts in both URLs  which are different from the documentation in how they’re used.  It’s not too hard to figure out via trial and error; but here are some quick explanations:

Color: chco=FF0000,000000ff,ffffff00

The API shows chco as series color, but it’s used a little bit differently for this chart type.  The first color is your shape color.  The second is your first shadow color, and the third is your background-shadow color.  These are regular hexidecimal colors, but with an added byte of values on the end to represent transparency.  If you are using this in a KML file, I recommend setting both shadow colors to 00.

Here are some examples with chco=00FF00,FF0000ff,0000ffAA: chco=00FF00,FF0000ff,0000ffAA chco=00FF00,FF0000ff,0000ffAA

Label Color: chx=FFFFFF

Chx doesn’t exsit on its own in the API. Other forms do, like chxt, chxr, etc.  It is the color for the label text.  It also supports adding an extra byte at the end for transparency.

Here are some examples with chx=00FFFF: Label Color Examplechx=00FFFF

Background color (gradient?): chf=bg,s,00000000

Chf is listed in the official documentation as a fill option.  Only the solid variety works here.  Then the coloring is the same Hex + transparency we’ve seen above. 

Here are the examples, chf=bg,s,00AA00FF: chf=bg,s,00AA00FF chf=bg,s,00AA00FF

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>