I would like to place the charts side by side but they are being rendered one below another . Please suggest how to do this. I don't want to use a Dashboard panel for it.
Can we achieve it by tweaking the HTML tags etc. so that the horizontal place in the screen can be used and less of scrolling vertically .
HTML Code
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1');
google.setOnLoadCallback(drawVisualization);
// Code for Bar chart
function drawVisualization() {
var columnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwbYufmDPjvOT
/edit#gid=0',
//query: 'select * where `Current Value`< 15000',
options: {
'title': 'Kaushik Profile',
legend: { position: 'top' }
},
view:{"columns": [0,1,2]},
containerId: 'col_chart'
});
columnChart.draw()
// Code for Invested pie chart
var investedpieChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAYwVgPvOT1q2P-GQyzQ/edit#gid=0',
options: {
'title': 'Invested Amount', is3D: true},
view:{"columns": [0,1]},
containerId: 'investedpie_chart'
});
investedpieChart.draw()
// Code for Current pie chart
var currentpieChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAufmDPjvOT1q2P-GQyzQ/edit#gid=0',
options: {
'title': 'Invested Amount', is3D: true},
view:{"columns": [0,2]},
containerId: 'currentpie_chart'
});
currentpieChart.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div>
<div id="col_chart" style="width: 500px; height: 600px;"> </div>
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
<div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>
</body>
</html>