chart.draw() , unable to draw chart on a assigned Div; Error: cannot read property 'length' of undefined

I am using following code draw chart in Smarty Template: Code goes as below.

include.tpl:
{include file="header.tpl" jsload = "ajax" jsload1 = "tinymce"}

{include file="tabsmenue-desk.tpl" projectstab = "active"}

    <div id="chart_div" style="width: 700px; height: 600px; border: 2px solid; border-radius:
5px; margin-left: 22px;"></div>
    <p>I am in Smarty template</p>

    <div style="margin-top: 10px;"><a href="index.php">Back to Desktop</a></div>

    {literal}
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
  //  google.load('visualization', '1.1', {'packages': ['controls']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var json = {"cols":[{"label":"Project Name","type":"string"},{"label":"Hours","type":"number"}],"rows":[{"c":[{"v":"Analyze,
Debug and Fix support cases"},{"v":8}]},{"c":[{"v":"Crystal Reports Development and
Fixes"},{"v":2}]},{"c":[{"v":"Database and AWS Maintenance\/Administration"},{"v":32}]},{"c":[{"v":"iOS
Development (TangoRx, Etazo, TRENDZ...)"},{"v":16}]},{"c":[{"v":"LION Web Development,
Bug-fixes and Testing"},{"v":69}]},{"c":[{"v":"Student Web Bug-fixes"},{"v":69}]},{"c":[{"v":"Testing
TDA\/Kentro\/Etazo"},{"v":5}]}]}
         alert(json);
        var  data = new google.visualization.DataTable(json);
          //  document.write(data);

      var options = { title: 'A Employee Project Info for the week', is3D: 'true'};

      //var options = { title: 'Projects Details', hAxis: {title: 'Year', titleTextStyle:
{color: 'red'}}, is3D: 'true')};

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

          alert (chart);
      chart.draw(data, options);
          alert ("I am out from javascript");
    }
    </script>

    {/literal}

Thanks!
Chandu

Original issue reported on code.google.com by chanduratkal19 on 2013-02-04 08:13:15

google / google-visualization-issues

chart.draw() , unable to draw chart on a assigned Div; Error: cannot read property 'length' of undefined #1141