Sorry, this code is completely broken and with missing parts. Please send out a running code snippet so that I can help you work on the map stuff.
On Sun, Dec 19, 2010 at 5:13 PM, Parasound <[email protected]> wrote: > Thanks for your help, > > I m new into this so I dont have a lot of experience. I corrected the > div but the problem still remains. > If I chose to include the map, everything else is covered. I want to > have the map, piechart, table and line chart all in one page. > Can you tell me what i am doing wrong and the map covers everything > else? > > Here is a sample > > > // var newdata = data; > var newdata =new google.visualization.DataTable(); > newdata.addColumn('number', 'a'); > newdata.addColumn('string', 'b'); > newdata.addColumn('string', 'c'); > newdata.addColumn('number', 'd'); > newdata.addColumn('string', 'e'); > newdata.addColumn('string', 'f'); > newdata.addColumn('string', 'g'); > newdata.addColumn('number', 'h'); > newdata.addColumn('number', 'i'); > > //Helping var for pie chart > var viewpie = new google.visualization.DataView(newdata); > > //Helping var for line chart > var viewline= new google.visualization.DataView(newdata); > > //Helping var for google map > var viewmap = new google.visualization.DataView(newdata); > > for (var i = 0; i < data.getNumberOfRows(); i++ ) > { > var row = []; > row [0] = data.getValue(i,0); > row [1] = data.getValue(i,1); > row [2] = data.getValue(i,2); > row [3] = data.getValue(i,3); > row [4] = data.getValue(i,4); > row [5] = data.getValue(i,5); > row [6] = data.getValue(i,6); > row [7] = data.getValue(i,7); > row [8] = data.getValue(i,8); > newdata.addRow(row); > } > > > { > var number_of_dataset =0; > for (var i = 0; i < data.getNumberOfRows(); i++ ) > { > number_of_dataset += data.getValue(i,1); > } > > var options = {}; > options['is3D'] = true; > options['title'] = 'title title'; > options['pieJoinAngle'] = 0; > options['height'] = 600; > options['legendFontSize']=12; > options['legend'] = 'left'; > > > > //Filter the original table to get only the two columns (columns 2 and > 3) using setColumns(): > viewpie.setColumns([2, 3]); > > //Now draw the pie chart using this viewpie as a customized data > table: > > // Create container and draw visualization > var visualization > visualization = new > > google.visualization.PieChart(document.getElementById('visualization_PieChart')); > visualization.draw(viewpie, options); > } > > > { > var options = {}; > options['height'] = 600; > options['legend'] = 'none'; > options['showRowNumber'] =true; > options['axisFontSize'] =12; > > //Filter the original table to get only the two columns (columns 2 and > 3) using setColumns(): > viewline.setColumns([2, 3]); > > //Now draw the line chart using this viewline as a customized data > table: > > // Create container and draw visualization > var visualization > // Create container and draw visualization > var visualization > visualization = new > > google.visualization.LineChart(document.getElementById('visualization_LineChart')); > visualization.draw(viewline, options); > } > > { > var options = {}; > options['allowHtml'] = true; > options['height'] = 600; > options['width'] = '100%'; > options['showRowNumber'] =true; > > // Create container and draw visualization > var visualization > visualization = new > google.visualization.Table(document.getElementById('visualization_Table')); > visualization.draw(newdata , options); > > } > > { > var options = {}; > options['height'] = 600; > options['title'] = 'another title'; > options['enableScrollWheel'] = true; > options['showTip'] = true; > options['useMapTypeControl'] = true; > options['legend'] = 'none'; > options['showRowNumber'] =true; > options['axisFontSize'] =12; > > //Filter the original table to get only the two columns (columns 7 and > 8) using setColumns(): > viewmap.setColumns([7, 8, 2]); > > //Now draw the map using this viewline as a customized data table: > > > // Create container and draw visualization > var visualization > visualization = new > google.visualization.Map(document.getElementById('visualization_Map')); > visualization.draw(viewmap, options); > > } > }; > > </script> > > > <!-- Presentation Content --> > <table > > <tr> > <td style="width: 1080px;" > > <div class=tabs style="height:650px"> > <div id=tab_Table> <a href="#tab_Table">Table</a> > <div id="visualization_Table" style="height:620px"></div> > </div> > <div id=tab_LineChart> <a href="#tab_LineChart">LineChart</a> > <div id="visualization_LineChart" style="height:620px"></div> > </div> > <div id=tab_PieChart> <a href="#tab_PieChart">PieChart</a> > <div id="visualization_PieChart" style="height:620px"><p><img > src="http://data-gov.tw.rpi.edu/images/ajax-loader.gif"; > alt="loading ..."></p></div> > </div> > <div id=tab_Map> <a href="#tab_Map">Map</a> > <div id="visualization_Map" style="height:620px"><p><img src="http:// > data-gov.tw.rpi.edu/images/ajax-loader.gif" alt="loading ..."></p></ > div> > </div> > </td> > </tr> > </table> > > </center></body> > </html> > > > Thanks > > > On 19 Δεκ, 16:43, ChartMan <[email protected]> wrote: > > First, why do you need a <table> > > Second, you are missing a closing div just before closing the td > > > > ChartMan > > > > > > > > > > > > > > > > On Fri, Dec 17, 2010 at 10:06 PM, Parasound <[email protected]> > wrote: > > > Hello there, > > > > > When I use separately piechart and map packages they work fine, but > > > when i combine them, the map one always covers the piechart or any > > > other package that i use. > > > Can this be done? What am i doing wrong? > > > > > Here is a sample of what i use > > > > > var visualization > > > visualization = new > > > google.visualization.Map(document.getElementById('visualization_Map')); > > > visualization.draw(viewmap, options); > > > > > similar for pie chart > > > > > and then > > > > > <table > > > > <tr> > > > <td style="width: 1280px;" > > > > <div class=tabs style="height:650px"> > > > <div id=tab_PieChart> <a href="#tab_PieChart">PieChart</a> > > > <div id="visualization_PieChart" style="height:620px"><p><img > > > src="http://data-gov.tw.rpi.edu/images/ajax-loader.gif"; > > > alt="loading ..."></p></div> > > > </div> > > > <div class=tabs2 style="height:650px"> > > > <div id=tab_Map> <a href="#tab_Map">Map</a> > > > <div id="visualization_Map" style="height:620px"><p><img src="http:// > > > data-gov.tw.rpi.edu/images/ajax-loader.gif" alt="loading ..."></p></ > > > div> > > > </div> > > > </td> > > > </tr> > > > </table> > > > > > -- > > > You received this message because you are subscribed to the Google > Groups > > > "Google Visualization API" group. > > > To post to this group, send email to > > > [email protected]. > > > To unsubscribe from this group, send email to > > > [email protected]<google-visualization-api%[email protected]><google-visualization- > api%[email protected] <api%[email protected]>> > > > . > > > For more options, visit this group at > > >http://groups.google.com/group/google-visualization-api?hl=en. > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]<google-visualization-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
![http://data-gov.tw.rpi.edu/images/ajax-loader.gif"](http://data-gov.tw.rpi.edu/images/ajax-loader.gif"){kind=link}