When using Multiple Charts, Charts not sizing correctly, Also using Django.

[G Z]

<https://lh5.googleusercontent.com/-XU_uO8ZP2cU/VFKWZDs6KSI/AAAAAAAAg0k/6tADbZtoLI8/s1600/Selection_011.png>

<https://lh4.googleusercontent.com/-fxnLJTjAFO0/VFKWUnavQGI/AAAAAAAAg0c/a0_cR1iUNVM/s1600/Selection_010.png>
*What:*
    I'm using Django to pass chart values from vm analytics to charts. I 
need to display multiple charts on the same page. Currently they are set up 
under tabs. I recently added the second chart but it is not sizing 
correctly. For some reason the second chart remains small no matter what I 
have the sizing set too.

Also I know there is a django plugin and python plugin but I don't want to 
use them, I specifically want to use the javascript. I have my reasons.



*CSS*

.chart{
    width:100%;
    height:600px;
}




*JS:*

    <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([
          ['Dates', 'CPU Usage %'],
          
          {% for value in cpu_chart %}
              ['{{value.0}}',{{value.1}}],
          {%endfor%}
          
        ]);
        var options = {
          title: 'CPU Percent Usage: {{date_range_string}}',
          hAxis: { textPosition: 'none', color: {color:"#CCCCCC"}},
          vAxis: { color: {color:"#000"}}
        };
        
        var chart = new google.visualization.LineChart(document.
getElementById('cpu_chart'));
        chart.draw(data, options);
      }
    </script>

    <script type="text/javascript">
     
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      
      function drawChart() {
        var data_memory = google.visualization.arrayToDataTable([
          ['Dates', 'Consumed', 'Swapped'],
          
          {% for value in memory_chart %}
              ['{{value.0}}',{{value.1}},{{value.2}}],
          {%endfor%}
          
        ]);
        var options_memory = {
          title: 'Memory Usage: {{date_range_string}}',
          hAxis: { textPosition: 'none', color: {color:"#CCCCCC"}},
          vAxis: { color: {color:"#000"}}
        };
        
        var mem_chart = new google.visualization.LineChart(document.
getElementById('memory_chart'));
        mem_chart.draw(data_memory, options_memory);
      }
    </script>




*The HTML*

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#cpu" role="tab" 
data-toggle="tab">CPU</a></li>
  <li role="presentation"><a href="#memory" role="tab" data-toggle="tab">
Memory</a></li>
  <li role="presentation"><a href="#network" role="tab" data-toggle="tab">
Network</a></li>
  <li role="presentation"><a href="#iops" role="tab" data-toggle="tab">IOPS
</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="cpu"><div id="cpu_chart" 
class='chart'></div></div>
  <div role="tabpanel" class="tab-pane" id="memory"><div id="memory_chart" 
class='chart'></div></div>
  <div role="tabpanel" class="tab-pane" id="network"><div id="cpu_chart" 
class='chart'></div></div>
  <div role="tabpanel" class="tab-pane" id="iops"><div id="cpu_chart" class=
'chart'></div></div>
</div>


The Python:

               memory_chart.append((date_conv,round(float(stat[4]),2),round(
float(stat[8]),2)))
               cpu_chart.append((date_conv,round(float(stat[3]),2)))




-- 
You received this message because you are subscribed to the Google Groups 
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-chart-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-chart-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.