Search code examples
javascriptjsongoogle-mapsgoogle-visualization

Uncaught error: Invalid type for google table column


I recently started using google visualization due to its simplicity. But while implementing in my recent project i seem to have run into a bit of trouble. The program shown is used to pull data from a JSON object and utilize it to display data in the google tables. Now as seen i have provided only a single entry in the json object to maintain simplicity. Now to the problem The first table used to work fine for a while , and recently completely stopped appearing. . Neither tables seem to appear or are displayed. The error i get in the console is the following -

Uncaught Error: Invalid type, String, for column "sitecode". in the file - http://www.google.com/uds/api/visualization/1.0/abbdd6ab2d343a51d49841bf93d022fb/format+en,default+en,ui+en,table+en.I.js

The second table on the other hand does not throw errors and does not show. Also i am making the table such that only the three most recent dates of the sitecode will be displayed in the table. But i think i may have done something wrong there. Since it never worked from the beginning. Now i cant seem to make any sense of this .Can someone point me in the right direction. thanks.

Code -

 google.load('visualization', '1', {'packages':['table']});
    var SiteData = SiteInfo();
    var map;
    function initialize() 
    {  
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(55.7200,12.5700),
    zoom: 2,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
      });
  for(m=0;m<SiteData.length;m++)
  {
    var image;
    if(SiteData[m].Connection=="Sitetype1")
    {
      image = "http://labs.google.com/ridefinder/images/mm_20_white.png";  
    }
    else if(SiteData[m].Connection=="sitetype2")
    {
      image = "http://labs.google.com/ridefinder/images/mm_20_black.png";
    }
    else
    {
        image = "http://labs.google.com/ridefinder/images/mm_20_purple.png";
    }
    setmarkers(map,SiteData[m].Latitude,SiteData[m].Longitude,image)
  }
}
function setmarkers(map,lat,lon,image)
{
    var latlon = new google.maps.LatLng(lat,lon);
    var marker = new google.maps.Marker({map:map,position:latlon,icon:image});
}
function Changesite(sc)
{   
    var mpls = Outage();
    for(var i=0,numSite = SiteData.length;i<numSite;i++)
    {
        if(SiteData[i].Sitecode==sc)
        {
            var data = new google.visualization.DataTable();
            data.addColumn('String', 'sitecode');
            data.addColumn('String', SiteData[i].Sitecode);
            data.addRows([
              ['Connection', SiteData[i].Connection],
              ['Bandwidth', SiteData[i].Bandwidth],
              ['Address', SiteData[i].Address],
              ['Country', SiteData[i].Country],
                 ]);
            var chart = new google.visualization.Table

(document.getElementById('chart'));
            var options = {
                    'title': SiteData[i].Sitecode+ ' ',
                             };
            chart.draw(data, options);
      }
    }
    var data1 = new google.visualization.DataTable();
    data1.addColumn('String','Country');
    data1.addColumn('String','Sitecode');
    data1.addColumn('String','Outages');
    data1.addColumn('Date','Date');
    var c=0,k=0;
    mpls.sort(function(a,b){
    var c = new Date(a.date);
    var d = new Date(b.date);
    return c-d;
      });
    while(k!=3&&c<mpls.length)
    {
        if(mpls[c].SITECODE==sc)
        {
            data1.addRows(1);
            data1.setCell(k,0,mpls[i].COUNTRY);
            data1.setCell(k,1,mpls[i].SITECODE);
            data1.setCell(k,2,mpls[i].MPLSOutages);
            data1.setCell(k,3,mpls[i].DATE);
            k++;
         }
         c++;
    }
    var table1 = new google.visualization.Table(document.getElementById

('visualization'));
    table1.draw(data1);

}
function SiteInfo()
{
    var Siteinfo = 

[{"Connection":"Direct","Sitecode":"site1","Address":"Usa","Bandwidth":"6 

Mbps","Country":"USA","Latency":"44 ms","Latitude":44,"Longitude":34,"Item 

Type":"Item"}];
return Siteinfo();
}
function Outage()
{
    var Outage_Data= [{"COUNTRY":"USA ","SITECODE":"site1","Outage 

":"Issue1","DATE ":"4/1/2015"}];
    return Outage_Data;
}

Solution

  • You should change your row

    data.addColumn('String', 'sitecode');
    

    to

    data.addColumn('string', 'sitecode');
    

    (non capital "s" in "string"), of course this applies to all of your added columns.

    Javascript is case-sensitive.