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]>
> > .
> > 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}