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}