Part 3 – Create the chart

In the first two posts, we created our lists and set up our development environment. In this part, we will use jQuery to query the Site Map list and create the Site Map hierarchy. If you haven’t completed the steps outlined in the first two parts, you should do that now. Links to the other posts in the series can be found at the end of this article.

Drawing Boxes

The first thing we are going to do is query our Site Map list and grab all of the list items. We will put all of the code in the document.ready block that we already prepared.

Copy and paste the following snippet of code into the page.

$().SPServices(
{
    operation: 'GetListItems',
    listName: 'Site Map',
    async: false,
    CAMLViewFields: '',
    CAMLQuery: '',
    completefunc: function(xData,Status){}
});

This snippet directs SPServices to use the GetListItems web service and query the list named, Site Map. It specifies that we want to see the following fields: Title, Parent and ID. It also says that we want to Order our data by Parent in ascending order. When we receive the return data, we want to pass that data, xData, to a function for further processing.

For more information on CAML and its syntax, you can find a great reference at http://msdn.microsoft.com/en-us/library/ms462365.aspx.

So far, our code doesn’t really do anything except fetch the data from our list. We need to parse the results and then format it so that the Google charting API can understand it. We will do this in the function(xData, Status){} block. Copy and paste the following snippet.

	//initialize variables
    var curParent='0';
    var testParent;
    var curTitle='';
    var curId='0';
    var parentId;
    var boxContent='';
    // create a new DataTable object that we will pass to the Google API
    var	data = new google.visualization.DataTable();
    // add the following columns to the DataTable to store the chart values.
    data.addColumn('string','Name');
    data.addColumn('string','Parent');
    data.addColumn('string','Tooltip');
    // SPSServices return the response data in the xData object.  It contains
    // the response in an XML document.  We can then use jQuery to find each
    // row of data in the XML file and act on it.
    $(xData.responseXML).find('[nodeName="z:row"]').each(function(){
        // if this node does not have a parent, then we need to save it to the DataTable
        // differently than the nodes with parents.
        if($(this).attr('ows_Parent')==null)
        {
	    curParent = $(this).attr('ows_ID');
	    curTitle = $(this).attr('ows_Title');
	    boxContent=curTitle;

            //   note the first field in the DataTable. the v:curParent and the
            //   f:boxContent are in the Name field.  The v: represents the Value
            //   while the f: represents the display field.  It may look like we're
            //   saving 4 values to a 3 field table but the first field has a
            //   value and display name part to it.

	    data.addRow([{v:curParent, f:boxContent},'',curTitle]);
        }
        else
        {
	    testParent = $(this).attr('ows_Parent');
	    curTitle = $(this).attr('ows_Title');
	    parentId = testParent.split(';#')[0];
	    curId = $(this).attr('ows_ID');
	    boxContent=curTitle;
	    if(parentId !=curParent)
	        curParent=parentId ;
	        data.addRow([{v:curId, f:boxContent},curParent,curTitle]);
	 }
    });

    // now send it to the Google Visualization API and store the results in 'chart'
    var chart = new google.visualization.OrgChart(document.getElementById('sitemap'));
    // render the HTML of the chart.
    chart.draw(data,{allowHtml:true});

If everything worked right, you should now have an OrgChart based on the values you placed in the Site Map list resembling Figure 1.

That’s promising! This is where it starts getting fun! In the next post, I’ll show you how to get the content for the individual boxes!

---

Other posts in this series:

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion