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
• Industries:
• Financial Services, Professional Services, Manufacturing,
Advertising, Pharmaceutical, Construction, Education, Non
Profit
The Modern Application Company ™
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.
Strategy. Design. Enterprise Architecture.
Devices &
Mobility
Strategy &
Design
Cloud &
Services
Collaboration &
Social
Data &
Analytics
Our Clients. Industry Expertise.
Cross-Platform Solutions
Our approach aligns business strategy with technical architecture and
capabilities for optimum velocity and impact.
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
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
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…
DISCLAIMER
Chart Web Parts
And they’re gone…
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
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
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
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
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
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
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
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
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
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
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
What do we want?
Flexible
Layout
Mobile
Friendly
Wide Browser
Support
Modern
Dynamic
Look & Feel
Vector
Based
SharePoint 2010
/ 2013 / O365
Extensible
Flexible
Data
Sources
No Obscene
Licensing Costs
Some alternatives…
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.
Getting the data
• 100% Client Side Approach
• We can’t directly query a SQL Database
• But we can do other things…
Getting the Data
Array
TSV / CSV /
XML
HTML /
DOM
JSON /
JSONP
SharePoint
OData
JSOM
SharePoint
REST
SQL Server
WCF
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
TD Ameritrade
Windows 8 Store App
 Real-time streaming quotes, Charts, Market
data, Order status, News
 Account information, Balances and positions,
Transaction history
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
HighCharts – Solution Example
Demo:
HighCharts Examples
32
32
D3.js
D3.js
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
D3.js
Prefuse
Flare
Protovis
D3
• 2005
• Java
• 2007
• Action
Script/Flash
• 2009
• JavaScript
• 2011
• JavaScript
D3.js
More than just visualization…
jQuery
D3
AJAX
YES
YES
Attributes
YES
YES
CSS
YES
YES
Dimensions
YES
NO
Effects
YES
YES
Events
YES
YES
Manipulation
YES
YES
Selectors
YES
YES
Traversal
YES
YES
Data Binding
NO
YES
Demo: D3.js Examples
38
38
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
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
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>
Demo: More D3.js Examples
42
42
D3.js - Layouts
Bundle
Chord
Cluster
Force
Hierarchy
Histogram
Pack
Partition
Pie
Stack
Tree
Treemap
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.
Demo:
Building a Bar Chart with
D3.js
45
45
D3.js – Learning Resources
• Main Website:
• d3js.org
• GitHub
• mbostock/d3
• Local
• General Assembly – Data Visualization Workshop
Questions?
47
47
Info
Daniel Segan
• Email: [email protected]
• Twitter: @dsegan
Julie Turner’s Solution & MSDN Article
• http://bit.ly/SODo5O