Google Code - Graphic Charts


Google Code - Graphic Charts: 



Google Charts and Diagrams can be generated dynamically and view like a normal images. These Charts/diagrams can be directly embedded into Google Sites or any Site.


Edit your HTML LIVE >>>

Live Html Editor [Larger View] 


Copy and Paste the Following Html:

<img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:600,400&amp;cht=p3&amp;chl=Drupal|Google" alt="Sample chart" />

More Advanced Diagram:
<img src="http://chart.apis.google.com/chart?cht=bvs&amp;chs=200x125&amp;chd=t:10,50,60,80,40&amp;chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE&amp;chbh=20&amp;chds=0,160" alt="Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">

Tips: 

When embedding charts in Google Sites, Don't forget: The <img src="" /> tag and chs=300x300 to give the image a size, when embedding the HTML.

Static Image Maps are now available also without a Google API key.



Chart (Dynamic Image) Example code:


Drupal Vs Google Sites






<img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:600,400&amp;cht=p3&amp;chl=Drupal|Google" 

alt="Sample chart" />

Other 
(Dynamic Image) 
Graphics and Charts Examples:


QR Code - says "Google Sites Vs Drupal".
<img height="120" src="http://chart.apis.google.com/chart?chs=250x150&amp;cht=qr&amp;chl=Google+Sites+Vs+Drupal&amp;choe=UTF-8" style="margin-top:5px;margin-bottom:0px;display:block;margin-right:auto;text-align:left" width="200" />


Annotation marker.

Three lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart

Using the Embed Tag instead of the Image tag may have different results.

Chart URL Embed Example code:

<embed src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Drupal|Google Sites"></embed>

<Iframe> tags do not work for charts on Google sites

Visualization Example:


Chart Code Playground:


For more chart information/chart styles go to Google Code (basic charts) and

Google Charts Playground - Copy the code snippets under the different charts and test them in the Parameters box.

New* Charts Editor Wizard
Google Visualization Playground - More Advanced Animated and Interactive Charts,  Diagrams etc.. using the visualization Api. Google Visualization API - Intensity Map Example (Data source form Google Docs - Spreadsheet)

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue