Since you say you are using tabs, and the sizing is wrong, this is most likely due to Google Charts not being able to draw the chart correctly if it is not visible when you do the draw. If that is the case, there are a few solutions which all amount to drawing the chart only when it becomes visible, or using style visibility:hidden while drawing and later changing it to visibility:visible. Using display:none doesn't work, however.
If that doesn't work, write again, and if you can include a link to a page that shows the problem, that will make it much easier to figure out where the problem is. On Thu, Oct 30, 2014 at 3:50 PM, G Z <[email protected]> wrote: > > <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 [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/google-chart-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-chart-api. For more options, visit https://groups.google.com/d/optout.
