What?
For part 2 of these posts on the Google charts API, I’m going to look at another graphical element you can create from image code or a basic form. This time it’s notes in different styles.
Why?
Once again, you could make these images in a graphics program and then upload them to your blog or website but it’s really quick and easy to add a quick bit of graphical interest to your post or page once you have the code.
How?
First of all, you can edit the basic code set up and use it as image code like this:
Basic code you can copy and paste into a browser address bar:
http://chart.googleapis.com/chart?chst=d_fnote&chld=pinned_c|1|993399|h|Hello+folks|here+is+a|note
Image code for your blog or website:
<img src="http://chart.googleapis.com/chart?chst=d_fnote&chld=pinned_c|1|993399|h|Hello+folks|here+is+a|note" />
Here is the note graphic this code produces instantly:
I’ve coloured the parts of the code you can change in orange above. Here are the options:
1. Type of text:
- d_fnote is a note without a title
- d_fnote_title is a note with the first line of text larger and bolder
2. Type of note graphic:
- arrow_d is a big down arrow
- balloon is a speech balloon
- pinned_c is a note pinned to a surface
- sticky_y is a yellow sticky note
- taped_y is a sqaure piece of paper taped to a surface
- thought is a thought bubble
3. Note size (set sizes you can’t change):
- 1 is large
- 2 is small
4. Text colour:
- 993399 - you can use any standard 6-figure code e.g. from here (you don’t need the #)
5. Text alignment:
- l (lower case letter L) is left aligned
- h is centred
- r is right aligned
6. Text contents:
- | First+line|second+line|third+line – separate lines of text with the vertical line character and separate words with the + character like this -
I’ll leave you to play with those…try copying and pasting the basic image code above and changing the note graphic code to see what happens.
Here’s a quick screencast to explain the technique a bit further:
Now that you have mastered the fairly simple note graphics, why not take a look at some of the other options in the dynamic icon section of the chart API? Here’s what you could get up to:
Have fun!
Pingback: Tweets that mention Mulryne.com » …use the Google chart API – part 2 – instant note graphics -- Topsy.com