I have an asp.net Web form where I'm using Bootstrap.
Inside the container div, I have 10 piecharts made by the google charts api.
I want to have these charts in two columns, five in each.
It's okay to do this in normal HTML tabel where I set the width and hight like this.
<table>
<tr>
<td>
<div id="Q7piechart" style="width: 450px; height: 300px;"/>
</td>
<td>
<div id="Q8piechart" style="width: 450px; height: 300px;"/>
</td>
</tr>
</table>
But I want to use Bootstrap grid, so it can be responsive.
I try this:
<div class="row">
<div class="col-lg-6">
<div id="Q9piechart" style="width: 450px; height: 300px;"/>
</div>
<div class="col-lg-6">
<div id="Q10piechart" style="width: 450px; height: 300px;"/>
</div>
</div>
And this
<div class="row">
<div class="col-lg-6">
<div id="Q9piechart" style="width: 70%"/>
</div>
<div class="col-lg-6">
<div id="Q10piechart" style="width: 70%"/>
</div>
</div>
I've also tried the "span6" class for columns.
The container div is about 1170px when I lode the page.
But the charts in the grid is always in the same column.
What I'm I doing wrong?
EDIT
This is how the Javascript looks like (the code who make my chart);
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Svært enig', 'Antall'],
['Enig', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('Q9piechart'));
chart.draw(data, options);
}
</script>