title: Google Visualization API. Graphs are not displaying in gsp pages
body: <p>I am developing application with grails.  Below is the list of Program I use.
  - Groovy/Grails Tool Suite   Version: 3.5.1.RELEASE   Platform: Eclipse Kepler SR2 (4.3.2)
  - Grails 2.3.8
  - Java : jdk1.6.0_45</p>
  
  <p>my problem is having installed google visualization plugin by specifying in the BuildConfig.groovy with the code below</p>
  
  <pre><code>plugins {        
      compile ":google-visualization:0.7"
  }
  </code></pre>
  
  <p>and tried the sample below but the chart are not displaying.
  there seems to be no error what so ever. What I suspect is that the application does not recognise the tag .
  anybody has come across this problem, your help would be very much appreciated.</p>
  
  <p>Cheers,</p>
  
  <p>Sura</p>
  
  <pre><code>&lt;%@ page import="org.grails.plugins.google.visualization.data.Cell; org.grails.plugins.google.visualization.util.DateUtil" %&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google Visualization API plugin&lt;/title&gt;
      &lt;meta name="layout" content="main" /&gt;
      &lt;gvisualization:apiImport/&gt;
  &lt;/head&gt;
     &lt;body&gt;
     &lt;%
        def calendarColumns = [['date', 'Date'], ['number', 'Won/Loss']]
        def calendarData = [[DateUtil.createDate(2012, 3, 13), 37032], [DateUtil.createDate(2012, 3, 14), 38024], [DateUtil.createDate(2012, 3, 15), 38024], [DateUtil.createDate(2012, 3, 16), 38108], [DateUtil.createDate(2012, 3, 17), 38229]]
        def timelineColumns = [['string', 'President'], ['date', 'Start'], ['date', 'End']]
        def timelineData = [['Washington',  DateUtil.createDate(1789, 3, 29),  DateUtil.createDate(1797, 2, 3)], ['Adams',  DateUtil.createDate(1797, 2, 3),  DateUtil.createDate(1801, 2, 3)], ['Jefferson',  DateUtil.createDate(1801, 2, 3),  DateUtil.createDate(1809, 2, 3)]]
        def myDailyActivitiesColumns = [['string', 'Task'], ['number', 'Hours per Day']]
        def myDailyActivitiesData = [['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7]]
        def companyPerformanceColumns = [['string', 'Year'], ['number', 'Sales'], ['number', 'Expenses']]
        def companyPerformanceData = [['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540]]
        def yearlyExpensesColumns = [['string', 'Year'], ['number', 'Expenses'], ['number', 'Sales']]
        def yearlyExpensesData = [['2004', 1000, 900], ['2005', 1170, 1000], ['2006', 660, 660], ['2007', 1030, 1000]]
        def weightByAgeColumns = [['number', 'Age'], ['number', 'Weight']]
        def weightByAgeData = [[8, 12], [4, 5.5], [11, 14], [4, 5], [3, 3.5], [6.5, 7]]
        def countByDayColumns = [['string', 'Day'], ['number', ''], ['number', ''], ['number', ''], ['number', '']]
        def countByDayData = [['Mon', 20, 28, 38, 45], ['Tues', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thurs', 50, 77, 66, 77], ['Fri', 15, 66, 22, 68]]
        def monthlyCoffeeProdByCountryColumns = [['string', 'Month'], ['number', 'Bolivia'], ['number', 'Ecuador'], ['number', 'Madagascar'], ['number', 'Papua  Guinea'], ['number', 'Rwanda'], ['number', 'Average']]
        def monthlyCoffeeProdByCountryData = [['2004/05', 165, 938, 522, 998, 450, 614.6], ['2005/06', 135, 1120, 599, 1268, 288, 682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215, 609.4], ['2008/09', 136, 691, 629, 1026, 366, 569.6]]
        def revenueAndLicensesColumns = [['number', 'Revenue'], ['number', 'Licenses']]
        def revenueAndLicensesData = [[435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149]]
        def gainersLoserColumns = [['string', 'Name'], ['number', ''], ['number', ''], ['number', ''], ['number', '']]
        def gainersLoserData = [['Gainers', 10, 30, 45, 60], ['Losers', 20, 35, 25, 45]]
        def systemPerformanceColumns = [['string', 'Label'], ['number', 'Value']]
        def systemPerformanceData = [['Memory', 80], ['CPU', 55], ['Network', 68]]
        def employeeColumns = [['string', 'Name'], ['string', 'Salary'], ['boolean', 'Full Time Employee']]
        def employeeData = [['Mike', '$10,000', true], ['Jim', '$8,000', false], ['Alice', '$12,500', true], ['Bob', '$7,000', true]]
        def mapColumns = [['number', 'Lat'], ['number', 'Lon'], ['string', 'Name']]
        def mapData = [[37.4232, -122.0853, 'Work'], [37.4289, -122.1697, 'University'], [37.6153, -122.3900, 'Airport'], [37.4422, -122.1731, 'Shopping']]
        def pensColumns = [['date', 'Date'], ['number', 'Sold Pencils'], ['string', 'title1'], ['string', 'text1'], ['number', 'Sold Pens'], ['string', 'title2'], ['string', 'text2']]
        def pensData = [[DateUtil.createDate(2008, 1, 1), 30000, null, null, 40645, null, null], [DateUtil.createDate(2008, 1, 2), 14045, null, null, 20374, null, null], [DateUtil.createDate(2008, 1, 3), 55022, null, null, 50766, null, null], [DateUtil.createDate(2008, 1, 4), 75284, null, null, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'], [DateUtil.createDate(2008, 1, 5), 41476, 'Bought Pens','Bought 200k pens', 66467, null, null], [DateUtil.createDate(2008, 1, 6), 33322, null, null, 39463, null, null]]
        def orgColumns = [['string', 'Name'], ['string', 'Manager'], ['string', 'ToolTip']]
        def orgData = [[new Cell(value: 'Mike', label: 'Mike&lt;div style="color:red; font-style:italic"&gt;President&lt;/div&gt;'), '', 'The President'], [new Cell(value: 'Jim', label: 'Jim&lt;div style="color:red; font-style:italic"&gt;Vice President&lt;div&gt;'), 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', '']]
        def populationColumns = [['string', '', 'Country'], ['number', 'Population (mil)', 'a'], ['number', 'Area (km2)', 'b']]
        def populationData = [['CN', 1324, 9640821], ['IN', 1133, 3287263], ['US', 304, 9629091], ['ID', 232, 1904569], ['BR', 187, 8514877]]
        def popularityColumns = [['string', 'Country'], ['number', 'Popularity']]
        def popularityData = [['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700]]
        def fruitColumns = [['string', 'Fruit'], ['date', 'Date'], ['number', 'Sales'], ['number', 'Expenses'], ['string', 'Location']]
        def fruitData = [['Apples', DateUtil.createDate(1988, 0, 1), 1000, 300, 'East'], ['Oranges', DateUtil.createDate(1988, 0, 1), 1150, 200, 'West'], ['Bananas', DateUtil.createDate(1988, 0, 1), 300, 250, 'West'], ['Apples', DateUtil.createDate(1989, 6, 1), 1200, 400, 'East'], ['Oranges', DateUtil.createDate(1989, 6, 1), 750, 150, 'West'], ['Bananas', DateUtil.createDate(1989, 6, 1), 788, 617, 'West']]
        def marketByRegionColumns = [['string', 'Region'], ['string', 'Parent'], ['number', 'Market trade volume (size)'], ['number', 'Market increase/decrease (color)']]
        def marketByRegionData = [['Global', null, 0, 0], ['America', 'Global', 0, 0], ['Europe', 'Global', 0, 0], ['Asia', 'Global', 0, 0], ['Australia', 'Global', 0, 0], ['Africa', 'Global', 0, 0], ['Brazil', 'America', 11, 10], ['USA', 'America', 52, 31], ['Mexico', 'America', 24, 12], ['Canada', 'America', 16, -23], ['France', 'Europe', 42, -11], ['Germany', 'Europe', 31, -2], ['Sweden', 'Europe', 22, -13], ['Italy', 'Europe', 17, 4], ['UK', 'Europe', 21, -5], ['China', 'Asia', 36, 4], ['Japan', 'Asia', 20, -12], ['India', 'Asia', 40, 63], ['Laos', 'Asia', 4, 34], ['Mongolia', 'Asia', 1, -5], ['Israel', 'Asia', 12, 24], ['Iran', 'Asia', 18, 13], ['Pakistan', 'Asia', 11, -52], ['Egypt', 'Africa', 21, 0], ['S. Africa', 'Africa', 30, 43], ['Sudan', 'Africa', 12, 2], ['Congo', 'Africa', 10, 12], ['Zair', 'Africa', 8, 10]]
        def accumulatedRatingColumns = [['string', 'Director (Year)'], ['number', 'Rotten Tomatoes'], ['number', 'IMDB']]
        def accumulatedRatingData = [['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)',6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2]]
        def lifeExpectancyFertilityRateColumns =[['string', 'ID'], ['number', 'Life Expectancy'], ['number', 'Fertility Rate'], ['string', 'Region'], ['number', 'Population']]
        def lifeExpectancyFertilityRateData = [['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000]]
        def candlestickOptions = [hollowIsRising: true]
  
     %&gt;
     &lt;script type="text/javascript"&gt;
        function selectHandler(e) {
            alert('A table row was selected');
        }
  
        function readyHandler(e) {
            console.log('Table is ready');
        }
     &lt;/script&gt;
     &lt;h2&gt;Google Visualization API Examples&lt;/h2&gt;
     &lt;gvisualization:pieCoreChart elementId="piechart" title="My Daily Activities" width="${450}" height="${300}" columns="${myDailyActivitiesColumns}" data="${myDailyActivitiesData}" /&gt;
     &lt;gvisualization:imagePieChart elementId="imagepiechart" width="${430}" height="${240}" title="My Daily Activities" columns="${myDailyActivitiesColumns}" data="${myDailyActivitiesData}" /&gt;
     &lt;gvisualization:barCoreChart elementId="barchart" title="Company Performance" width="${400}" height="${240}" vAxis="${new Expando(title: 'Year', titleColor: 'red')}" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:imageBarChart elementId="imagebarchart" width="${400}" height="${240}" min="${0}" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:bubbleCoreChart elementId="bubblechart" title="Correlation between life expectancy, fertility rate and population of some world countries (2010)" hAxis="${new Expando(title: 'Life Expectancy')}" vAxis="${new Expando(title: 'Fertility Rate')}" bubble="${new Expando(textStyle: '{fontSize: 11}')}" columns="${lifeExpectancyFertilityRateColumns}" data="${lifeExpectancyFertilityRateData}" /&gt;
     &lt;gvisualization:columnCoreChart elementId="columnchart" title="Company Performance" width="${400}" height="${240}" hAxis="${new Expando(title: 'Year', titleColor: 'red')}" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:areaCoreChart elementId="areachart" title="Company Performance" width="${400}" height="${240}" hAxis="${new Expando(title: 'Year', titleColor: 'red')}" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:imageAreaChart elementId="imageareachart" width="${400}" height="${240}" min="${300}" max="${1400}" title="Yearly Expenses and Sales" columns="${yearlyExpensesColumns}" data="${yearlyExpensesData}" /&gt;       
     &lt;gvisualization:lineCoreChart elementId="linechart" width="${400}" height="${240}" title="Company Performance" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:imageLineChart elementId="imagelinechart" width="${400}" height="${240}" min="${0}" columns="${companyPerformanceColumns}" data="${companyPerformanceData}" /&gt;
     &lt;gvisualization:scatterCoreChart elementId="scatterchart" width="${400}" height="${240}" title="Age vs. Weight comparison" hAxis="${new Expando(title: 'Age', minValue: 0, maxValue: 15)}" vAxis="${new Expando(title: 'Weight', minValue: 0, maxValue: 15)}" legend="none" columns="${weightByAgeColumns}" data="${weightByAgeData}" /&gt;
     &lt;gvisualization:steppedAreaCoreChart elementId="steppedareachart" width="${400}" height="${240}" title="The decline of \'The 39 Steps\'" vAxis="${new Expando(title: 'Accumulated Rating')}" isStacked="${true}" columns="${accumulatedRatingColumns}" data="${accumulatedRatingData}" /&gt;
     &lt;gvisualization:candlestickCoreChart elementId="candlestickchart" legend="none" columns="${countByDayColumns}" data="${countByDayData}" candlestick="${new Expando(candlestickOptions)}" /&gt;
     &lt;gvisualization:comboCoreChart elementId="combochart" title="Monthly Coffee Production by Country" vAxis="${new Expando(title: 'Cups')}" hAxis="${new Expando(title: 'Month')}" seriesType="bars" series="${new Expando(5: new Expando(type: 'line'))}" columns="${monthlyCoffeeProdByCountryColumns}" data="${monthlyCoffeeProdByCountryData}" /&gt;
     &lt;gvisualization:imageSparkLine elementId="imagesparkline" width="${120}" height="${40}" showAxisLines="${false}" showValueLabels="${false}" labelPosition="left" columns="${revenueAndLicensesColumns}" data="${revenueAndLicensesData}" /&gt;
     &lt;gvisualization:imageCandlestickChart elementId="imagecandlestickchart" columns="${gainersLoserColumns}" data="${gainersLoserData}" /&gt;
     &lt;gvisualization:gauge elementId="gauge" width="${400}" height="${120}" redFrom="${90}" redTo="${100}" yellowFrom="${75}" yellowTo="${90}" minorTicks="${5}" columns="${systemPerformanceColumns}" data="${systemPerformanceData}" /&gt;
     &lt;gvisualization:table elementId="table" width="${400}" height="${130}" columns="${employeeColumns}" data="${employeeData}" select="selectHandler" ready="readyHandler"/&gt;
     &lt;gvisualization:map elementId="map" columns="${mapColumns}" data="${mapData}" /&gt;
     &lt;gvisualization:annotatedTimeLine elementId="annotatedtimeline" columns="${pensColumns}" data="${pensData}" /&gt;
     &lt;gvisualization:orgChart elementId="orgchart" allowHtml="${true}" columns="${orgColumns}" data="${orgData}" /&gt;
     &lt;gvisualization:intensityMap elementId="intensitymap" columns="${populationColumns}" data="${populationData}" /&gt;
     &lt;gvisualization:geoMap elementId="geomap" columns="${popularityColumns}" data="${popularityData}" /&gt;
     &lt;gvisualization:geoChart elementId="geochart" width="${556}" height="${347}" columns="${popularityColumns}" data="${popularityData}" /&gt;
     &lt;gvisualization:motionChart elementId="motionchart" columns="${fruitColumns}" data="${fruitData}" /&gt;
     &lt;gvisualization:treeMap elementId="treemap" minColor="#f00" midColor="#ddd" maxColor="#0d0" headerHeight="${15}" fontColor="black" showScale="${true}" columns="${marketByRegionColumns}" data="${marketByRegionData}" /&gt;
     &lt;gvisualization:timeLine elementId="timeline" columns="${timelineColumns}" data="${timelineData}" /&gt;
     &lt;gvisualization:calendarChart elementId="calendarchart" columns="${calendarColumns}" data="${calendarData}" /&gt;
     &lt;table cellpadding="2" cellspacing="0"&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/piechart"&gt;Pie Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="piechart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imagepiechart"&gt;Pie Chart (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imagepiechart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/barchart"&gt;Bar Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="barchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imagebarchart"&gt;Bar Chart (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imagebarchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;a href="http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html"&gt;Bubble Chart&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div id="bubblechart" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/columnchart"&gt;Column Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="columnchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/areachart"&gt;Area Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="areachart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imageareachart"&gt;Area Chart (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imageareachart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/linechart"&gt;Line Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="linechart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imagelinechart"&gt;Line Chart (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imagelinechart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/scatterchart"&gt;Scatter Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="scatterchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;tr&gt;
         &lt;td&gt;
             &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/steppedareachart"&gt;Stepped Area Chart&lt;/a&gt;
         &lt;/td&gt;
         &lt;td&gt;
             &lt;div id="steppedareachart"&gt;&lt;/div&gt;
         &lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imagesparkline"&gt;Sparkline (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imagesparkline"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/candlestickchart"&gt;Candlestick Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="candlestickchart" style="width: 300px; height: 300px;"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/imagecandlestickchart"&gt;Candlestick Chart (Image)&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="imagecandlestickchart" style='width: 300px; height: 300px;'&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/combochart"&gt;Combo Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="combochart" style="width: 700px; height: 400px;"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/gauge"&gt;Gauge&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="gauge"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/table"&gt;Table&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="table"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/map"&gt;Map&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="map" style="width: 400px; height: 300px"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline"&gt;Annotated Time Line&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="annotatedtimeline" style='width: 700px; height: 240px;'&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/orgchart"&gt;Organizational Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="orgchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/intensitymap"&gt;Intensity Map&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="intensitymap"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/geomap"&gt;Geo Map&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="geomap"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/geochart"&gt;Geo Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="geochart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/motionchart"&gt;Motion Chart&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="motionchart"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/treemap"&gt;Tree Map&lt;/a&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div id="treemap" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;
                 &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/timeline"&gt;Timeline&lt;/a&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;div id="timeline"&gt;&lt;/div&gt;
             &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;
                 &lt;a href="http://developers.google.com/chart/interactive/docs/gallery/calendar"&gt;Calendar&lt;/a&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;div id="calendarchart"&gt;&lt;/div&gt;
             &lt;/td&gt;
         &lt;/tr&gt;
     &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>