Presentation is loading. Please wait.

Presentation is loading. Please wait.

SharePoint Data Visualization

Similar presentations

Presentation on theme: "SharePoint Data Visualization"— Presentation transcript:

1 SharePoint Data Visualization
With HighCharts & D3.js

2 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

3 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. Start with company purpose… key messages in the description of our approach “BlueMetal was created to bring together a group of high end designers and architects that would craft holistic solutions, blending architecture, innovation, creative design and strategic vision to exactly meet your needs and ensure your success. We started in Boston and 2010 and have grown to xyz employees and offices in Boston, New York and Chicago.” Craftsmanship Interactive design & technology architecture firm Most experienced consultants Taking on the most challenging business and technical problems our clients face Examples: Steward call us “their innovation sledge hammer.” Introduce the four key outcomes or deliverables that we drive as a company: Business Architecture Alignment Design Driven Solutions Architecture is at the Core of What We Deliver Methodologies help deliver quality & velocity

4 Strategy. Design. Enterprise Architecture.
Devices & Mobility Collaboration & Social Cloud & Services Data & Analytics Walk through practices and describe in a high-level how we bring people together from across the practices to deliver those exacting solutions. “We are able to bring together our competencies across practices to deliver holistic solutions.”

5 Our Clients. Industry Expertise.
Opportunity to discuss incredible portfolio of clients. Industry expertise across Financial Services and Health & Life Sciences.

6 Cross-Platform Solutions
Our approach aligns business strategy with technical architecture and capabilities for optimum velocity and impact.

7 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

8 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

9 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…


11 Chart Web Parts And they’re gone…

12 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

13 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

14 SSRS Reports are relatively static Chart Layouts
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

15 SSRS Appearance Front-end Extensibility 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

16 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

17 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

18 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

19 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

20 Power BI O365 Based BI Suite Adds more capabilities HTML5 Rendering
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

21 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

22 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

23 What do we want? Wide Browser Support SharePoint 2010 / 2013 / O365
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

24 Some alternatives…

25 Some alternatives… Based on JavaScript Dynamic Open Source
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.

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

27 Getting the Data Array JSON / JSONP OData TSV / CSV / XML SharePoint

28 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

29 TD Ameritrade Windows 8 Store App
Real-time streaming quotes, Charts, Market data, Order status, News Account information, Balances and positions, Transaction history PUBLICLY SHAREABLE Geo: NYC Project Lead: Szymon Rozga MAAP project App store link:

30 HighCharts Licensing Compatibility
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

31 HighCharts – Solution Example

32 Demo: HighCharts Examples

33 D3.js

34 D3.js

35 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

36 D3.js Prefuse Flare Protovis D3 2005 Java 2007 Action Script/Flash
2009 JavaScript D3 2011

37 D3.js More than just visualization… jQuery D3 AJAX YES Attributes CSS
Dimensions NO Effects Events Manipulation Selectors Traversal Data Binding

38 Demo: D3.js Examples 38

39 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

40 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

41 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>

42 Demo: More D3.js Examples

43 D3.js - Layouts Bundle Chord Cluster Force Hierarchy Histogram Pack
Partition Pie Stack Tree Treemap

44 D3.js Important Ideas Scales General Update Pattern
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.

45 Demo: Building a Bar Chart with D3.js

46 D3.js – Learning Resources
Main Website: GitHub mbostock/d3 Local General Assembly – Data Visualization Workshop

47 Questions? 47

48 Julie Turner’s Solution & MSDN Article
Info Daniel Segan Julie Turner’s Solution & MSDN Article

Download ppt "SharePoint Data Visualization"

Similar presentations

Ads by Google