Re: Two separated charts in tabs with the same css(width, height) but differents width's

[asgallant]

This happens because all charts except the one in the first tab are being drawn in hidden divs.  You have two options to solve:

1) draw all charts, and then call the javascript that makes the tabs, or

2) draw charts only when their containing tab is opened

On Friday, August 10, 2012 4:29:59 AM UTC-4, Tim wrote:

Hi there,

i made a tab container with two tabs and one google linechart in every tab. the css for the tabs is width: 100%, height: 400px. The problem now is that the first chart is shown probperly but the second has just a height of 200px and a width of 400px. Now i don't know how to fix the attributes of the second chart.

This problem is the same with more than 2 charts: first ok, 2nd+ not.

Thanks in advance for Your help!

Greetings, Tim

FIRST CHART:

                  google.load("visualization", "1", {packages:["corechart"]});
                  google.setOnLoadCallback(drawChart);
                  function drawChart() {
                    var data = google.visualization.arrayToDataTable(*DATA*);

                    var options = {
                      title: 'Unique Users',
                      width: '100%',
                      height: '400px'
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('chart_uu'));
                    chart.draw(data, options);
                  }
               
SECOND CHART:

                  google.load("visualization", "1", {packages:["corechart"]});
                  google.setOnLoadCallback(drawChart);
                  function drawChart() {
                    var data = google.visualization.arrayToDataTable(*DATA*);

                    var options = {
                      title: 'Page Impressions',
                      width: '100%',
                      height: '400px'
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('chart_pi'));
                    chart.draw(data, options);
                  }