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!