It doesn't run in IE because you have an errant comma at the end of this line:
['west Bengal', 96, 50, 14, 21], IE really doesn't like commas between the last element of an array and the end of the array, eg: [a, b, c,] I can't replicate the problem with the tooltips. My guess is that you have some CSS on the page that is interfering with the chart's tooltips. On Friday, July 5, 2013 8:37:50 AM UTC-4, siva kumar wrote: > > > > this is my javascript code: > > in IE8 map doesn,t display. > > <html> >>> <head> >>> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> >>> <title>Google Visualization API Sample</title> >>> <script type="text/javascript" src="http://www.google.com/jsapi >>> "></script> >>> <script type="text/javascript"> >>> google.load('visualization', '1.1', { packages: ['geochart'] }); >>> >>> function drawMarkersMap() { >>> var data = google.visualization.arrayToDataTable([ >>> ['Office', 'Total Staff', '# of IT Staff', '# of HR staff', '#of >>> Sales staff'], >>> ['KERALA', 53, 15, -4, -7], >>> ['west Bengal', 96, 50, 14, 21], >>> >>> ]); >>> >>> var options = { >>> region: 'IN', >>> resolution: 'provinces', >>> width: 400, >>> height: 400, >>> colorAxis: { >>> //values: [-1, 0, 1], >>> colors: ['#FF0000'] >>> } >>> }; >>> options['tooltip'] = { isHtml: true }; >>> >>> >>> // create a DataView to transform the data into the format you >>> need >>> var view = new google.visualization.DataView(data); >>> view.setColumns([0, { >>> type: 'number', >>> calc: function (dt, row) { >>> // set the color values based on the 4th column >>> var val = dt.getValue(row, 3); >>> // if positive, return 1 >>> // if negative, return -1 >>> // if 0, return 0 >>> return (val > 0) ? 1 : ((val < 0) ? -1 : 0); >>> } >>> }, { >>> type: 'string', >>> role: 'tooltip', >>> calc: function (dt, row) { >>> // set up the tooltip >>> //alert(dt.getValue(row, 1) + ' 2010:\n' + >>> dt.getValue(row, 2) + ' 2011:\n ' + dt.getValue(row, 3)); >>> return dt.getValue(row, 1) + ' 2010:\n ' + >>> dt.getValue(row, 2) + ' 2011:\n ' + dt.getValue(row, 3); >>> >>> } >>> }]); >>> var geochart = new google.visualization.GeoChart( >>> document.getElementById('visualization')); >>> geochart.draw(view, options); >>> >>> >>> >>> google.visualization.events.addListener(geochart, >>> 'select', function (eventOption) { >>> var item = geochart.getSelection(); >>> var value = data.getValue(item[0].row, 1); >>> alert(value); >>> }); >>> } >>> >>> >>> google.setOnLoadCallback(drawMarkersMap); >>> >>> // function drawVisualization() { >>> // var geoData = new google.visualization.DataTable(); >>> // geoData.addRows(3); >>> // geoData.addColumn('string', 'State'); >>> // geoData.addColumn('number', 'Votes (%)'); >>> >>> // geoData.setValue(0, 0, 'Alabama'); >>> // geoData.setValue(0, 1, 0); >>> // geoData.setFormattedValue(0, 1, '56%'); >>> >>> // geoData.setValue(2, 0, 'Maine'); >>> // geoData.setValue(2, 1, 3); >>> // geoData.setFormattedValue(2, 1, '74%'); >>> >>> // geoData.setValue(1, 0, 'Alaska'); >>> // geoData.setValue(1, 1, 2); >>> // geoData.setFormattedValue(1, 1, '64%'); >>> // var options = {}; >>> // options['region'] = 'US'; >>> // options['resolution'] = 'provinces'; >>> // options['colorAxis'] = { minValue: 0, maxValue: 3, colors: >>> ['#FF0000', '#0000FF','#00FF00'] }; >>> // options['backgroundColor'] = '#FFFFFF'; >>> // options['datalessRegionColor'] = '#E5E5E5'; >>> // //options['width'] = 556; >>> // //options['height'] = 347; >>> // options['legend'] = 'none'; >>> >>> // var geochart = new google.visualization.GeoChart( >>> // document.getElementById('visualization')); >>> // geochart.draw(geoData, options); >>> // } >>> >>> >>> function drawVisualizations() { >>> var data = new google.visualization.DataTable(); >>> data.addRows(5); >>> data.addColumn('string', 'State'); >>> data.addColumn('number', 'Number'); >>> data.addRow(['virginia', { v: 1, f: ''}]); >>> data.addRow(['Maryland', { v: 1, f: ''}]); >>> data.addRow(['District of Columbia', { v: 1, f: ''}]); >>> data.addRow(['California', { v: 1, f: ''}]); >>> data.addRow(['Texas', { v: 1, f: ''}]); >>> >>> var geochart = new >>> google.visualization.GeoChart(document.getElementById('visualization')); >>> >>> geochart.draw(data, { >>> width: 556, >>> height: 347, >>> region: 'US', >>> resolution: 'provinces', >>> colors: ['red', 'red'] >>> }); >>> } >>> function drawVisualization() { >>> var data = new google.visualization.DataTable(); >>> data.addRows(24); >>> data.addColumn('string', 'Country'); >>> data.addColumn('number', 'Inability to heat home'); >>> data.setValue(0, 0, 'Austria'); >>> data.setValue(0, 1, 5); >>> data.setValue(1, 0, 'Belgium'); >>> data.setValue(1, 1, 7); >>> data.setValue(2, 0, 'Bulgaria'); >>> data.setValue(2, 1, 32); >>> data.setValue(3, 0, 'Cyprus'); >>> data.setValue(3, 1, 31); >>> data.setValue(4, 0, 'Czech Republic'); >>> data.setValue(4, 1, 7); >>> data.setValue(5, 0, 'Estonia'); >>> data.setValue(5, 1, 1); >>> data.setValue(6, 0, 'Finland'); >>> data.setValue(6, 1, 2); >>> data.setValue(7, 0, 'Germany'); >>> data.setValue(7, 1, 7); >>> data.setValue(8, 0, 'india'); >>> data.setValue(8, 1, 16); >>> data.setValue(9, 0, 'Hungary'); >>> data.setValue(9, 1, 11); >>> data.setValue(10, 0, 'Ireland'); >>> data.setValue(10, 1, 4); >>> data.setValue(11, 0, 'Italy'); >>> data.setValue(11, 1, 11); >>> data.setValue(12, 0, 'Latvia'); >>> data.setValue(12, 1, 19); >>> data.setValue(13, 0, 'Lithuania'); >>> data.setValue(13, 1, 25); >>> data.setValue(14, 0, 'Luxembourg'); >>> data.setValue(14, 1, 1); >>> data.setValue(15, 0, 'Netherlands'); >>> data.setValue(15, 1, 2); >>> data.setValue(16, 0, 'Poland'); >>> data.setValue(16, 1, 22); >>> data.setValue(17, 0, 'Portugal'); >>> data.setValue(17, 1, 35); >>> data.setValue(18, 0, 'Romania'); >>> data.setValue(18, 1, 26); >>> data.setValue(19, 0, 'Slovakia'); >>> data.setValue(19, 1, 6); >>> data.setValue(20, 0, 'Slovenia'); >>> data.setValue(20, 1, 7); >>> data.setValue(21, 0, 'Spain'); >>> data.setValue(21, 1, 5); >>> data.setValue(22, 0, 'Sweden'); >>> data.setValue(22, 1, 2); >>> data.setValue(23, 0, 'United Kingdom'); >>> data.setValue(23, 1, 6); >>> >>> var options = {}; >>> options['colorAxis'] = { minValue: 0, maxValue:40, >>> colors: ['#FF0000', '#0000FF','#00FF00'] }; >>> options['backgroundColor'] = '#FFFFFF'; >>> options['datalessRegionColor'] = '#E5E5E5'; >>> //options['width'] = 556; >>> //options['height'] = 347; >>> options['legend'] = 'none'; >>> var geochart = new google.visualization.GeoChart( >>> document.getElementById('visualization')); >>> geochart.draw(data, options); >>> } >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> function drawChart() { >>> var dataTable = new google.visualization.DataTable(); >>> dataTable.addColumn('string', 'Country'); >>> // Use custom HTML content for the domain tooltip. >>> dataTable.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': >>> { 'html': true} }); >>> dataTable.addColumn('number', 'Gold'); >>> dataTable.addColumn('number', 'Silver'); >>> dataTable.addColumn('number', 'Bronze'); >>> >>> dataTable.addRows([ >>> ['USA', createCustomHTMLContent(' >>> http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', >>> 46, 29, 29), 46, 29, 29], >>> ['China', createCustomHTMLContent(' >>> http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', >>> >>> 38, 27, 23), 38, 27, 23], >>> ['UK', createCustomHTMLContent(' >>> http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', >>> >>> 29, 17, 19), 29, 17, 19] >>> ]); >>> >>> var options = { >>> title: 'London Olympics Medals', >>> colors: ['#FFD700', '#C0C0C0', '#8C7853'], >>> // This line makes the entire category's tooltip active. >>> focusTarget: 'category', >>> // Use an HTML tooltip. >>> tooltip: { isHtml: true } >>> }; >>> >>> // Create and draw the visualization. >>> new >>> google.visualization.ColumnChart(document.getElementById('visualization')).draw(dataTable, >>> >>> options); >>> } >>> >>> function createCustomHTMLContent(flagURL, totalGold, totalSilver, >>> totalBronze) { >>> return '<div style="padding:5px 5px 5px 5px;">' + >>> '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' + >>> '<table id="medals_layout">' + '<tr>' + >>> '<td><img src=" >>> http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg"; >>> style="width:25px;height:25px"/></td>' + >>> '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' + >>> '<td><img src=" >>> http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg"; >>> style="width:25px;height:25px"/></td>' + >>> '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' + >>> '<td><img src=" >>> http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg"; >>> style="width:25px;height:25px"/></td>' + >>> '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + >>> '</div>'; >>> } >>> </script> >>> </head> >>> <body style="font-family: Arial;border: 0 none;"> >>> <div id="visualization"></div> >>> </body> >>> </html> >>> >>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
![http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg"](https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg"](https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg"](https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg"){kind=link}