sharepoint data visualization

48
With HighCharts & D3.js SharePoint Data Visualization

Upload: evelyn-savage

Post on 02-Jan-2016

76 views

Category:

Documents


0 download

DESCRIPTION

SharePoint Data Visualization. With HighCharts & D3.js. About me. Daniel Segan Senior Software Engineer @ BlueMetal Based in NYC 15+ Years Experience SharePoint, Web / .NET Development, Enterprise Software, BI, Data, Agile Projects Collaboration, Line-of-Business, Integration - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: SharePoint Data Visualization

With HighCharts & D3.js

SharePoint Data Visualization

Page 2: SharePoint Data Visualization

About me

• Daniel Segan• Senior Software Engineer @ BlueMetal • Based in NYC• 15+ Years Experience • SharePoint, Web / .NET Development, Enterprise

Software, BI, Data, Agile Projects• Collaboration, Line-of-Business, Integration• Industries:

• Financial Services, Professional Services, Manufacturing, Advertising, Pharmaceutical, Construction, Education, Non Profit

Page 3: SharePoint Data Visualization

Modern technology, craftsman quality. We’re an interactive design and technology architecture firm matching the most experienced consultants in the industry to the most challenging business and technical problems facing our clients.

The Modern Application Company ™

Page 4: SharePoint Data Visualization

Strategy. Design. Enterprise Architecture.

Strategy & Design

Devices &Mobility

Collaboration & Social

Cloud & Services

Data & Analytics

Page 5: SharePoint Data Visualization

Our Clients. Industry Expertise.

Page 6: SharePoint Data Visualization

Cross-Platform Solutions

Our approach aligns business strategy with technical architecture and capabilities for optimum velocity and impact.

Page 7: SharePoint Data Visualization

Goals

• Identify some nuances in the data visualization capabilities of the Microsoft BI stack

• Describe some scenarios where an alternative approach is desirable• Offer an introduction to a couple of those alternatives

Page 8: SharePoint Data Visualization

Agenda

• Questions for the audience• Review of the Microsoft SharePoint BI Stack • The Dilemma • Some Alternatives

• HighCharts• Demo: HighCharts Examples

• D3.js• Demo: Building an animated bar chart with D3

• Q&A

Page 9: SharePoint Data Visualization

Questions for you…

• What tools are most of you using today for data visualization? • Where do the Microsoft BI tools work the best? • Where have they fallen short?• What kind of BI functionality are your users asking for?

• Better looking dashboards? • More functionality? • Richer Mobile Experience?

• What level of familiarity do you have with JavaScript?• It’s really not that bad…

Page 10: SharePoint Data Visualization

DISCLAIMER

Page 11: SharePoint Data Visualization

Chart Web Parts

And they’re gone…

Page 12: SharePoint Data Visualization

SQL Server Reporting Services

• Originally introduced as an add on to SQL Server 2000• Has come a long way!

• Integrates with SharePoint for Deployment / Publishing / Rendering

• Supports subscription model• Scalability

• Data Caching• Server load balancing and redundancy

Page 13: SharePoint Data Visualization

SSRS: The Good

• Accessible Development Environment• Skills transfer from Crystal Reports, Access

• Flexible Data Sources• Nearly all Databases, XML, Text Files,

SharePoint• Join data across data sources

• Robust Document Exporting / Printing Support• Word, Excel, PDF, Text, etc. • Built in Pagination

• Was designed with printing in mind

Page 14: SharePoint Data Visualization

SSRS

• Reports are relatively static• Parameters, Hide/Show sections, Conditional

formatting, links between reports

• Chart Layouts• Built in charts work for the most standard

scenarios, but there is limited flexibility – you can’t simply create a new chart type.

• Infrastructure / Licensing• Some companies just don’t set it up or have

the licensing to support it

Page 15: SharePoint Data Visualization

SSRS

• Appearance• Great for rows / columns• Charts / Fonts appear pixelated, dated

• Front-end Extensibility• JavaScript Hacks – You can do it, but it’s no fun

• E.g Same Server URL Issue• Difficult to maintain / debug

Page 16: SharePoint Data Visualization

Excel Services / Excel Web Application

• Extremely accessible• Everyone kind of knows how to use Excel• Very easy to quickly deliver a remarkably

functional solution

• Mature Product• In its current versions (2013 / O365) it really

shines.

• Extensible• JavaScript Object Mode (JSOM) allows you to

interact with workbooks programmatically

Page 17: SharePoint Data Visualization

Excel Services / Excel Web Application

• Looks like Excel• Cell based layout / Standard Excel

Charts

• User Experience• Can sometimes be confusing• Feels canned

• Additional Setup• Requires Services

• Licensing• Enterprise CAL

Page 18: SharePoint Data Visualization

Power Pivot / Power View

• Familiar Tools• Extends Excel, leverages knowledge of Pivot Tables • DAX is similar to Excel functions and expressions

• Pivot• Incredibly easy to slice and dice data

• Rich Dynamic Display of Data• Modern Looking with some trade-offs

Page 19: SharePoint Data Visualization

Power Pivot / Power View

• Complex Setup• A lot of moving parts and a somewhat

invasive installation – can’t just set it up on a whim

• Silverlight • HTML5 seems to be on it’s way, but no real

promises yet from Microsoft – not really an option for mobile users

• Refresh• Limited Refresh Schedule

• Licensing• Enterprise CAL

Page 20: SharePoint Data Visualization

Power BI

• O365 Based BI Suite• 100% Cloud • Uses Power Pivot / Power View

• Adds more capabilities• Power Query, Power Map, Integration with HD

Insights, Windows Store App

• HTML5 Rendering• Nice!

• Truly awesome potential• Demos are breathtaking• Rapid release cycle

Page 21: SharePoint Data Visualization

Power BI

• Limited to O365• Not sure when if/when features will be available

on-prem, Possibly never!• A lot of people are not ready for the cloud

Page 22: SharePoint Data Visualization

The dilemma (hitting that brick wall)

• Can’t do what I want• Due to the design of the tool or some technical

limitations, I can’t display the data how I would like to…

• Quick and Dirty • I am unable to use the standard BI tools because

they aren’t set up, I don’t have access, or I don’t have the licensing…

• Lame Visuals• The data is right and the report works, but it just

doesn’t pop

Page 23: SharePoint Data Visualization

What do we want?

Flexible Layout

Mobile Friendly

Modern Dynamic

Look & Feel

Vector Based Extensible

Flexible Data

Sources

Wide Browser Support

SharePoint 2010 / 2013 / O365

No Obscene Licensing Costs

Page 24: SharePoint Data Visualization

Some alternatives…

Page 25: SharePoint Data Visualization

Some alternatives…

• Based on JavaScript• Easy to extend functionality• Vast Array of Plugins for both HighCharts and D3.js

• Dynamic• Visualizations can have Animations, update display

• Open Source• Both options are open source

• HighCharts is not free for business use

• Active Communities• Easy to find answers to questions / get support

• Tons of Sample Code• If you are looking to do something, chances are it or something like it has been done.

Page 26: SharePoint Data Visualization

Getting the data

• 100% Client Side Approach• We can’t directly query a SQL Database• But we can do other things…

Page 27: SharePoint Data Visualization

Getting the Data

Array JSON / JSONP OData

TSV / CSV / XML

SharePointJSOM

SharePoint REST

HTML / DOM SQL Server WCF

Page 28: SharePoint Data Visualization

HighCharts

• Pure JavaScript based charting library

• Chart Types• line, spline, area, area spline• column, bar, pie, scatter• angular gauges• area range, area spline range, column range, • bubble, box plot• error bars, funnel, waterfall, polar chart types

• Charts can be Interactive• Clickable, Hover, Animation

Page 29: SharePoint Data Visualization

TD Ameritrade

Windows 8 Store App Real-time streaming quotes, Charts, Market

data, Order status, News Account information, Balances and positions,

Transaction history

Page 30: SharePoint Data Visualization

HighCharts

• Licensing• Free for non-profits / Free to Developers• Site or Developer Licensing for

Commercial / Government

• Compatibility • Works on all modern browsers• Support for legacy versions of IE

Page 31: SharePoint Data Visualization

HighCharts – Solution Example

Page 32: SharePoint Data Visualization

Demo: HighCharts Examples

3232

Page 33: SharePoint Data Visualization

D3.js

Page 34: SharePoint Data Visualization

D3.js

Page 35: SharePoint Data Visualization

D3.js

• Open Source• Used extensively by the

New York Times for rich / interactive infographics

• Developed by Mike Bostock• Based on a long history of other

similar work

Page 36: SharePoint Data Visualization

D3.js

Prefuse• 2005• Java

Flare• 2007• Action

Script/Flash

Protovis• 2009• JavaScript

D3• 2011• JavaScript

Page 37: SharePoint Data Visualization

D3.js

jQuery D3AJAX YES YESAttributes YES YESCSS YES YESDimensions YES NOEffects YES YESEvents YES YESManipulation YES YESSelectors YES YESTraversal YES YESData Binding NO YES

More than just visualization…

Page 38: SharePoint Data Visualization

Demo: D3.js Examples

3838

Page 39: SharePoint Data Visualization

D3.js – How does it work

• D3 is set based• Operations occur on the entire set of object

• think SQL

• Data is Bound to DOM elements – this is called a join• You define the binding operation and let it happen; there is no for loop

• E.g. For every data object, draw a circle

• Attributes• Operations can use the attributes of the data

• E.g. if the Gender Attribute is Male make the circle blue

Page 40: SharePoint Data Visualization

D3.js – How does it work

• Get your data• Fetch list items from a SharePoint list in JSON format using REST API

• Select DOM nodes you want to work with• Translate the data objects into DOM elements and attributes• Bind your data to DOM elements (Join)

• Enter – New data, for which there were no existing elements• [Update – New data joined successfully to a new element]• [Exit – Existing elements, for which there were no new data]• __data__ - Data objects are bound to this Attribute • Key Function – determines the “Primary Key” used in Update / Exit

Page 41: SharePoint Data Visualization

D3.js - SVG

<svg height="210" width="500">  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /></svg>

Page 42: SharePoint Data Visualization

Demo: More D3.js Examples

4242

Page 43: SharePoint Data Visualization

D3.js - Layouts

Bundle Chord Cluster Force

Hierarchy Histogram Pack Partition

Pie Stack Tree Treemap

Page 44: SharePoint Data Visualization

D3.js Important Ideas

• Scales• Functions to map input domain to an output domain

• General Update Pattern • The general update pattern is used when a data-join is

followed by operations on the enter, update and exit selections in order to actively draw new elements, update existing elements, and remove elements no longer needed.

Page 45: SharePoint Data Visualization

Demo: Building a Bar Chart with D3.js

4545

Page 46: SharePoint Data Visualization

D3.js – Learning Resources

• Main Website:•d3js.org

• GitHub•mbostock/d3

• Local•General Assembly – Data Visualization Workshop

Page 47: SharePoint Data Visualization

Questions?

4747

Page 48: SharePoint Data Visualization

Info

Daniel Segan•Email: [email protected]•Twitter: @dsegan

Julie Turner’s Solution & MSDN Article•http://bit.ly/SODo5O