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