Spsmi13 charts

download Spsmi13 charts

of 30

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of Spsmi13 charts

  • 1. Dynamic Charts with JavaScript, HTML5 and SharePoint Derek Gusoff Senior Consultant, Sogeti USA October 5, 2013
  • 2. Your presenter Derek Gusoff Sogeti USA (5 years) http://derekgusoff.wordpress.com @dgusoff www.linkedin.com/in/derekgusoff/
  • 3. A story
  • 4. Why HTML5 Charts? No back-end configuration Dont require admin privileges to deploy Can be heavily customized or not Can be extended Are supported by a wide array of 3rd party tools, many of which are free
  • 5. Agenda The Web, HTML5, JavaScript, and charting technology Technical underpinnings 3rd Party libraries Browser implications Simple demos SharePoint as a data source REST, CSOM, SharePoint Web Services and roll-your own Case study agile development team sites for Enterprise Project Management
  • 6. Out of Scope This is a short (45 minute) talk! Deployment In depth analysis of code
  • 7. HTML5 and graphics technology Scalable Vector Graphics Canvas VML
  • 8. Scalable Vector Graphics (SVG) XML-based markup that is part of HTML5 specification SVG-based markup becomes part of the browsers DOM Performance degrades with very large sets of data Can attach DOM events (onhover, onclick, etc) Can be manipulated in jQuery or any other javaScript Library
  • 9. Browser implications SVG Chrome / Firefox it just works in all cases Internet Explorer supported in version 9 and up IE 8 and lower most 3rd party libraries will detect SVG support and revert to VML output. SharePoint 2010 SharePoint 2010 will render VML output for ALL versions of Internet Explorer
  • 10. HTML5 Canvas Part of HTML5 specification Graphics elements drawn via a JavaScript API Fire and Forget drawn elements do NOT become part of the DOM Can handle high-volumes of data with better performance No interaction from JavaScript must redraw entire graphic Cannot attach event receivers
  • 11. Browser implications HTML5 Canvas Chrome / Firefox it just works in all scenrios Internet Explorer canvas support starts with IE 9 IE 8 and lower no canvas support and no fallback SharePoint 2010: Canvas will not work in Internet Explorer
  • 12. Vector Markup Language (VML) Developed by Microsoft for Microsoft Office (save as HTML) Implemented in IE5,6,7,8 but no other browser Replaced by SVG support with IE9 A necessary evil
  • 13. Popular 3rd party Libraries Canvas Chart.JS rGraph Flot (a jQuery plugin) SVG/VML RaphaelJS Google Charts HighCharts ($$ but includes great documentation and export capability)
  • 14. Third Party libraries in action Link to the library Declare an element (either or
    (for SVG)) Create and populate an array of JavaScript objects to store your data Create an options object Make an API call with your options object, data, and container
  • 15. DEMO - Canvas.JS
  • 16. DEMO - RaphaelJS In 2013 In 2010 (IE)
  • 17. The Data Layer getting data from SharePoint REST Interface Client Object Model SOAP Web Services Roll your own
  • 18. REST Interface Speaks the native language of the web server - HTTP url-based, REST-ful query syntax No CAML!!! Based on ODATA standard Works really well with jQuery Can be used asynchronously or synchronously Can access (in 2013): List and site data Social Feed Search External Lists Taxonomy, Workflow, and more
  • 19. REST Interface sample code
  • 20. Client Side Object Model (CSOM or JSOM) Quasi-object-oriented API which wraps the REST interface Familiar interface for .NET developers who might be afraid of the REST interface syntax Asynchronous only Can access: List and site data Social Feed Search External Lists Taxonomy, Workflow, and more
  • 21. CSOM Code example
  • 22. SharePoint SOAP Web Services Have been around forever Were the only way to get data in JavaScript in SharePoint 2007 Deprecated, but still VERY heavily used Code written for 2007 will still work in 2013* Can do a TON of stuff Heavy payload, may have performance implications Usually used in conjunction with SPServices http://msdn.microsoft.com/en-us/library/sharepoint/jj193051.aspx http://spservices.codeplex.com/ (* - more or less)
  • 23. Sample SPServices call
  • 24. Public web services and Roll your own Query services from sources such as Azure Data Market or Programmable Web Write your own web services, in SharePoint, in the cloud, or wherever
  • 25. Case study Agile Project Management Sprints and Tasks Are we progressing toward our goal for this sprint? (Burndown Chart) Breakdown of finished / unfinished tasks for a sprint Drilldown capability to drill down from chart to individual tasks
  • 26. Elements of a burndown chart
  • 27. DEMO - Burndown Chart Current state a SharePoint site with sprints and sprint tasks Allow the user to select a sprint, and for the selected sprint, Show the total number of story points and the ideal path Render the progression of story point completion throughout the sprint
  • 28. DEMO - Task status breakdown For the selected sprint, Show the uncompleted story points in a chart grouped visually by the developer assigned to those tasks When a developers wedge is clicked, show all the tasks assigned to that developer for the sprint in a list When a task is hovered, show the display form for that task so that executives can see the comment history and other metadata.
  • 29. Reference links Charting APIs ChartJS Raphael JS HighCharts Google Charts rGraph Canvas vs SVG discussion http://msdn.microsoft.com/en- us/library/ie/gg193983(v=vs.85).aspx#Using_Canvas_AndOr_SVG http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ SharePoint Data Access REST Interface JavaScript CSOM SPServices
  • 30.