Charting with YUI and MashPoint REST API
Published 09/21 courtesy of Bamboo Solutions CommunityIn this post I will show you how you can use the YUI Charts control with MashPoint REST API to render a chart from list data. In the previous posts we have used the default XHTML representation but when you write AJAX application you most likely don't want this representation. As we said in the initial post MashPoint REST API supports multiple representations JSON being one of them. JSON is a natural format when working with Javascript so in this example we will request that the resources are returned as JSON streams. We will build a chart component using YUI charts. The whole application is rendered client side. The only server side component you need is the latest version (1.2.9) of MashPoint REST API which you can download here. If you have downloaded MashPoint REST API before you must download the latest version since it has some bug fixes for the JSON serializer. We will use a Content Editor Web Part to host our script. We will use the sample that is on Yahoos developer site as a starting point. I won't describe the chart component, you can read all about it here. The first thing we need to do is reference all YUI scripts needed for the charting. We will use the resources hosted on yui.yahooapis.com. <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datatable/datatable-min.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/swf/swf-min.js"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/charts/charts-min.js"/> Next we add some custom styling. <!--begin custom header content for this example--> <style type="text/css"> #chart { width: 500px; height: 350px; margin-bottom: 10px; } .chart_title { display: block; font-size: 1.2em; font-weight: bold; margin-bottom: 0.4em; } </style> <!--end custom header content for this example--> Then comes the script that will render the chart. 1: <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 2: 3: <div id="chart">Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p></div> 4: 5: <script type="text/javascript"> 6: 7: YAHOO.widget.Chart.SWFURL 8: = "http://yui.yahooapis.com/2.8.0r4/build/charts/assets/charts.swf"; 9: 10: //used to format x axis labels 11: YAHOO.example.numberToCurrency = function(value) { 12: return YAHOO.util.Number.format(Number(value), { prefix: "$", thousandsSeparator: "," }); 13: } 14: 15: YAHOO.example.render = function() { 16: var incomeData = new YAHOO.util.DataSource(YAHOO.example.annualIncome); 17: incomeData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 18: incomeData.responseSchema = { fields: ["year", "revenue", "expense", "income"] }; 19: 20: //--- chart 21: var seriesDef = 22: [ 23: { 24: xField: "revenue", 25: displayName: "Revenue" 26: }, 27: { 28: xField: "expense", 29: displayName: "Expense" 30: }, 31: { 32: type: "line", 33: xField: "income", 34: displayName: "Income" 35: } 36: ]; 37: 38: var currencyAxis = new YAHOO.widget.NumericAxis(); 39: currencyAxis.labelFunction = "YAHOO.example.numberToCurrency"; 40: 41: var mychart = new YAHOO.widget.BarChart("chart", incomeData, 42: { 43: series: seriesDef, 44: yField: "year", 45: xAxis: currencyAxis, 46: //only needed for flash player express install 47: expressInstall: "assets/expressinstall.swf" 48: }); 49: } 50: 51: 60: 61: var JSONP = { 62: scriptCounter: 1, 63: callbacks: {}, 64: request: function(fullUrl, callback) { 65: 66: var ix = this.scriptCounter++; 67: var scriptId = 'JscriptId' + ix; 68: 69: var jsonp = "jsonp=" + encodeURIComponent("JSONP.callbacks[" + ix + "]"); 70: if (fullUrl.indexOf("?") != -1) { 71: jsonp = "&" + jsonp; 72: } 73: else { 74: jsonp = "?" + jsonp; 75: } 76: 77: this.buildScriptTag(scriptId, fullUrl + jsonp); 78: var captured = this; 79: this.callbacks[ix] = function(d) { 80: callback(d); 81: var s = document.getElementById(scriptId); 82: s.parentNode.removeChild(s); 83: captured.callbacks[ix] = null; 84: } 85: }, 86: buildScriptTag: function(scriptId, fullUrl) { 87: // Keep IE from caching requests 88: var noCacheIE = '&noCacheIE=' + (new Date()).getTime(); 89: var s = document.createElement("script"); 90: 91: // Add script object attributes 92: s.setAttribute("type", "text/javascript"); 93: s.setAttribute("src", fullUrl + noCacheIE); 94: s.setAttribute("id", scriptId); 95: 96: var headLoc = document.getElementsByTagName("head").item(0); 97: headLoc.appendChild(s); 98: } 99: }; 100: 101: YAHOO.example.makeRequest = function() { 104: var uri = "http://jndtvbx64/mashpoint/1/$json$/Lists/Financial/AllItems.aspx/$Items$"; 105: JSONP.request(uri, function(d) { 106: YAHOO.example.annualIncome = d.d; 107: YAHOO.example.render(); 108: }); 109: } 110: 111: //manipulating the DOM causes problems in ie, so create after window fires "load" 112: YAHOO.util.Event.addListener(window, "load", YAHOO.example.makeRequest); 113: 114: </script> 115: <!--END SOURCE CODE FOR EXAMPLE =============================== --> In the Yahoo sample they are using inline JSON data. var annualIncome = [ { year: 2003, revenue: 1246852, expense: 1123359, income: 123493 }, { year: 2004, revenue: 2451876, expense: 2084952, income: 366920 }, { year: 2005, revenue: 2917246, expense: 2587151, income: 330095 }, { year: 2006, revenue: 3318185, expense: 3087456, income: 230729 } ]; In our sample we will read this data from a SharePoint list using the MashPoint REST API. So let's create a list called Financial with the fields year, revenue, expense and income. You can download a list template with this sample data here. Now what we have to do is to get all the items from this view as JSON data. The URI to this resource is as follows: http://jndtvbx64/mashpoint/1/$json$/Lists/Financial/AllItems.aspx/$Items$ Let's look at the parts of this URI. What is new here is the $json$ token in the URI. This token can be used to specify the Accept-Type when the client can't modify the Http Headers. The next thing that might confuse you is the access of a property named $Items$. As you know there is no such property on the SPView object. But MashPoint has the ability to add pseudo properties to objects. The reason we have the $Items$ property on the view is so we can access the items of a view. And we don't want the SPListItem back but an object that has all fields of the item as it's properties. Let's take a look at the returned data. As you can see we get back an array of objects. The object represent an item in the list with properties corresponding to the fields of the view we queried. 1: { 2: "d": [ 3: 4: { 5: "__metadata": { 6: "uri": "http://jndtvbx64/mashpoint/1/$json$/Lists/Financial/AllItems.aspx/$Items$/1", 7: "type": "Bamboo.Rest.Mappers.SharePoint.Extensions.Item" 8: }, 9: "Attachments": false, 10: "expense": 1123359, 11: "income": 1123493, 12: "LinkTitle": "2003", 13: "revenue": 1246852, 14: "year": 2003 15: }, 16: { 17: "__metadata": { 18: "uri": "http://jndtvbx64/mashpoint/1/$json$/Lists/Financial/AllItems.aspx/$Items$/2", 19: "type": "Bamboo.Rest.Mappers.SharePoint.Extensions.Item" 20: }, 21: "Attachments": false, 22: "expense": 1123359, 23: "income": 1123493, 24: "LinkTitle": "2004", 25: "revenue": 1246852, 26: "year": 2004 27: } 28: ] 29: } So this is the data we are going to bind to the chart. Let's look at the code that makes the call to MashPoint. 1: YAHOO.example.makeRequest = function() { 2: var uri = "http://jndtvbx64/mashpoint/1/$json$/Lists/Financial/AllItems.aspx/$Items$"; 3: JSONP.request(uri, function(d) { 4: YAHOO.example.annualIncome = d.d; 5: YAHOO.example.render(); 6: }); 7: } In this sample we use JSONP to get the data from MashPoint. We have a helper object called JSONP that handles the construction of the correct uri all we have to call it with is the uri without jsonp extension and a callback method. JSONP takes care of the rest. Below is the code for JSONP. 1: var JSONP = { 2: scriptCounter: 1, 3: callbacks: {}, 4: request: function(fullUrl, callback) { 5: 6: var ix = this.scriptCounter++; 7: var scriptId = 'JscriptId' + ix; 8: 9: var jsonp = "jsonp=" + encodeURIComponent("JSONP.callbacks[" + ix + "]"); 10: if (fullUrl.indexOf("?") != -1) { 11: jsonp = "&" + jsonp; 12: } 13: else { 14: jsonp = "?" + jsonp; 15: } 16: 17: this.buildScriptTag(scriptId, fullUrl + jsonp); 18: var captured = this; 19: this.callbacks[ix] = function(d) { 20: callback(d); 21: var s = document.getElementById(scriptId); 22: s.parentNode.removeChild(s); 23: captured.callbacks[ix] = null; 24: } 25: }, 26: buildScriptTag: function(scriptId, fullUrl) { 27: // Keep IE from caching requests 28: var noCacheIE = '&noCacheIE=' + (new Date()).getTime(); 29: var s = document.createElement("script"); 30: 31: // Add script object attributes 32: s.setAttribute("type", "text/javascript"); 33: s.setAttribute("src", fullUrl + noCacheIE); 34: s.setAttribute("id", scriptId); 35: 36: var headLoc = document.getElementsByTagName("head").item(0); 37: headLoc.appendChild(s); 38: } 39: }; So let's put all this together by adding a CEWP to the AllItems.aspx page and paste in the Javascript. You can download the complete script here and just modify the URI to match your list. Open the page in edit mode. Add the CEWP. Open the toolpane and click Source Editor. Then paste in the script. Clicking OK should give you a page like this. I hope you appreciate how easy it is to get SharePoint data in JSON format using the MashPoint REST API.
Recent SharePoint Questions
- Customize "Send To" menu in Sharepoint 2007
- Site is opening only on Server but not on other clients. How to fix this?
- Handy & Free of Charge SharePoint Tools
- One Document - two sites
- What is the difference between a document library and a form library?
- What is Collaborative Application Markup Language?
- • What is the difference between SharePoint Portal Server and Windows SharePoint Services?
- Why should you use SharePoint?
- Displaying columns
- Best way to apply permission and access
more sharepoint questions
More Articles By
Develop Mobile Applications for SharePoint with Mobile Entree - CMSWire
Develop Mobile Applications for SharePoint with Mobile Entree
CMSWire, CA
By Barb Mosher | Jun 5, 2009 Seeing as how SharePoint (news, site) is so widely used within the enterprise today, it's…
Bamboos Year in Review: Marc OBrien Introduces the Bamboo Online Applications Division
Editor's note: Last year we introduced the Bamboo Year in Review feature, kicking off with a note
While writing the final sentences of my post on how to create a SharePoint blog last week, I realized that I needed to circle back and spend some time… Mobile Entrée is installed as a SharePoint solution and is deployed as a series of features.
Top News Stories Make your plans now to attend the Best Practices Conference this August 24-26 in Washington, D.C. to ensure that you don't miss out on sessions presented by some…Working with the Admin Links on your SharePoint Blog
More Articles Under "News from Around the Web"
Guest Blog by H3 Solutions Jason Hall - Mobile Entrée, Taking a Look Under the Hood
SharePoint on Your SmartPhone, Android Moves to Laptops, Best Practices Conference Speakers List
Google Wave - A Developer's Eye View (The Register)
Last week, Google announced Wave, a…Announcing the Best Practices Conference Speakers List!
Most Viewed Content
