Adding a Dynamic List of Datasets to Your Webpage

Screen_shot_2011-01-15_at_7.42.22_AM.png

To make it easier to share datasets from insight we have added some custom Javascript code that you can add a dynamic dataset list to your own webpage. The list is based off of Insight's RSS feed, so it will update automatically as datasets are added and edited. If you feel comfortable adding and editing javascript to your website, you are welcome to use the code below and customize it to your needs.

Implementation

To get your own dataset list copy the following javascript code to between the <HEAD> tags of your webpage.

<script src="http://www.google.com/jsapi?key=[YOUR KEY GOES HERE] type="text/javascript"></script>
<script type="text/javascript">

google.load("feeds", "1");

function getXML(result) {
   if (!result.error) {
      x = result.xmlDocument.getElementsByTagName('item');

      //get results          
      var keyArray = getFromRSS(x, "", "media:keywords"); 
      var categoryArray = getFromRSS(x, "", "atom:category", "label"); 
      var authorArray = getFromRSS(x, "", "atom:name"); 

      //namespaced calls for Chrome and Safari
      if (getArraySize(keyArray) == 0) {
          keyArray = getFromRSS(x, "http://search.yahoo.com/mrss/", "keywords");
      }          
      if (getArraySize(categoryArray) == 0) {             
          categoryArray = getFromRSS(x, "http://www.w3.org/2005/Atom", "category", 'label');  
      }
      if (getArraySize(authorArray) == 0) {
          authorArray = getFromRSS(x,"http://www.w3.org/2005/Atom", "name");
      }

      //print
      var container = document.getElementById("content");
      container.innerHTML = '';

      var output = "";
      output += printResults("Classification", categoryArray); 
      output += printResults("Keyword", keyArray);
      output += printResults("Author", authorArray);

      var div = document.createElement("div");
      div.innerHTML = output;
      container.appendChild(div);

   }
   else return null;
}



function OnLoad() {
  var feed = new google.feeds.Feed("[INSIGHT RSS FEED URL GOES HERE]");

  // Request the results in XML
  feed.setResultFormat(google.feeds.Feed.XML_FORMAT);

  feed.includeHistoricalEntries();
  feed.setNumEntries(100);

  // Calling load sends the request off.  It requires a callback function.
  feed.load(getXML);
}

google.setOnLoadCallback(OnLoad);

function getArraySize(sizeArray) {
   var size = 0;
   for (sizeValue in sizeArray ) {
       size++;
   }    
   return size;
}

function getFromRSS(x, ns, tag, label) {

   var myArray = new Array();

   if (!x) return null;

   //Get information from RSS and make links to datasets  
   for (i=0;i<x.length;i++)
   {             
     if (x[i].getElementsByTagName(tag)[0] !== undefined)
     {
       var title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
       var link = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;

       var entry;
       var flag = false;

       if (label) {

         if (ns == "") {
            entries = x[i].getElementsByTagName(tag);
            if (entries[0].hasAttribute(label)) flag = true;
         }
         else {
            entries = x[i].getElementsByTagNameNS(ns, tag);
            if (entries[0].hasAttribute(label)) flag = true;
         }

         if (flag)
         {
           for (j=0;j<entries.length;j++)
           {
              entry = entries[j].getAttribute(label);
              myArray =  makeArray(myArray, link, title, entry);
           }
         }
       }            
       else {
         if (tag == "keywords") {
             //split by comma
             if (ns == "") {
                if (x[i].getElementsByTagName(tag)[0].hasChildNodes()) {
                  flag = true;
                  entry = x[i].getElementsByTagName(tag)[0].firstChild.nodeValue;
                }
             }
             else {
                if (x[i].getElementsByTagNameNS(ns, tag)[0].hasChildNodes()) {
                  flag = true;
                  entry = x[i].getElementsByTagNameNS(ns, tag)[0].firstChild.nodeValue;
                }
             }

             if (flag) {
               var key_array = entry.split();                  
               for(var kw in key_array)
               {
                  myArray =  makeArray(myArray, link, title, key_array[kw]);
               }
             }
         }
         else {
             if (ns == "") {
                 entries = x[i].getElementsByTagName(tag);
                 if (entries[0].hasChildNodes()) flag = true;
             }
             else {
                 entries = x[i].getElementsByTagNameNS(ns, tag);
                 if (entries[0].hasChildNodes()) flag = true;
             }

             if (flag)
             {
                for (j=0;j<entries.length;j++)
                {
                 entry = entries[j].childNodes[0].nodeValue;
                 myArray =  makeArray(myArray, link, title, entry);
                }
             }
         }
       }                   
     }
   }
   return myArray;

}

function printResults (name, array) {
  var to_return = "";
  var last = "";
  var not_first = 0;

  //Print links and datasets to list form organized by name
  to_return += ("<H2>Organized by " + name + ":</H2>");
  to_return += ("<UL>");
  for (var a in array) {       
    if (a != last) {
         if (not_first != 0) {
            to_return += ("</UL>");
         }
         to_return += ("<LI>" + a + " (" + getNumResults(array[a]) + ")");
         to_return += ("<UL>");
    }
to_return += (array[a]);
    last = a;
    not_first = 1;
  }
  to_return += ("</UL></UL>");
  return to_return;
}

//counts results by number of <LI> tags
function getNumResults(entry){
   num = 0
   check = entry.replace(new RegExp("<LI>","g"), "");
   num = (entry.length - check.length)/4;
   return num;
 }


function makeArray(array, link, title, key) {
  if (array[key] !== undefined){
      next = array[key] + "<LI><a href='" + link + 
      "'>" + title + "</a>";
      delete array[key];
      array[key] = next;
  }
  else {
      array[key] = "<LI><a href='" + link + "'>"
      + title + "</a>";
  }
  return array;
}

</script>

Next, add the following line of html code to the body of your webpage wherever you want to print the list.

<div id="content">Loading...</div>

Customization

This implementation uses Google's Feed Reader. You will need to get your own Google API key for the RSS Reader to work. You can generate your own for free here. Just replace the token following ?key on this line:
```
src="http://www.google.com/jsapi?key=[YOUR KEY GOES HERE]"
```
You can also customize the maximum number of results you want to get from the feed reader. Just replace the number in the line with the max number you want to get.
```
feed.setNumEntries(10);
```
To display the RSS content from Insight, just replace the URL below with the URL of the RSS feed you want to use. You can get this by copying the URL link on any one of the many RSS icons throughout Insight.
```
var feed = new google.feeds.Feed("[INSIGHT RSS FEED URL GOES HERE]");
```

You can see an example of this code here.

Recent Discussions

	26 Apr, 2012 05:46 PM	Updating web linked datasets
	18 Apr, 2012 01:25 AM	Upload woes
	30 Mar, 2012 01:57 PM	Cannot view all data
	05 Jun, 2011 06:58 PM	unable to change viz 'Style' (color, size, shape, etc.)
	14 Sep, 2010 03:51 PM	Expected number of fields

Recent Articles

	Adding Custom Google Charts to a Balloon
	Scatter plots
	Line charts
	Bar charts
	Pie charts

Rhiza Labs Support

Adding a Dynamic List of Datasets to Your Webpage

Getting Started with Rhiza Insight

Importing/Managing Data

Making Maps

Publishing Snapshots

Questions About Rhiza Support

Linking To and From Insight

Release notes

Making Charts

Recent Discussions

Recent Articles