在JQuery UI Dialog中包含Google可视化时间轴失败

dialog.php which includes jquery ui tabs

<div id="tab2">
 <iframe width="100%" height="80%" src='timeline.php'/>
</div>

timeline.php

$timeline = getData($_dbo, 'somefilter1', 'otherfilter1'); // getData selects data from a DB 

?>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["timeline"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'State' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });

        dataTable.addRows([     
        <?
        $c = 0; $state = array();
        foreach($timeline as $row)
        {
            if(count($state) == 0)
            {
                $state['s'] = $row['CurrentStatus'];
                $state['r'] = $row['Rank'];
                $state['start'] = "new Date(".$row['HYear'].", ".$row['HMonth'].", ".$row['HDay'].")";
            }

            if($row['CurrentStatus'] != $state['s'] || $timeline[$c]['ClosedDate'] != '')
            {
                $date = "new Date(".$row['HYear'].", ".$row['HMonth'].", ".$row['HDay'].")";
                $currentstate = $state['r'].' '.$state['s'];
                ?>
                [ '<?= $currentstate ?>', <?= $state['start'] ?>, <?= $date ?> ]<?
                if ($c < count($timeline) && $timeline[$c]['ClosedDate'] == '' ) echo ",
";

                $state['s'] = $row['CurrentStatus'];
                $state['r'] = $row['Rank'];
                $state['start'] = "new Date(".$row['HYear'].", ".$row['HMonth'].", ".$row['HDay'].")";
            }

            if($timeline[$c]['ClosedDate'] != '') break;            
            $c++;
        }
        ?>      
        ]);


        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px; width:100%;"></div>
  </body>
</html>

My Problem now is, that my Chart is not getting displayed properly and gets cut off one the left side. Sometimes I'm getting an error: "Unable to get property 'log' of undefined or null reference"(i can reproduce that error by randomly closing and re-opening the dialogs and switching tabs).

mytimeline Can you help me find my problem or provide a solution for how to properly include a Google visualization Chart in a modal Dialog?

EDIT: The timeline is working as expected, WITHOUT including it in the Dialog. When i open "timeline.php" in the browser, everything Looks fine. Only got Problems with it in combination with the Dialog or Tabs or maybe both?!

I managed to find a solution to this. So i thought I'm going to answer my own question. I changed my tab content to not include an iframe but a regular div like this:

<div id="tab2"><div id="timelinediv"></div></div>

and i used my JavaScript on the same page, so i didn't have to include it from another page. Maybe not the best readable solution, but it worked for me.