New chart types: Map pins, sticky notes, information bubbles, text with outline

1,437 views
Skip to first unread message

rogerts

unread,
Oct 23, 2008, 11:52:24 AM10/23/08
to Google Chart API
We have added several new chart types to the chart API. They let you
enrich your Internet application and make it more upbeat. In
particular we added: Map pins with text or icons inside, several kinds
of sticky notes, information bubbles, and text with an outline.

If you'd like to know how to get them for your application, click on
the following links:

* Map pins: http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins
* Sticky notes: http://groups.google.com/group/google-chart-api/web/chart-types-for-sticky-notes
* Information bubbles: http://groups.google.com/group/google-chart-api/web/chart-types-for-information-bubbles
* Text with an outline: http://groups.google.com/group/google-chart-api/web/chart-type-for-text-with-outline

Happy charting!
Message has been deleted

joggle

unread,
Oct 28, 2008, 12:46:45 PM10/28/08
to Google Chart API
That's nice, but any report on if/when Unicode will be supported? I
can't really use your chart API until it has support for Asian
characters unfortunately.

rogerts

unread,
Oct 29, 2008, 6:11:07 AM10/29/08
to Google Chart API
Hi Joggle,
Thanks for your mail.

Unicode is already supported. Wherever, in the examples, there's a
place for you to enter text, you can enter Unicode text. It has to be
encoded in UTF-8 and then, because you put this in a URL, it has to be
URL-encoded. For example,
http://www.google.com/chart?chst=d_map_pin_letter&chld=%E9%A7%85|FFFF00|000000
gives you a map pin with the kanji for "station" inside, while
http://www.google.com/chart?chst=d_map_pin_letter&chld=A|FFFF00|000000
gives you a map pin with an "A" inside. You can do this will all other
chart types.

You can do a web search for "unicode converter" to convert to UTF-8;
then converting to URL-encoding is easy.

Note that, although we have Unicode support, this doesn't mean that
all languages are supported.

Teto

unread,
Nov 18, 2008, 11:09:17 AM11/18/08
to Google Chart API
Hi,
I just have a quick question regarding your comment.

When I try to Encode my English chart API URL using UTF-8. Google
chart doesn't recognize the encoded URL and I got error on the browser
"Bad Request"

java.net.URLEncoder.encode(strURL,"UTF-8");

Original URL:
http://chart.apis.google.com/chart?cht=p&chd=t:37,0,50,12,1,0,0&chs=300x200&chl=Agriculture||Shrub/Grass|Trees|Built|Bare/Ice|Water&chco=FFFF66,ffffff,99FF66,006600,cc0000,cccc66,76A4FB&chf=bg,s,d3d3d3&chdl=Agriculture||Shrubs
and Grass|Trees|Built|Bare or Ice|Water&chdlp=b

Encoded UTF-8 URL:
http://chart.apis.google.com/chart?cht%3Dp%26chd%3Dt%3A37%2C0%2C50%2C12%2C1%2C0%2C0%26chs%3D300x200%26chl%3DAgriculture%7C%7CShrub%2FGrass%7CTrees%7CBuilt%7CBare/Ice%7CWater%26chco%3DFFFF66%2Cffffff%2C99FF66%2C006600%2Ccc0000%2Ccccc66%2C76A4FB%26chf%3Dbg%2Cs%2Cd3d3d3%26chdl%3DAgriculture%7C%7CShrubs%20and%20Grass%7CTrees%7CBuilt%7CBare%20or%20Ice%7CWater%26chdlp%3Db

Please advise. Thanks


On Oct 29, 5:11 am, rogerts <roge...@google.com> wrote:
> Hi Joggle,
> Thanks for your mail.
>
> Unicode is already supported. Wherever, in the examples, there's a
> place for you to enter text, you can enter Unicode text. It has to be
> encoded in UTF-8 and then, because you put this in aURL, it has to beURL-encoded. For example,
> http://www.google.com/chart?chst=d_map_pin_letter&chld=%E9%A7%85|FFFF00|000000
> gives you a map pin with the kanji for "station" inside, while
> http://www.google.com/chart?chst=d_map_pin_letter&chld=A|FFFF00|000000
> gives you a map pin with an "A" inside. You can do this will all other
> chart types.
>
> You can do a web search for "unicode converter" to convert to UTF-8;
> then converting toURL-encodingis easy.

rogerts

unread,
Nov 18, 2008, 11:18:33 AM11/18/08
to Google Chart API
Hi Teto,

You should only apply UTF-8 encoding and URL-encoding to the text that
is to be displayed, but not to the special characters that ChartServer
uses to separate the different elements. In your example, only the
spaces in the chdl argument have to be URL-encoded (you actually don't
need UTF-8 encoding because all the characters that you use are
ASCII). So the correct URL would be

http://chart.apis.google.com/chart?cht=p&chd=t:37,0,50,12,1,0,0&chs=300x200&chl=Agriculture||Shrub%2FGrass|Trees|Built|Bare/Ice|Water&chco=FFFF66,ffffff,99FF66,006600,cc0000,cccc66,76A4FB&chf=bg,s,d3d3d3&chdl=Agriculture||Shrubs%20and%20Grass|Trees|Built|Bare%20or%20Ice|Water&chdlp=b

Note that the "&" stay unchanged, because they are used to separate
different elements in the URL. If you wanted to actually show a "&" in
the image, you would escape it as %26. Compare the previous URL with

http://chart.apis.google.com/chart?cht=p&chd=t:37,0,50,12,1,0,0&chs=300x200&chl=Agriculture||Shrub%2FGrass|Trees%26more|Built|Bare/Ice|Water&chco=FFFF66,ffffff,99FF66,006600,cc0000,cccc66,76A4FB&chf=bg,s,d3d3d3&chdl=Agriculture||Shrubs%20and%20Grass|Trees|Built|Bare%20or%20Ice|Water&chdlp=b

I hope this helps!

On Nov 18, 5:09 pm, Teto <TamerNas...@gmail.com> wrote:
> Hi,
> I just have a quick question regarding your comment.
>
> When I try to Encode my English chart API URL using UTF-8. Google
> chart doesn't recognize the encoded URL and I got error on the browser
> "Bad Request"
>
> java.net.URLEncoder.encode(strURL,"UTF-8");
>
> Original URL:http://chart.apis.google.com/chart?cht=p&chd=t:37,0,50,12,1,0,0&chs=3...|Shrub/Grass|Trees|Built|Bare/Ice|Water&chco=FFFF66,ffffff,99FF66,006600,cc0000,cccc66,76A4FB&chf=bg,s,d3d3d3&chdl=Agriculture||Shrubs
> and Grass|Trees|Built|Bare or Ice|Water&chdlp=b
>
> Encoded UTF-8 URL:http://chart.apis.google.com/chart?cht%3Dp%26chd%3Dt%3A37%2C0%2C50%2C...

Jakobc

unread,
Nov 21, 2008, 4:35:08 AM11/21/08
to Google Chart API
Hey!
Thanks for the great work, really cool, like much other at Google ;)

I have a feature request.

I'm trying to use Linear stripes to indicate weeks in a graph, these
are of course the same size, so optimal I can define only two color/
width.
But if I would like to set a offset eg. if the graph starts on a
thursday.(and still only use the two color/width for the graph)
Now the solution is to make color/width for all weeks at the length of
the chart, it could be nice to make a offset.

Have anyone solved this i some other way, then I like to know :)
Jakob

Mark Winton

unread,
Nov 21, 2008, 4:43:16 AM11/21/08
to google-c...@googlegroups.com
Hey Jacob

What about making the color for the first two the same as the background
with some arbitrary value so that they get "shown".
Have you got an example of what you are trying to do that you can post.

It's a hack but it may work.
Regards
Mark
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.549 / Virus Database: 270.9.8/1800 - Release Date: 2008/11/19
18:55



Message has been deleted

Jakobc

unread,
Nov 21, 2008, 5:36:28 AM11/21/08
to Google Chart API
Hey Mark!
First link didn't work out so good, so I try agian :)

http://chart.apis.google.com/chart?cht=lc&chs=1000x200&chd=s:XNYCDBFFMIACFJGKLCEJMMJPCFMlSUQFEPTaUXBCSdXVPCFTiVPQBCJTNHfDMXaSWSFCHMRSRHMUeXYXHCOXTUMCBKPPVXGHYRLTPFDiSTVVMCXYjbgKPObXXXHCVgjudHDeeZdUECYbHAWJLblb8dIHrYriuSFrqtfMAAKYVgpKNsAAAAAAAAAAA,KHJBDDJKHGCCFHHFEBDEHJFQEFP1bbPEFNQRUQCDMMIKOCDKNKJJCCFNHHNCFPPMPNDFEKMHHEEHVTNOCEJKLHHCCJHJMKDHKJIIJEFPJNPJEEIQMNKFEKSPRPIFONymVKHWdWPQFILPDAMFHMLNQNFKNNPYULISPROKAAFQVURHKNAAAAAAAAAAA&chtt=SomeName&chco=4169E1,FF8C00&chf=c,ls,0,8A2BE2,0.3,F5F5DC,0.1|c,ls,0,F5F5DC,0.027173912152648,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781,FFFFFF,0.0380434766411781,F5F5DC,0.0380434766411781&chdlp=t&chdl=Usages|Downloads&chxt=y,r,x,t&chxl=0:|0|20|40|60|80|100|1:|0|20|40|60|80|100|2:|Jun|Jul|Aug|Sep|Oct|Nov|3:|Usages|Downloads&chxp=2,6,22,39,55,72,89&chxr=&chxs=0,4169E1|1,FF8C00&chg=0,20&chm=B,F0F8FF,0,0,0&chls=3,0,0

Hope it works this time...
Jakob

Jakobc

unread,
Nov 21, 2008, 5:41:27 AM11/21/08
to Google Chart API

lyzby

unread,
Dec 8, 2008, 1:49:32 PM12/8/08
to Google Chart API


On Oct 23, 10:52 am, rogerts <roge...@google.com> wrote:
> We have added several new chart types to the chart API. ...

I would like to request an additional chart--a variety of candlestick
chart such as is sometimes used to chart the movements of a stock--
like this one here: http://tinypic.com/view.php?pic=2hmhs0m&s=4

For each data point the input takes high, low, start value, end value,
and item label (horizontal ). Start value is shown as the leftward
tic, end value as the rightward. Items which end higher than the
previous item are shown in a settable "bull color", items which end
lower than the previous are shown in a "bear color". Items which end
the same as the previous are shown in the previous color.

Thanks for consideration.

WindChart

unread,
Dec 9, 2008, 2:08:27 PM12/9/08
to Google Chart API
The image shown in the tinypic URL is actually called a bar chart,
which is another useful chart type. rogerts, please add both bar and
candlestick chart types, with similar APIs: (up color, down color) and
data in (open, high, low, close) groups of four values per bar/
candlestick. Those values are charted against the y-axis, and the x
values should be assigned just like a spike chart. Thank you!


On Dec 8, 10:49 am, lyzby <lance_ben...@compuserve.com> wrote:
> On Oct 23, 10:52 am, rogerts <roge...@google.com> wrote:
>
> > We have added several newcharttypes to thechartAPI.  ...
>
> I would like to request an additionalchart--a variety ofcandlestickchartsuch as is sometimes used tochartthe movements of a stock--

Roger Trias Sanz

unread,
Mar 5, 2009, 6:37:01 AM3/5/09
to Google Chart API
We just noticed that a new library written by Masashi Katsumata has
been uploaded to the Google Maps API Utility Library repository in
code.google.com. It lets you easily use "information bubbles" in a
map, and has a JavaScript interface so you don't need to build URLs
yourselves.

Main directory:
http://gmaps-utility-library.googlecode.com/svn/trunk/popupmarker
Example: http://gmaps-utility-library.googlecode.com/svn/trunk/popupmarker/1.0/examples/chartstylemarker.html

Give it a look :)
--
Google Switzerland GmbH - Identifikationsnummer: CH-020.4.028.116-1

Evan

unread,
Mar 31, 2009, 1:53:44 PM3/31/09
to Google Chart API
Box plots!

Maragues

unread,
Apr 30, 2009, 9:45:29 AM4/30/09
to Google Chart API
I am feeling a bit stupid - I don't manage to place a marker in a map!

http://chart.apis.google.com/chart?chs=440x220&cht=t&chtm=world&chst=d_map_pin_letter&chco=ffffff,ffffff,ff0000&chld=A|FF0000|000000AG&chd=s:f&chf=bg,s,eaf7fe

I'd like to place it in top of Antigua y Barbuda (caribbean island).
I've tried several combinations, but none works. Any help?

Also, I read you expect to extend the number of regions (which is
really needed). Is it something to come soon or still down in the
priority list? Thanks a lot for this great service!
Reply all
Reply to author
Forward
Message has been deleted
0 new messages