title: Javascript 'object expected' when working with Google Visualization API
body: <p>Hey everyone, so I am working on creating a small class to help me work with the Google visualization API. You can see how it works here...</p>
  
  <p><a href="http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html" rel="nofollow noreferrer">http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html</a></p>
  
  <p>Here is google's implementation.</p>
  
  <pre><code>google.load('visualization', '1', {'packages':['annotatedtimeline']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Sold Pencils');
          data.addColumn('string', 'title1');
          data.addColumn('string', 'text1');
          data.addColumn('number', 'Sold Pens');
          data.addColumn('string', 'title2');
          data.addColumn('string', 'text2');
          data.addRows([
            [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
            [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
            [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
            [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
            [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
            [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
          ]);
  
          var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
          chart.draw(data, {displayAnnotations: true});
  </code></pre>
  
  <p>Here is the class I made that I am having issues with.
  The class makes adding data to the graph a little easier and better for what I am trying to do. Basically, instead of making columns with a bunch of undefined values, the class does it for you, and you don't have to keep track of the location/value of each column.</p>
  
  <pre><code> function GraphManager(dataTable)
   {
       this.graphData = new Array();
       this.dataTable = dataTable;
  
       this.titleFinder = new Object(); // used to keep track of the indices
  
       this.dataTable.addColumn('date', 'Date');
  
       this.addSet = function(title)
       {
  
           var setCount = (this.dataTable.getNumberOfColumns() -1) / 3; //used for the column name
           var place = this.dataTable.getNumberOfColumns(); 
  
           this.titleFinder[title] = place; //the title of the column and its location
  
           this.dataTable.addColumn('number', title);
           this.dataTable.addColumn('string', 'title' + setCount);
           this.dataTable.addColumn('string', 'text' + setCount); 
  
       }
  
       this.addPoint = function(title, date, number)
       {
           //this function finds the location of the category
           //and inserts a column with data at the location
  
  
           var place = titleFinder[title]; //get the location
  
           var column = new Array(dataTable.getNumberOfColumns()); 
           column[0] = date;
           column[place] = number;
  
           for (var i = 0;i&lt;place; i++)
           {
              column[i] = undefined; 
           }
  
           for (var i = place + 1; i&lt;dataTable.getNumberOfColumns(); i++)
           {
               column[i] = undefined;
           }
  
           var next = this.graphData.length;
           this.graphData[next] = column;
           data.addRows(graphData);
  
       }
  
  
   }
  </code></pre>
  
  <p>And then this code can be used to do the same thing with a fewer amount of code.
   function printGraph()
       {
      var data = new google.visualization.DataTable();</p>
  
  <pre><code>     var gm = new GraphManager(data);
       var title = "testcategory";
  
  
       gm.addSet(title);
       gm.addPoint(title, new Date[2010, 5, 10], 100);
       gm.addPoint(title, new Date[2010, 6, 10], 200);
  
  
       var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
       chart.draw(gm.dataTable, {displayAnnotations: true});
  </code></pre>
  
  <p>}</p>
  
  <p>With this HTML body</p>
  
  <pre><code>&lt;input type="button" onclick="printGraph()" value="Draw Graph"&gt;
  &lt;div id='chart_div' style='width: 800px; height: 350px;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The issue: I am getting an "Object expected" error on the line gm.addSet(title). Basically, I am not able to use the class GraphManager. What am I doing wrong here?</p>