cht=bhs
>> horizontal bar chart

chs=300×40
>> ’300′ pixels wide
>> ’40′ pixels tall

chxt=x,y
>> enable x-axis and y-axis labels

chxl=0:|0|50|100|150|200|250|300|1:||Revenue|
>> ’0:|0|50|100|150|200|250|300|’ x-axis labels
>> ’1:||Revenue|’ y-axis labels

chxs=0,000000,9|1,000000,12
>> ’0,000000,9′ makes the x-axis labels black and 9px tall
>> ’1,000000,12′ makes the y-axis labels black and 12px tall

chbh=7,0,0
>> ’7′ specifies that each bar is 7 pixels tall
>> ’0′ specifies 0 pixels between each bar which gives the illusion of a single bar
>> ’0′ specifies 0 pixels between each group which ensures that the bottom bar touches the x-axis

chco=7f7f7f,b2b2b2,e6e6e6,000000,e6e6e6,000000,e6e6e6
>> ’7f7f7f’ is the horizontal dark gray “background” on bars 1 and 3
>> ‘b2b2b2′ is the horizontal medium gray “background” on bars 1 and 3
>> ‘e6e6e6′ is the horizontal first section of light gray “background” on bars 1 and 3
>> ’000000′ is the vertical 1 pixel black marker on bars 1 and 3
>> ‘e6e6e6′ is the horizontal remaining section of light gray “background” on bars 1 and 3
>> ’000000′ is the horizontal black bar in the middle
>> ‘e6e6e6′ is the horizontal light gray “background” to the right of the horizontal black bar

chd=t:50,0,50|25,0,25|7.5,0,7.5|1,0,1|16.5,0,16.5|0,90,0|0,10,0
>> ‘t:’ is text encoding which basically mean each number is a percentage, so a bar with length of 50 fills 50% of the graph
>> ’50,0,50′ is the horizontal dark gray “background” on bars 1 and 3, bar 2 does not have this section
>> ’25,0,25′ is the medium dark gray “background” on bars 1 and 3, bar 2 does not have this section
>> ’7.5,0,7.5′ first section of light gray “background” on bars 1 and 3, bar 2 does not have this section
>> ’1,0,1′ is the vertical 1 pixel black marker on bars 1 and 3, bar 2 does not have this section
>> ’16.5,0,16.5′ is the horizontal remaining section of light gray “background” on bars 1 and 3, bar 2 does not have this section
>> ’0,90,0′ is the horizontal black bar in the middle, bars 1 and 3 do not have this section
>> ’0,10,0′ is the horizontal light gray “background” to the right of the horizontal black bar, bars 1 and 3 do not have this section

Notice how the colors and datasets match up. If the horizontal black bar ended in the dark gray section, the data sets and colors would have to change.

http://tinyurl.com/2qsfma

http://chart.apis.google.com/chart?cht=bhs&chs=200×25&chd=t:50,0,50|30,0,30|5,0,5|1,0,1|14,0,14|0,90,0|0,10,0&chco=666666,999999,cccccc,000000,cccccc,000000,cccccc&chbh=8,0,0

-Clint

http://chart.apis.google.com/chart?chs=120×20&chd=s:thequickbrownfoxjumpedoverthelazydogs&cht=lc&chco=999999

… and another, with a banded range:

http://chart.apis.google.com/chart?chs=120×20&chd=s:thequickbrownfoxjumpedoverthelazydogs&cht=lc&chm=r,DDDDDD,0,0.2,0.8&chco=999999

… I think both bar and line styles of Sparklines can be pretty easily created with the API. Keep the dimensions small and don’t include any sort of axis or data labels.

The up-down style of Sparklines (e.g., the ones that Tufte used to show MLB win/loss and home/away over time) might be more difficult.

But now I’m curious HOW MUCH more difficult. Hmm.

Thanks!

I wonder if embedded charts work in comments.