Spsmi13 charts
-
Upload
derek-gusoff -
Category
Technology
-
view
818 -
download
0
description
Transcript of Spsmi13 charts
Dynamic Charts with JavaScript, HTML5
and SharePointDerek Gusoff
Senior Consultant, Sogeti USA
October 5, 2013
Your presenter
Derek Gusoff
Sogeti USA (5 years)
http://derekgusoff.wordpress.com
@dgusoff
www.linkedin.com/in/derekgusoff/
A story
Why HTML5 Charts?
No back-end configuration Don’t 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
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
Out of Scope
This is a short (45 minute) talk!
Deployment
In depth analysis of code
HTML5 and graphics technology
Scalable Vector Graphics
Canvas
VML
Scalable Vector Graphics (SVG)
XML-based markup that is part of HTML5 specification
SVG-based markup becomes part of the browser’s 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
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
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
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
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
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)
Third Party libraries in action
Link to the library Declare an element (either <canvas> or <div> (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
DEMO - Canvas.JS
DEMO - RaphaelJS
In 2013
In 2010 (IE)
The Data Layer – getting data from SharePoint
REST InterfaceClient Object ModelSOAP Web ServicesRoll your own
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
REST Interface sample code
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
CSOM Code example
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)
Sample SPServices call
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
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
Elements of a burndown chart
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
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 developer’s “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.
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
Thank you!