Javascript 'objet attendu' lorsque vous travaillez avec Google Visualization API

Question

Salut tout le monde, donc je travaille sur la création d'une petite classe pour m'aider à travailler avec l'API de visualisation de Google. Vous pouvez voir comment cela fonctionne ici ...

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

est ici la mise en œuvre de Google.

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}); 

Voici la classe avec laquelle j'ai des problèmes. La classe rend l'ajout de données au graphique un peu plus facile et mieux pour ce que j'essaie de faire. Fondamentalement, au lieu de faire des colonnes avec un tas de valeurs indéfinies, la classe le fait pour vous, et vous n'avez pas besoin de garder trace de l'emplacement/valeur de chaque colonne.

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<place; i++) 
     { 
      column[i] = undefined; 
     } 

     for (var i = place + 1; i<dataTable.getNumberOfColumns(); i++) 
     { 
      column[i] = undefined; 
     } 

     var next = this.graphData.length; 
     this.graphData[next] = column; 
     data.addRows(graphData); 

    } 


} 

Et puis ce code peut être utilisé pour faire la même chose avec moins de quantité de code. Fonction printGraph() { var data = new google.visualization.DataTable();

 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}); 

}

Avec ce corps HTML

<input type="button" onclick="printGraph()" value="Draw Graph"> 
<div id='chart_div' style='width: 800px; height: 350px;'></div> 

La question: Je reçois un "objet prévu" erreur sur la ligne gm.addSet (titre). Fondamentalement, je ne suis pas capable d'utiliser la classe GraphManager. Qu'est-ce que je fais mal ici?

Answer 1

Ok, j'ai compris le problème. Fondamentalement, j'avais omis un tas de "this" déclarations, et quand j'ai créé une nouvelle date, j'ai utilisé un crochet au lieu d'une parenthèse. J'ai également réalisé que lorsque j'ajoutais un nouvel ensemble de données, je devais passer par les anciennes données pour ajouter les colonnes vides. Voici le code terminé si quelqu'un est intéressé ... C'est très utile si vous ajoutez des données à des dates différentes ou si vous ne savez pas combien de jeux de données vous aurez.

function GraphManager(adataTable) 
{ 
    this.graphData = new Array(); 
    this.dataTable = adataTable; 

    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 pointsCount = this.graphData.length; 
     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); 

     var newCount = this.dataTable.getNumberOfColumns(); 



     for (var i = 0; i<pointsCount; i++) 
     { 
      for (var j=place; j<newCount; j++) 
      { 
       this.graphData[i][j] = undefined; 
      } 


     } 

    } 

    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 = this.titleFinder[title]; //get the location 

     var column = new Array(this.dataTable.getNumberOfColumns()); 
     column[0] = date; 
     column[place] = number; 

     for (var i = 1;i<place; i++) 
     { 
      column[i] = undefined; 
     } 

     for (var i = place + 1; i<this.dataTable.getNumberOfColumns(); i++) 
     { 
      column[i] = undefined; 
     } 

     var next = this.graphData.length; 
     this.graphData[next] = column; 
     this.dataTable.addRows(this.graphData); 

    } 


} 

Et son aussi facile à utiliser comme ceci:

 var data = new google.visualization.DataTable(); 
    var gm = new GraphManager(data); 

    var title = "testcategory"; 
    var title2 = "cat"; 

    gm.addSet(title); 
    gm.addPoint(title, new Date(2010, 5, 10), 100); 
    gm.addPoint(title, new Date(2010, 6, 10), 200); 
    gm.addPoint(title, new Date(2010, 2, 10), 300); 


    gm.addSet(title2); 
    gm.addPoint(title2, new Date(2010, 6, 10), 100); 
    gm.addPoint(title2, new Date(2010, 2, 10), 500); 

    var chart = newgoogle.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); 
    chart.draw(gm.dataTable, {displayAnnotations: true}); 

Answer 2

N'est-ce pas supposé être "dataTable" au lieu de "tableData"?

for (var i = place + 1; i<tableData.count; i++) 
{ 
    column[i] = undefined; 
} 

Answer 3

Je ne sais pas, comme par:

http://code.google.com/apis/visualization/documentation/reference.html#DataTable 

compte est pas un attribut, mais je vois que vous y faire référence de nombreux endroits dans votre code:

var column = new Array(dataTable.count) 

Il est dataTable.getNumberOfColumns() cependant