Question

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?

Charts from grid inside Red line

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>
Was it helpful?

Solution

EDIT :
<div class="row"> <div class="col-sm-6"> <div id="Q9piechart" ></div> </div> <div class="col-sm-6"> <div id="Q10piechart" ></div> </div> </div>

Specify the Width of chart in Options

EDIT : var options = { title: 'My Daily Activities', chartArea:{left:0,top:0,width:"100%",height:"50%"}, width: 320 };

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top